如何通过GitLab CI将Vue应用部署至Azure静态Web应用服务

前置准备 #

操作前先完成以下配置：

• 在Azure门户创建静态Web应用资源，部署源选择「其他」，生成并保存部署令牌
• 进入GitLab对应项目的「设置 - CI/CD - 变量」页面，添加以下变量：
  • AZURE_STATIC_WEB_APPS_API_TOKEN：值填写刚才拿到的Azure部署令牌，勾选「掩码」选项避免令牌泄露
  • 可选添加NODE_VERSION：指定项目适配的Node.js版本，建议和本地开发环境版本保持一致

完整CI配置文件 #

在Vue项目根目录创建.gitlab-ci.yml文件，内容如下：

stages:
  - build
  - deploy

# Vue应用构建阶段
build_vue:
  stage: build
  image: node:18-alpine # 可替换为项目适配的Node.js镜像版本
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/ # 为Vue项目默认打包输出目录，如有自定义输出路径请同步修改
    expire_in: 1 day

# 部署到Azure静态Web应用阶段
deploy_azure_swa:
  stage: deploy
  image: mcr.microsoft.com/appsvc/staticappsclient:stable
  needs:
    - job: build_vue
      artifacts: true
  script:
    # 无后端API的项目可以删除 --api-location ./api 参数
    - swa deploy ./dist --api-location ./api --deployment-token $AZURE_STATIC_WEB_APPS_API_TOKEN --env production
  only:
    - main # 可根据实际分支规则修改，比如改为master、dev等

常见配置调整说明 #

• 若项目打包输出目录不是dist，需要同步修改构建阶段的artifacts路径、部署阶段的./dist路径
• 不需要预发布环境的场景，可以删除--env production参数
• 不需要构建缓存的场景，可以在npm install前添加npm cache clean --force命令
• 多环境部署需求可以新增对应job，调整分支触发规则和环境参数即可

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