分离构建部署后，如何让staticwebapp.config.json部署到Azure静态Web应用

当你设置skip_app_build: true时，Azure Static Web Apps的部署步骤不会自动将根目录的staticwebapp.config.json复制到部署目录，而Vue默认的构建流程也不会把这个文件打包到dist文件夹里，导致工件中缺少该文件。可以通过以下几种方式解决：

方法1：构建步骤中手动复制文件 #

在build任务的构建步骤之后，添加复制命令，把根目录的staticwebapp.config.json复制到dist目录，确保上传的工件包含该文件：

jobs:
  build:
    if: github.event_name == 'push'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v3
      - name: npm install and run build
        run: npm install && npm run build
      - name: Copy staticwebapp.config.json to dist
        run: cp staticwebapp.config.json dist/
      - name: Upload artifact
        uses: actions/upload-artifact@v3.1.0
        with:
          name: app
          path: dist/

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3.0.0
        with:
          name: app

      - name: Deploy to Azure
        id: deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_STONE_0BAB0F910 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ""
          api_location: ""
          skip_app_build: true

方法2：修改Vue配置自动复制文件 #

在项目根目录的vue.config.js中添加配置，让Vue构建时自动将staticwebapp.config.json复制到dist目录：

如果没有vue.config.js，先创建该文件，然后添加以下内容（使用copy-webpack-plugin，若未安装先执行npm install copy-webpack-plugin --save-dev）：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'staticwebapp.config.json', to: '.' }
        ]
      })
    ]
  }
};

修改后，执行npm run build时文件会自动被复制到dist，无需在GitHub Action中额外添加步骤。

方法3：部署步骤中单独获取配置文件 #

如果不想修改构建流程，可以在部署步骤中通过稀疏checkout拉取配置文件，再复制到部署目录：

deploy:
  runs-on: ubuntu-latest
  needs: build
  steps:
    - name: Download artifact
      uses: actions/download-artifact@v3.0.0
      with:
        name: app
    - name: Checkout config file only
      uses: actions/checkout@v2
      with:
        sparse-checkout: staticwebapp.config.json
        sparse-checkout-cone-mode: false
    - name: Copy config file to deploy directory
      run: cp staticwebapp.config.json ./
    - name: Deploy to Azure
      id: deploy
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_STONE_0BAB0F910 }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        app_location: ""
        api_location: ""
        skip_app_build: true

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