能否将Azure Function部署槽与Azure静态Web应用预览环境结合使用？

可行性结论 #

完全可以实现让静态Web应用的Preview环境关联Azure Functions的staging槽，核心是通过配置静态Web应用的环境变量来覆盖默认的函数槽关联逻辑。

最优实现步骤 #

1. 利用内置应用设置指定函数槽 #

静态Web应用提供了AZURE_FUNCTIONS_SLOT_NAME这个内置应用设置，专门用于指定要关联的Azure Functions槽名。只需在Preview环境的部署流程中配置该参数，就能让预览环境指向staging槽。

2. 修改GitHub Action工作流 #

找到部署静态Web应用的azure/static-web-apps-deploy步骤，通过app_settings参数注入上述配置。同时要通过条件判断区分生产部署和PR触发的预览部署，避免影响生产环境的关联配置。

示例工作流片段：

jobs:
  build_and_deploy_preview:
    # 仅在PR触发时执行预览环境部署
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
      - name: 构建并部署到预览环境
        uses: azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PREVIEW }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" # 你的静态应用代码根路径
          api_location: "" # BYOF方案下留空
          output_location: "dist" # 静态构建产物路径
          # 注入预览环境专属的函数槽配置
          app_settings: |
            [
              {
                "name": "AZURE_FUNCTIONS_SLOT_NAME",
                "value": "staging"
              }
            ]

3. 同步Functions Staging槽代码 #

确保在部署静态Web应用预览环境的同时，已将PR对应的函数代码部署到Functions的staging槽。可以在同一工作流中添加Functions部署步骤，示例如下：

- name: 部署函数到Staging槽
        uses: azure/functions-action@v1
        with:
          app-name: your-function-app-name
          slot-name: staging
          package: ./api # 你的函数代码路径
          publish-profile: ${{ secrets.AZURE_FUNCTIONS_STAGING_PUBLISH_PROFILE }}

4. 验证配置效果 #

部署完成后，进入静态Web应用的Preview环境管理页面，查看应用设置确认AZURE_FUNCTIONS_SLOT_NAME已设为staging。调用预览环境的接口，通过函数日志或接口返回的版本标识，验证请求是否路由到了Functions的staging槽。

注意事项 #

• Preview环境是临时资源，PR合并或关闭后会自动删除，不会残留配置影响生产环境。
• 生产环境默认关联Functions的生产槽，无需修改生产部署的工作流配置。

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