通过GitHub Actions部署Angular/ASP.NET Core到Azure遇路径问题

问题根源 #

• 本地Windows环境与GitHub Actions的Ubuntu环境中，相对路径解析逻辑存在差异：
  • 本地运行时，Angular构建的相对路径../webapi.server/wwwroot会直接定位到WebAPI项目的wwwroot目录。
  • 但在Ubuntu环境中，若WebAPI项目的wwwroot目录提前被创建（比如.NET构建前置执行），Angular构建会在已存在的wwwroot目录下再生成一个wwwroot，形成wwwroot/wwwroot的嵌套结构，导致ASP.NET Core无法找到正确的静态文件根目录，返回404。
• 若移除路径中的wwwroot，Angular构建输出直接写入webapi.server目录，会覆盖或干扰.NET项目的核心文件/配置，导致后续.NET构建失败。

解决方案 #

1. 严格控制GitHub Actions的步骤顺序与工作目录 #

确保先执行Angular构建，再执行.NET构建，且每个步骤切换到对应项目目录：

• 切换到Angular项目目录（如ClientApp），执行构建命令：

  ng build --prod --output-path ../webapi.server/wwwroot
  

  注意：此时不要提前创建WebAPI项目的wwwroot目录，让Angular构建自动生成，避免嵌套问题。

2. 确认ASP.NET Core静态文件配置 #

检查WebAPI项目的Program.cs，确保已正确配置静态文件服务：

app.UseStaticFiles();
// 支持SPA路由需添加：
app.MapFallbackToFile("index.html");

3. 标准GitHub Actions工作流示例 #

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: '7.0.x' # 对应你的.NET版本
          
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x' # 对应Angular支持的Node版本
          
      - name: Build Angular
        working-directory: ./ClientApp
        run: |
          npm install
          ng build --prod --output-path ../webapi.server/wwwroot
          
      - name: Build .NET
        working-directory: ./webapi.server
        run: dotnet publish -c Release -o ./publish
        
      - name: Deploy to Azure
        uses: azure/webapps-deploy@v2
        with:
          app-name: '你的Azure应用名'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ./webapi.server/publish

4. 验证目录结构（可选） #

在构建后添加步骤，确认WebAPI的wwwroot目录结构正确：

working-directory: ./webapi.server
run: ls -la wwwroot

输出应显示Angular的构建文件（index.html、js、css等），而非嵌套的wwwroot目录。

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