gitlab CI 自动部署前端项目

1,032 阅读2分钟

介绍下我们现在的前端部署方式,主要有以下功能要在CI实现

  1. 安装依赖
  2. 编译代码
  3. 上传资源文件到云存储
  4. 部署服务器代码

.gitlab-ci.yml文件

image: node:8.9.3
stages:
  - build
  - test
  - deploy

build_master:
  stage: build
  script:
    - npm install --no-optional
    - npm run prod
    - node ./tools/generate.config.js
    - qshell='./tools/qshell-linux-x64'
    - chmod a+x "${qshell}"
    - ${qshell} account "${QINIU_AK}" "${QINIU_SK}"
    - ${qshell} qupload 8 ./qiniuconfig
  only:
    - master
  artifacts:
    expire_in: 1 week
    paths:
      - dist

deploy_master:
  image: sebble/deploy
  stage: deploy
  script:
    - mkdir -p ~/.ssh
    - echo "$PROD_DEPLOY_SSH" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav  dist/ "$PROD_DEPLOY_USER"@"$PROD_DEPLOY_HOST":/deploy_path
  only:
    - master

解释下部署代码,先看下build阶段的

    - npm install --no-optional
    - npm run prod

这个是安装依赖和编译的

    - node ./tools/generate.config.js

这个是生成七牛配置信息的,可根据实际情况修改,七牛qshell文档

{
    "src_dir": "",
    "bucket": "",
    "key_prefix": "",
    "up_host": "http://up-z2.qiniup.com",
    "overwrite": true,
    "skip_fixed_strings": ".svn,.git",
    "skip_suffixes": ".DS_Store,.exe",
    "log_stdout": true
}

我这生成的配置是这样,配置下要上传的目录和bucket,指定下前缀等

    - qshell='./tools/qshell-linux-x64'
    - chmod a+x "${qshell}"
    - ${qshell} account "${QINIU_AK}" "${QINIU_SK}"
    - ${qshell} qupload 8 ./qiniuconfig

用七牛的工具把资源文件(css,js,图片,音频)上传到七牛,一些变量信息,为了共用,写到项目组的CI / CDVariables里面了

only:
    - master

这个是指定只有master分支可以触发这个job

  artifacts:
    expire_in: 1 week
    paths:
      - dist

artifacts主要是把编译结果保存起来,供下一阶段使用,还有就是有的时候要下载下来看下代码有问题,expire_in指定缓存文件过期时间,paths指定要缓存的目录和文件

build阶段主要做这些事情


再来看下deploy阶段

    - mkdir -p ~/.ssh
    - echo "$PROD_DEPLOY_SSH" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav  dist/ "$PROD_DEPLOY_USER"@"$PROD_DEPLOY_HOST":/deploy_path

首先创建一个.ssh目录,把服务器的私钥写到id_dsa,然后用rsync把编译结果上传到我们的服务器,变量也是写到Variables里面了。

最后我们还要把我们生成的html文件的资源链接改成七牛的地址

我们的前端是vue项目,修改vue.config.js

let deployEnv = process.env.READBOYENV
let publicPath = './'
let date = new Date()
let prefix = '/' + process.env.CI_PROJECT_NAME + '/' + date.getFullYear() + '' + (date.getMonth() + 1) + '' + date.getDate()
switch (deployEnv) {
    case 'TEST':
        publicPath = process.env.TEST_RESOURCE_DOMAIN + prefix
        break;
    case 'PROD':
        publicPath = process.env.PROD_RESOURCE_DOMAIN + prefix
        break;
    default:
        break;
}

module.exports = {
    publicPath: publicPath,
    productionSourceMap: false
}

自动部署


为什么要用两个阶段,一个不行吗?

为什么有builddeploy阶段,一个build就行了啊,一开始我也是只有一个build,后面因为遇到一件事,才把这个过程分成两个阶段来的,有一次部署的时候,新部署的程序有点问题,想回滚到上一个版本,然后npm抽风了,下载依赖非常慢,等了5分钟才部署好,分成两个阶段的话,如果artifacts还没有过期,就可以跳过build直接执行deploy,直接部署文件就行了,不需要再下载依赖和编译了,非常快,如果上个版本的artifacts过期了,你可以先触发下上个版本的CI,生成上个版本的artifacts,再部署新版本的,如果新版本有问题,你重新执行下上个版本的deploy阶段,可以快速部署。

retry

全文完