Web-side automated deployment solution

background

In order to improve release efficiency and practice DevOps, we use gitlab's CI tool as an automated deployment solution for our front-end projects.

Integrated development & release model

1. Release test environment: the code is submitted to the test branch for automatic release.
2. Release the formal environment: merge the test code into the master branch and automatically release it.

Integrated CI/CD ideas

Integration steps

1. Integrated ci script

# 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