如何将两个项目部署到单个Azure Web App——基于子目录部署

我来帮你搞定这个多项目部署的问题，核心是通过自定义部署脚本来同时处理两个项目的构建与文件分发，下面是具体可落地的步骤：

1. 完善.deployment配置文件 #

先确保你仓库根目录的.deployment文件内容正确，它的作用是告诉Azure部署引擎（Kudu）使用我们自定义的部署脚本。文件内容如下：

[config]
command = deploy.cmd

2. 创建自定义部署脚本deploy.cmd #

在仓库根目录新建deploy.cmd文件，这个脚本会一站式完成依赖安装、项目构建、产物复制的全流程。你可以根据自己项目的实际情况调整细节，参考脚本如下：

@echo off
setlocal

:: 配置Node.js和npm环境路径（Azure会自动配置，但显式指定更稳妥）
set PATH=%PATH%;%APP_DATA%\npm;%ProgramFiles%\nodejs

:: 1. 安装主项目依赖并构建
echo 🔧 安装主项目依赖...
cd "%DEPLOYMENT_SOURCE%"
call npm install
if !ERRORLEVEL! neq 0 goto error

echo 🏗️ 构建主项目...
call npm run build -- --prod  // 替换成你主项目实际的构建命令，比如npm run build:prod
if !ERRORLEVEL! neq 0 goto error

:: 2. 安装Angular子项目依赖并构建
echo 🔧 安装第二个项目依赖...
cd "%DEPLOYMENT_SOURCE%\secondproject"
call npm install
if !ERRORLEVEL! neq 0 goto error

echo 🏗️ 构建Angular子项目（指定子路径base-href，避免路由失效）...
call ng build --prod --base-href /secondproject/
if !ERRORLEVEL! neq 0 goto error

:: 3. 将Angular构建产物复制到主项目的wwwroot子目录
echo 📦 同步第二个项目文件到部署目录...
xcopy "%DEPLOYMENT_SOURCE%\secondproject\dist\secondproject" "%DEPLOYMENT_TARGET%\wwwroot\secondproject\" /E /Y /I
if !ERRORLEVEL! neq 0 goto error

:: 部署成功提示
echo ✅ 部署完成！
goto end

:error
echo ❌ 部署失败，错误代码：%ERRORLEVEL%
exit /b %ERRORLEVEL%

:end
endlocal

⚠️ 注意事项：

• 如果你的Angular项目名称不是secondproject，要把dist/secondproject替换成实际的构建输出目录
• 主项目的构建命令请替换成你当前正在使用的有效命令

3. 调整Angular路由配置（关键） #

如果你的Angular项目用到了路由，确保app-routing.module.ts里的配置兼容子路径：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: false, // 默认就是false，保持这个配置即可
    enableTracing: false // 调试时可以开启，上线后关闭
  })],
  exports: [RouterModule]
})

因为我们构建时指定了--base-href /secondproject/，路由会自动基于这个子路径工作，不用额外修改路由规则。

4. 推送代码完成部署 #

把.deployment和deploy.cmd添加到Git仓库，然后推送到Azure关联的仓库即可。Kudu会自动执行这个脚本，完成两个项目的部署。

验证部署 #

部署完成后：

• 访问www.wholeproject.com会正常显示主项目
• 访问www.wholeproject.com/secondproject就能看到你的Angular子项目

如果遇到404错误，优先检查：

• Angular构建时的base-href是否正确
• 部署脚本里的复制路径是否匹配实际的构建输出目录
• Azure Web App的静态文件配置是否允许访问子目录

内容的提问来源于stack exchange，提问作者Mouna