web端自动化部署方案

背景

为了提高发布效率，践行DevOps，我们使用 gitlab 的 CI 工具作为我们前端项目的自动化部署方案。

集成后的开发&发布模式

1. 发布测试环境：代码提交到test分支自动发布。
2. 发布正式环境：将test代码合并到master分支自动发布。

集成CI/CD思路

集成步骤

1、集成ci脚本

# test、preview和master分支默认支持线上部署
# develop分支默认是开发分支，不建议(禁止)触发CI/CD流程,姑不作为默认触发部署分支

stages:
  - install
  - build
  - deploy

variables:
  OUTPUT_PATH: /var/www/f2e/$CI_PROJECT_NAME/
  TEST_TARGET: [email protected].**.**
  PRD_TARGET1: [email protected].**.**
  PRD_TARGET2: [email protected].**.**
  ASSETS_PUBLIC_PATH: $CI_PROJECT_NAME-$CI_COMMIT_REF_NAME/dist

# 安装依赖
install_packages:
  stage: install
  cache:
    key: $CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR
    paths:
      - node_modules/
  tags:
    - f2e
  only:
    refs:
      - test
      - master
    changes:
      - package.json
      - package-lock.json
  script:
    - cnpm install --silent

# 打包
build_project:
  stage: build
  cache:
    key: $CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR
    paths:
      - node_modules/
    policy: pull
  tags:
    - f2e
  only:
    refs:
      - test
      - master
  script:
    - export VUE_APP_RELEASE_VERSION=$CI_COMMIT_SHA # 注入webpack，方便sentry使用
    - npm run build:$CI_COMMIT_REF_NAME
  artifacts:
    name: '$CI_COMMIT_REF_NAME-dist'
    expire_in: 60 mins
    paths:
      - dist

# 发布测试环境
deploy_test:
  stage: deploy
  tags:
    - f2e
  only:
    refs:
      - test
  script:
    - rsync -rzav --delete dist/*.html --rsync-path="mkdir -p $OUTPUT_PATH && rsync" $TEST_TARGET:$OUTPUT_PATH
    - sudo chown -R gitlab-runner:gitlab-runner dist/
    - ~/ossutil64 cp -rf dist/ oss://cmvalue-web-cdn/repo/$ASSETS_PUBLIC_PATH

# 发布生产环境
deploy_prd:
  stage: deploy
  tags:
    - f2e
  only:
    refs:
      - master
  script:
    - rsync -rzav --delete dist/*.html --rsync-path="mkdir -p $OUTPUT_PATH && rsync" $PRD_TARGET1:$OUTPUT_PATH
    - rsync -rzav --delete dist/*.html --rsync-path="mkdir -p $OUTPUT_PATH && rsync" $PRD_TARGET2:$OUTPUT_PATH
    - sudo chown -R gitlab-runner:gitlab-runner dist/
    - ~/ossutil64 cp -rf dist/ oss://cmvalue-web-cdn/repo/$ASSETS_PUBLIC_PATH