使用GitHub Actions部署React应用至Azure App Service后最新变更不生效

核心问题：打包范围错误 #

你的GitHub Actions脚本中，打包步骤把整个项目目录（包括源码、node_modules等）都压缩了，但前端应用部署只需要构建后的产物（通常是build或dist目录）。这会导致部署包包含大量无关文件，甚至可能出现旧文件未被正确覆盖，或者App Service无法加载最新静态资源的情况。

修复步骤 #

1. 修改构建后的打包逻辑 #

将打包命令改为只压缩构建产物目录，假设你的build-stage脚本将产物输出到build目录：

# 替换原Create zip archive步骤的命令
zip -r node-app.zip ./build

2. 调整部署步骤的包路径 #

部署时直接指定上传的zip包路径：

- name: 'Deploy to Azure Web App'
  id: deploy-to-webapp
  uses: azure/webapps-deploy@v2
  with:
    app-name: 'AppName'
    slot-name: 'Production'
    publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} # 建议用GitHub Secrets存储，避免明文泄露
    package: ./node-app.zip

3. 额外排查点 #

• 确认构建产物目录：检查package.json中的build-stage脚本，确认输出目录是build还是dist，对应调整打包命令
• 查看Kudu控制台：登录https://<你的应用名>.scm.azurewebsites.net，进入site/wwwroot目录，确认里面的文件是否为最新构建产物
• 检查部署日志：在GitHub Actions的deploy任务日志中，查看文件覆盖记录，确认部署包是否正确上传并解压

完整修正后的脚本片段 #

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build
        run: |
          npm install
          CI=false npm run build-stage

      - name: Create zip archive
        run: zip -r node-app.zip ./build # 仅打包构建产物目录

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: node-app.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'AppName'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ./node-app.zip

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