如何通过同一GitHub Action将Angular与ASP.NET Core API一同发布到Azure？

针对你遇到的仅能发布API、无法同步发布Angular UI的问题，可通过以下步骤修改工作流，实现两者一同发布：

1. 核心原理 #

按照微软的指南，Angular项目默认位于ClientApp目录，构建产物需输出到ASP.NET Core项目的wwwroot目录，这样.NET发布时会将UI静态文件一同打包部署，最终由ASP.NET Core托管静态资源。

2. 修改GitHub Action工作流 #

在现有工作流中添加Angular构建步骤，确保UI产物先构建完成，再执行.NET的发布流程：

完整修改后的工作流示例 #

name: Build and deploy ASP.NET Core + Angular app to Azure Web App - rardkweb

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      # 配置Node.js环境（匹配你的Angular版本要求）
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18' # Angular 16+建议用Node 18+，可根据项目调整
          cache: 'npm'
          cache-dependency-path: './ClientApp/package-lock.json'

      # 构建Angular生产版本
      - name: Install Angular dependencies
        working-directory: ./ClientApp
        run: npm ci

      - name: Build Angular bundle
        working-directory: ./ClientApp
        run: npm run build -- --prod

      # 原有的.NET构建发布步骤
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: '8.0.x'

      - name: Restore dependencies
        run: dotnet restore

      - name: Build .NET project
        run: dotnet build --configuration Release --no-restore

      - name: Publish .NET project
        run: dotnet publish --configuration Release --no-build --output ${{ env.DOTNET_ROOT }}/publish

      # 部署到Azure Web App
      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'rardkweb'
          slot-name: 'production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXX }}
          package: ${{ env.DOTNET_ROOT }}/publish

关键修改说明 #

• 新增Setup Node.js步骤：为Angular构建提供运行环境，启用npm缓存加速依赖安装
• 新增Angular构建步骤：进入ClientApp目录，先通过npm ci安装依赖，再执行生产环境构建，产物会自动输出到上级目录的wwwroot（需确保angular.json中outputPath配置为"../wwwroot"）

3. 验证本地配置 #

确保本地项目配置正确，避免构建产物未被包含：

1. 打开ClientApp/angular.json，确认projects -> <你的项目名> -> architect -> build -> options -> outputPath为"../wwwroot"
2. 检查ASP.NET Core项目的.csproj文件，确保包含wwwroot目录的内容（默认已包含，若缺失可添加）：

<ItemGroup>
  <Content Include="wwwroot/**" />
</ItemGroup>

4. 常见问题排查 #

• Angular构建失败：检查Node版本是否匹配项目Angular版本（可通过ng version查看本地版本要求）
• UI资源未部署：本地执行dotnet publish，查看输出目录的wwwroot是否存在Angular构建产物，确认产物已被包含
• 依赖安装缓慢：使用npm ci代替npm install，结合缓存配置提升效率

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