持续集成自动化部署软件

[yanyue404]

前言

部署重复而浪费时间，我们可以把他自动化，能省去很多成本，借助 Jenkins 实现 自动化部署。

自动化流程

1. 提交开发代码，使用 git push 将项目推送到远程仓库。
2. 自动（或手动）打包构建
3. 跑单元测试
4. 自动代码部署
5. 邮件提醒 （可选）

创建一个 Jenkins 工程

1. 创建 jenkins 工程

点击 new 任务，即可开始创建任务：

填写自己的工程的名称，选择自己需要创建项目的类型，我们就选择自由风格即可。

2. 源代码管理

在 jenkins 的工程里，我们可以配置具体项目的 git 地址，选择分支，后续提交项目之后，jenkins 工程就会从这个 git 目录去拉代码，记得需要填写一个有权限的账户。

构建触发环境

开发环境可以提交代码自动构建，生产环境可以手动点击构建。

• 定期构建
• Build when a change is pushed to GitLab. GitLab webhook URL: (git 地址)

3. 构建环境

• Provide Node & npm bin/ folder to PATH

4. 构建

构建执行 shell

echo $PATH # 在控制台显示PATH环境变量的值
node -v # 显示 node 版本
npm -v # 显示 npm 版本
npm install # 下载 npm 包
npm run build:test # 构建
tar -zcvf dist.tar.gz ./dist # 打包 dist 文件夹为 dist.tar.gz

5. 构建后动作

增加构建后操作步骤，选择send build artificial over SSH：

Name:选择一个你配好的ssh服务器
Source files ：写你要传输的文件路径
Remove prefix ：要去掉的前缀，不写远程服务器的目录结构将和Source files写的一致
Remote directory ：写你要部署在远程服务器的那个目录地址下，不写就是SSH Servers配置里默认远程目录
Exec command ：传输完了要执行的命令，这里执行压缩和解压缩完成后删除压缩包2个命令

执行命令：

cd /home/huilian/web
rm -rf  dist
tar -zxvf dist.tar.gz # 解压
rm -rf dist.tar.gz # 删除压缩包

npm install
npm run test
npm run build

终端运行日志输出：

Started by user admin
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/huilian-wx-test
using credential 2
 > /usr/bin/git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > /usr/bin/git config remote.origin.url http://gitlab.xxx.com/huilian/huilian-wx.git # timeout=10
Fetching upstream changes from http://gitlab.xxx.com/huilian/huilian-wx.git
 > /usr/bin/git --version # timeout=10
using GIT_ASKPASS to set credentials
 > /usr/bin/git fetch --tags --progress http://gitlab.xxx.com/huilian/huilian-wx.git +refs/heads/*:refs/remotes/origin/* # timeout=10
 > /usr/bin/git rev-parse refs/remotes/origin/release^{commit} # timeout=10
 > /usr/bin/git rev-parse refs/remotes/origin/origin/release^{commit} # timeout=10
Checking out Revision de62eb3555001c3ee34f5933ee3950bb0c96a9f1 (refs/remotes/origin/release)
 > /usr/bin/git config core.sparsecheckout # timeout=10
 > /usr/bin/git checkout -f de62eb3555001c3ee34f5933ee3950bb0c96a9f1 # timeout=10
Commit message: "chore: 注释添加"
 > /usr/bin/git rev-list --no-walk 31b26f62c6d028a0e5e8a606b2cd6504f49e1f81 # timeout=10
[huilian-wx-test] $ /bin/sh -xe /tmp/jenkins4096033232554490891.sh
+ echo /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/NodeJS/bin:/sbin:/usr/sbin:/bin:/usr/bin
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/NodeJS/bin:/sbin:/usr/sbin:/bin:/usr/bin
+ node -v
v10.15.0
+ npm -v
6.4.1
+ npm install
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.

audited 1595 packages in 7.843s
found 355 vulnerabilities (342 low, 13 high)
  run `npm audit fix` to fix them, or `npm audit` for details
+ npm run build:test

> huilian-wx@0.1.0 build:test /var/lib/jenkins/workspace/huilian-wx-test
> vue-cli-service build --mode development


-  Building for development...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
 DONE  Compiled successfully in 9816ms10:51:48 AM

  File                                   Size              Gzipped

  dist/assets/js/chunk-vendors.js        4407.74 KiB       811.85 KiB
  dist/assets/js/app.js                  3879.89 KiB       465.85 KiB
  dist/ffe29f0274fbbb3b2827.worker.js    1771.32 KiB       345.81 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

+ tar -zcvf dist.tar.gz ./dist
./dist/
./dist/assets/
./dist/assets/fonts/
./dist/assets/fonts/VideoJS.46ac6629.eot
./dist/assets/js/
./dist/assets/js/chunk-vendors.js
./dist/assets/js/app.js
./dist/assets/js/app.js.map
./dist/assets/js/chunk-vendors.js.map
./dist/assets/img/
./dist/assets/img/shareBoot.2138a121.png
./dist/assets/img/top01.e30844af.png
...
./dist/index.html
./dist/ffe29f0274fbbb3b2827.worker.js.map
./dist/favicon.ico
./dist/ffe29f0274fbbb3b2827.worker.js
SSH: Connecting from host [izbp1dzh16guavliao2yrkz]
SSH: Connecting with configuration [wx-test] ...
SSH: EXEC: STDOUT/STDERR from command [cd /home/huilian/web
rm -rf  dist
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz] ...
./dist/
./dist/assets/
./dist/assets/fonts/
./dist/assets/fonts/VideoJS.46ac6629.eot
./dist/assets/js/
./dist/assets/js/chunk-vendors.js
./dist/assets/js/app.js
./dist/assets/js/app.js.map
./dist/assets/js/chunk-vendors.js.map
./dist/assets/img/
./dist/assets/img/shareBoot.2138a121.png
./dist/assets/img/top01.e30844af.png
...
./dist/index.html
./dist/ffe29f0274fbbb3b2827.worker.js.map
./dist/favicon.ico
./dist/ffe29f0274fbbb3b2827.worker.js
SSH: EXEC: completed after 200 ms
SSH: Disconnecting configuration [wx-test] ...
SSH: Transferred 1 file(s)
Finished: SUCCESS

参考

• 持续集成是什么？
• 实战笔记：Jenkins 打造强大的前端自动化工作流
• Jenkins+github 前端自动化部署
• 前端项目自动化部署——超详细教程（Jenkins、Github Actions）