Azure静态Web应用部署：GitHub Actions无法识别dist文件夹求助

你的问题出在两个关键地方：缺少CI环境下的构建步骤，以及Azure Static Web Apps的路径配置参数搞反，具体修正如下：

核心问题说明 #

1. 未在CI中执行构建命令：GitHub Actions的运行环境是全新的隔离环境，不会自动继承你本地的依赖和构建产物，必须显式执行npm install和npm run build才能生成dist目录。
2. 路径参数配置错误：
   • app_location：指定的是前端源代码根目录（存放package.json、执行npm命令的目录，通常是仓库根目录），不是产物目录
   • output_location：指定的是构建完成后产物所在的目录（本地npm run build生成的dist文件夹）

修正后的完整Workflow配置 #

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      # 配置Node.js环境，匹配你本地使用的Node版本（比如18.x）
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'
          cache: 'npm' # 缓存npm依赖，加速后续构建
      # 安装项目依赖
      - name: Install dependencies
        run: npm install
      # 执行构建命令生成dist目录
      - name: Build project
        run: npm run build
      # 验证dist目录内容，方便排查构建是否成功
      - name: Check dist directory contents
        run: ls -la dist/
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          # 修正路径参数
          app_location: "." # 源代码根目录（仓库根目录）
          api_location: "" # 无API则留空
          output_location: "dist" # 构建产物目录
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

额外验证建议 #

• 推送修改后，查看GitHub Actions的日志，确认Build project步骤执行成功，且Check dist directory contents步骤能列出index.html等文件
• 如果构建失败，检查Node版本是否和本地一致（比如你本地用的是16.x，就把node-version改成'16.x'）

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