说明

上一篇文章介绍了Jenkins的安装步骤。这篇讲Jenkins的实战-部署前端Vue项目，其实就是Jenkins插件的安装和使用，这篇上是一篇文章延续，所以安装步骤一定要按上一篇文章执行，不然会有zip找不到命令的问题。
为了方便展示各个插件的功能和详细配置我将插件一个一个来安装，在生产环境中大可不必这样操作，将插件全部安装后再去统一配置插件参数就好了。还有文中所说ServerA指运行Jenkins的服务器，ServerB指前端要部署目标机器。它们的操作系统都为ubuntu 20，用户为ubuntu。

1.设置SSH通过密钥登录

在ServerA和ServerB任意一台上生成一个密钥用于Jenkins访问远程服务器ServerB。

ssh-keygen -f ./jenkins

生成密钥时要求填写密码，如果不想设置密码可以直接回车。最后会在当前目录下生成jenkins(私钥)和jenkins.pub文件(公钥)两个文本文件,记录好私钥和公钥内容。

进入服务器ServerB，将公钥(jenkins.pub)添加到authorized_keys文件中:

vim /home/ubuntu/.ssh/authorized_keys

2.配置github凭证

首先将1步骤一中公钥(jenkins.pub内容)添加github中，详细设置请参考官方文档。

然后进入首页点击”系统管理”–》”Credentials”–》”全局凭据”–》”Add Credentials”添加凭证, 先将类型选择为 “SSH Username with private key”,需要填写的信息如下表:

名称	描述	应填内容
范围	范围	全局 (Jenkins, nodes, items, all child items, etc)
ID	ID	空
描述	描述	空
Username	GitHub账号	github_user
Private Key	私钥	步骤1私钥
Passphrase	密钥密码	步骤1私钥密码

按上面表格填写后点击”Create”创建凭证，如下图:

3.安装插件并配置

3.1安装Git插件

安装插件

进入首页点击”系统管理”–》”插件管理”–》”Available plugins”进入插件选择页面了。
在插件选择页面搜索”Git”–》然后勾选插件–》点击”Install without restart”，如下图:

安装插件后需要手动重启以下docker容器

docker restart jks

配置插件

进入首页点击”系统管理”–》”全局安全配置”，然后滑动鼠标找到”Git Host Key Verification Configuration”，”Host Key Verification Strategy”选择”Accept first connection”最后点击保存按钮。如下图:

3.2安装Generic Webhook Trigger插件

安装插件

进入首页点击”系统管理”–》”插件管理”–》”Available plugins”进入插件选择页面了。
在插件选择页面搜索”Generic Webhook Trigger”–》然后勾选插件–》点击”Install without restart”，如下图:

安装插件后需要手动重启以下docker容器

docker restart jks

3.3安装NodeJS插件

安装插件

进入首页点击”系统管理”–》”插件管理”–》”Available plugins”进入插件选择页面了。
在插件选择页面搜索”NodeJS”–》然后勾选插件–》点击”Install without restart”，如下图:

安装插件后需要手动重启以下docker容器

docker restart jks

插件配置

进入首页点击”系统管理”–》”全局工具配置”，然后滑动鼠标找到”NodeJS 安装”–》新增NodeJS，需要填写的信息如下表:

名称	描述	应填内容
别名	别名	Node18
版本	版本	NodeJs 18.16.1
按上表格填写内容后点击”保存”,如下图:

3.4安装Publish Over SSH插件

安装插件

进入首页点击”系统管理”–》”插件管理”–》”Available plugins”进入插件选择页面了。
在插件选择页面搜索”Publish Over SSH”–》然后勾选插件–》点击”Install without restart”，如下图:

安装插件后需要手动重启以下docker容器

docker restart jks

配置插件

进入首页点击”系统管理”–》”系统配置”，然后滑动鼠标找到”Publish over SSH”，需要填写的信息如下表:

名称	描述	应填内容
Passphrase	密码	步骤1私钥密码
Path to key	私钥路径	空
Key	私钥	步骤1私钥

按上表配置如下图:

然后在”SSH Servers”点击”新增”添加远程服务器ServerB,需要填写的信息如下表:

名称	描述	应填内容
Name	名称	ServerB
Hostname	服务器地址	13.210.214.85
Username	登录到ServerB用户	ubuntu
Remote Directory	登录后默认路径	/home/ubuntu

按上表配置后保存，如下图:

4.服务创建部署脚本

在服务器ServerB上创建一个脚本用于Jenkins远程调用部署。我前端部署在/var/www/app下，操作如下:

vim /home/ubuntu/re_app.sh

然后插入以下内容:

sudo rm -rf /var/www/app
sudo unzip /home/ubuntu/build/app_ui/dist.zip -d /var/www/app

将re_app.sh设置成可执行文件

chmod 775 /home/ubuntu/re_app.sh

5.创建任务

5.1 创建任务

首页点击”新建任务”选择”构建一个自由风格的软件项目”,任务名称随便填写。如下图:

5.2 配置

进入刚刚创建的任务然后点击”配置”

配置源码管理

“源码管理”选择”Git”,填写信息如下表:

名称	描述	应填内容
Repository URL	Github项目地址	Github项目地址
Credentials	Github凭证	步骤2创建的凭证
指定分支	分支	*/main
配置如下图:

配置构建触发器

“构建触发器”选择”Generic Webhook Trigger”,填写信息如下表:

名称	描述	应填内容
Token	Webhooks请求地址Token	abctest
配置如下图:

还有比较重要的一步，通过上面填写token可以得到Webhooks请求地址为http://JENKINS_URL/generic-webhook-trigger/invoke?token=abctest,其中JENKINS_URL换成外网可以访问的地址。将这个地址添加github Webhooks中，具体配置请查看官方文档

配置构建环境

“构建环境”选择”Provide Node & npm bin/ folder to PATH”,填写信息如下表:

名称	描述	应填内容
NodeJS Installation	NodeJS版本	Node18(步骤3.3配置的名称)

配置如下图:

配置Build Steps

这里填写Vue工程打包命令

npm install
npm run build:test
cd hd-test-dist
zip -r ../dist.zip *

配置如下图:

配置构建后操作

在选择框选择”Send build artifacts over SSH”,
填写信息如下表:

名称	描述	应填内容
SSH Server Name	执行构架后的服务器	ServerB
Transfer Set Source files	那些文件发送到远程服务器	dist.zip
Remote directory	发送到远程服务器文件目录	build/app_ui
Exec command	远程ssh执行脚本路径	/home/ubuntu/re_app.sh(步骤创建的文件)
配置如下图: