Vue SSR基于Coding的持续集成部署实践(CI/CD)

fun0
1,212 阅读2分钟

用过netlify、vercel都知道推送完就会自动触发构建、接着线上就更新了，这种体验能极大程度提高开发效率、减轻心智负担

通过Coding也可以很方便的获得类似的体验，本文记录了相关的实践配置过程

准备

因为Vue做了SSR，且需要部署到内网的多个服务器上，Coding可以通过堡垒机来下发部署任务到内网的多个机器。

如果是SPA应用可以直接在构建完成后把build后的资源上传到OSS或其它什么静态服务。

打开团队配置页: https://${团队}.coding.net/cd-deck/admin/host-server/agents

安装堡垒机

复制命令安装，安装成功后即可看到加入到的堡垒机。

主机组

选定堡垒机，加上要部署到的主机内网IP

免密登录

堡垒机生成公钥

ssh-keygen

复制公钥到需要控制的机器即可免密登录

ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.1.23
ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.1.24

构建任务

打开一个项目，项目设置开启持续集成和制品库，然后增加一个构建任务。

安装依赖buid成功后会把dist打包上传到制品库dist.zip

Jenkinsfile

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: env.GIT_REPO_URL,
            credentialsId: env.CREDENTIALS_ID
          ]]])
        }
      }
      stage('自定义构建过程') {
        steps {
          echo '自定义构建过程开始'
          sh 'npm install -g cnpm --registry=https://registry.npm.taobao.org'
          sh 'cnpm install'
          sh 'npm run build'
          sh 'zip -r dist.zip dist/*'
          echo '构建完成.'
        }
      }
      stage(' 上传到 generic 仓库') {
        steps {
          codingArtifactsGeneric(files: 'dist.zip', repoName: "${GENERIC_REPO_NAME}")
        }
      }
    }
  }

设置构建任务的触发规则为推送新标签时触发

创建应用

打开团队持续部署页 https://${你的团队}.coding.net/cd-deck/app

新建应用 > 选择主机组部署

打开详情 > 新建部署流程

配置制品下载 > dist.zip下载到指定目录

新增一个后执行脚本 > 该脚本会重启nodejs服务

update.sh

BASE_FOLDER=$(dirname "$0")
cd $BASE_FOLDER
rm -rf ./dist
unzip dist.zip
forever stop server.js
forever start server.js

配置健康探针 > 用于检测服务是否运行正常

添加触发器 > 当制品库更新自动触发部署流程

最后整个流程

这样当推送了一个新tag后（当然也可以手动触发），就会触发构建任务，制品库dist.zip被更新后触发了部署流程。

部署流程会把dist.zip下载到主机组中机器列表上的指定存储位置， 执行update.sh重启web服务，健康检查部署流程执行成功。

缺点

目前用下来的问题有:

  • 构建速度还是有点慢
  • 构建任务有时候会失败

但整体来讲还是很好用的，比起之前的更新部署来讲，节省了很多心智负担，推送完只需等待即可，期间还能继续摸鱼hh

avatar
文章
阅读
粉丝