如何通过GitLab CI/CD为Azure静态网站配置分支预览部署？

你不需要手动安装Node.js、Azure CLI并处理登录，直接复用Azure Static Web Apps提供的GitLab部署镜像即可，它已经封装了所有部署逻辑，只需要配置几个关键变量就能实现生产+预览环境的自动部署。

完整的GitLab CI/CD配置 #

variables:
  # Azure Static Web Apps部署令牌，在GitLab项目CI/CD变量中配置
  AZURE_STATIC_WEB_APPS_API_TOKEN: $DEPLOYMENT_TOKEN
  # React构建后的静态文件目录（默认是build，按需修改）
  APP_LOCATION: "build"
  # 自定义构建命令
  BUILD_COMMAND: "npm run build"
  # 传递给React应用的环境变量
  REACT_APP_ENV: $REACT_APP_ENV
  REACT_APP_GOOGLE_AUTH_CLIENT_ID: $REACT_APP_GOOGLE_AUTH_CLIENT_ID
  REACT_APP_OPENAI_API_KEY: $REACT_APP_OPENAI_API_KEY

# 生产环境部署：仅合并到master分支时执行
deploy_production:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "部署到生产环境..."
    - /usr/bin/deploy.sh
  only:
    - master

# 预览环境部署：非master分支/PR触发时执行
deploy_preview:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "部署预览环境..."
    - /usr/bin/deploy.sh
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: $AZURE_STATIC_WEB_APPS_PREVIEW_URL # 镜像自动生成的预览地址
  only:
    - branches
  except:
    - master

关键说明 #

1. 镜像自带工具链：官方镜像已经预装了Node.js、npm和部署所需的依赖，无需手动安装，避免了环境配置的麻烦。
2. 无需Azure登录：仅需配置AZURE_STATIC_WEB_APPS_API_TOKEN（即你原有的DEPLOYMENT_TOKEN），这个令牌足够授权部署操作，省去了az login的步骤。
3. 自动构建+部署：BUILD_COMMAND指定了React的构建命令，镜像会自动执行npm install和npm run build，然后将APP_LOCATION目录下的静态文件部署到Azure。
4. 自动生成预览URL：对于非master分支，部署完成后镜像会自动设置AZURE_STATIC_WEB_APPS_PREVIEW_URL变量，GitLab会在合并请求页面显示这个预览链接，直接点击即可查看效果。
5. 按需调整触发条件：如果只想在发起PR时部署预览环境，可将deploy_preview的only: branches改成only: merge_requests。

前置准备 #

确保在GitLab项目的Settings > CI/CD > Variables中配置好DEPLOYMENT_TOKEN，这个值可以从Azure Static Web Apps的「管理」>「部署令牌」中获取。

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