如何在Azure静态Web Apps部署中指定Node.js 14版本？

你遇到的问题核心在于：Azure/static-web-apps-deploy这个动作的构建环节是在Azure托管的隔离容器中运行的，它并不会使用Github Runner上你安装的Node.js版本。所以你之前添加的setup-node步骤只会修改Runner环境的Node版本，对Azure那边的构建容器完全没有影响。

下面给你两种可行的解决方案：

方案一：直接指定Azure构建环境的Node版本 #

Azure静态Web Apps支持通过环境变量或者配置文件指定构建时使用的Node.js版本，不需要修改Runner环境：

方法1：使用环境变量指定 #

在你的Build And Deploy步骤中添加env字段，明确设置Node版本：

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v0.0.1-preview
  env:
    NODE_VERSION: '14.x' # 这里指定你需要的Node版本
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: "/"
    api_location: "api"
    app_artifact_location: "public"

方法2：使用.nvmrc文件 #

在项目根目录创建一个.nvmrc文件，内容直接写你需要的Node版本号：

14.x

Azure的构建环境会自动读取这个文件，使用对应的Node版本进行构建。

方案二：在Github Runner中提前构建，再上传产物 #

如果你需要完全掌控构建环境（比如要自定义构建脚本、安装额外依赖等），可以先在Github Runner中完成构建，再把产物上传到Azure：

修改后的工作流配置如下：

name: Azure Static Web Apps CI/CD
on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master
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@v2
        with:
          submodules: true
      # 安装指定版本的Node.js，建议用v3版本的setup-node动作
      - name: Setup Node 14.x
        uses: actions/setup-node@v3
        with:
          node-version: '14.x'
          cache: 'npm' # 可选，缓存npm依赖，加快后续构建速度
      # 在Runner中完成依赖安装和项目构建
      - name: Install dependencies & build project
        run: |
          npm install
          npm run build # 这里替换成你实际的构建命令
      # 直接上传已构建好的产物，不需要Azure再执行构建
      - name: Deploy to Azure Static Web Apps
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "" # 留空，因为我们已经提前完成构建
          api_location: "" # 如果API也是提前构建的，同样留空；否则按需调整
          app_artifact_location: "public" # 指向你构建好的产物目录，和之前一致
  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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
          action: "close"

两种方案对比：

• 方案一更简单，只需要添加一行配置或者一个文件，适合快速解决版本问题；
• 方案二更灵活，能完全控制构建过程，适合有复杂构建需求的场景。

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