CICD实战之Jenkins Gitlab 实现前端构建

目的

Jenkins + Gitlab 实现前端构建

正式开始

Jenkins 安装 NodeJS

因为在 Jenkins 构建的时候我们需要去执行一些 shell，需要用到 NodeJS，因此我们先安装 NodeJS。

在这里我们采用插件方式安装。

在 Jenkins 插件管理中心搜索 NodeJS

我这里已经安装了

没有安装的话应给在可选插件的 Tab,勾选之后选择直接安装即可。

全局配置

在系统设置–系统工具设置可以为全局配置 NodeJS。

选择好对应的版本之后保存即可。

使用

我们只需要在任务的“配置”中，找到“构建环境”，选中 “Provide Node & npm bin/ folder to PATH” ，选择刚才配置好的 NodeJS 即可。

第一次执行会下载对应的 Node 版本，后续不会下载。

开始集成

因为集成构建的时候我们需要 Jenkins 去 Gitlab 拉去代码，因此我们需要用 ssh 的方式去鉴权。

生成公钥私钥

Jenkins 拉取，因此要在 Jenkins 上生成，并且将公钥传输到 Gitlab，这样就可以实现鉴权的作用。

1 2	`docker exec -it jenkins /bin/bash ssh-keygen -t rsa`

Gitlab 配公钥

将公钥存入即可

Jenkins 配私钥

在系统管理，管理凭证。

在全局添加凭证

类型为 “SSH Username with private key.”，ID 为此凭据在 Jenkins 的标识符，UserName 为你的 Gitlab 用户名，PrivateKey 为你的服务器私钥。

配置完之后最好还是重启一下 jenkins 和 gitlab

至此，Jenkins 配置完毕。

小试牛刀，构建一下

新建任务

选择：构建一个自由风格的软件项目，我这里用的 ssh-way

配置任务

我这里是临时用的一个 Vue-Cli 搭建的项目演示。

进入任务配置，在任源码管理这里选择 Git

注意

仓库地址为 gitlat 的 ssh 方式

直接复制的地址有两个端口号，要改为 ssh 的 333 端口。端口为 333 是在之前配置的这个端口号。

选择对应的 NodeJS 版本

构建选择–执行 Shell

填写基本的 shell

node -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build

保存再立即构建一波。

看到 Finished: SUCCESS，完美。

同步到 Nginx 环境

当我们构建成功之后，我们只需要把 Jenkins 的 dist 目录下面的资源全部拷贝到服务器 Nginx 上面就可以实现更新了。而且没有不会变更配置文件，也不用重启 Nginx。

创建文件夹

为了避免我们后续找不到文件夹，我们就先创建秘钥顺便创建文件夹。

1 2	`// nginx机器 ssh-keygen -t rsa`

配置鉴权文件

因为我们已经在 Jenkins 生成过私钥公钥了，我们只需要将这边的文件复制到 Nginx 的/root/.ssh/authorized_keys就好了。

1	`scp -p /root/.ssh/id_rsa.pub root@192.168.182.4:/root/.ssh/authorized_keys`

第一次需要输入密码，后续都不需要了。

发布到 Nginx

原理很简单，将 build 生成的 dist 的全部文件全部都拷贝到 nginx 的 html 的目录下。（Nginx 资源路径具体要看配置）

在之前的 shell 命令中加入以下命令。

1	`scp -o "StrictHostKeyChecking no" -r dist/* root@192.168.182.4:/home/nginx/html`

修改测试

修改了，提交了，我们构建一下。

构建成功

完美

结语

至此，我们已经完整搭建了 Jenkins + Gitlab 实现前端构建，搭了这么久的环境终于开始实战了。撒花！