Vue SSR基于Coding的持续集成部署实践(CI/CD)
用过netlify、vercel都知道推送完就会自动触发构建和部署接着线上就更新了,这种体验能极大程度提高开发效率、减轻心智负担。
通过Coding也可以很方便的获得类似的体验,本文记录了相关的实践配置过程
准备
因为Vue做了SSR,且需要部署到内网的多个服务器上,Coding可以通过堡垒机来下发部署任务到内网的多个机器。
如果是SPA应用可以直接在构建完成后把build后的资源上传到OSS或其它什么静态服务。
打开团队配置页:https://${团队}.coding.net/cd-deck/admin/host-server/agents
安装堡垒机
复制命令安装,安装成功后即可看到加入到的堡垒机。
主机组
选定堡垒机,加上要部署到的主机内网IP
免密登录
堡垒机生成公钥1
ssh-keygen
复制公钥到需要控制的机器即可免密登录1
2ssh-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
Jenkinsfile1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31pipeline {
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.sh1
2
3
4
5
6BASE_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