本文首发于个人博客，您可以移步至我的博客以获得更好的体验:)
什么是Jenkins
- 官网
Jenkins是一款持续继承软件，它可以通过GitHub WebHook触发构建行为，从远程拉取代码，自动部署至nginx，只需要一个git push。
[图片上传失败...(image-8e3ceb-1592803018624)]
之前在部署项目时，我是通过本地build，然后使用winscp丢到远程服务器上，这样做十分不方便。有了Jenkins之后，只需要一次配置，只需要一次git push，远程服务器就可以自动拉取代码，并执行构建脚本。
让我们开始吧！
配置阶段一共有两个方面需要配置，一个是GitHub，一个是Jenkins，这里我的服务器环境是linux的centOS。其他环境基本上也差不多。
Jenkins配置
Jenkins可以通过Docker或者下载war包来进行，由于其是通过java开发的，所以服务器上需要配置JRE（java运行时环境）或者JDK（java开发环境），需要java8以上。
准备工作（Java环境搭建）
Java环境的搭建我使用了yum进行安装，yum是linux上的软件仓库，和AppStore一样可以快速安装软件，它会根据地理位置找到最快的镜像服务器下载安装包，速度十分快。
首先要做的是查看yum源中是否有相关套件yum -y list java*
[图片上传失败...(image-f6949a-1592803018624)]
选择 java-1.8.0-openjdk-devel.x86_64 安装：
yum -y install java-1.8.0-openjdk-devel.x86_64
3.修改/etc/profile并且执行source /etc/profile
vim /etc/profile
JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.181-3.b13.el7_5.x86_64
JRE_HOME=$JAVA_HOME/jre
PATH=$PATH:$JAVA_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export JAVA_HOME
export JRE_HOME
export PATH
export CLASSPATH
[图片上传失败...(image-afc707-1592803018625)]
保存之后执行
source /etc/profile
在控制台查看环境：
$ java -version
> openjdk version "1.8.0_252"
> OpenJDK Runtime Environment (build 1.8.0_252-b09)
> OpenJDK 64-Bit Server VM (build 25.252-b09, mixed mode)
这样Java的环境就搭建好了。
安装Jenkins
安装Jenkins有许多的方式，可以通过docker安装，也可以通过war包安装，这里我使用的是通过war包安装。
首先要做的是下载Jenkins
[图片上传失败...(image-aacd09-1592803018625)]
这里我选择了下载到本地然后通过winscp上传。
[图片上传失败...(image-52ece6-1592803018625)]
上传好之后，找到war包所在的目录，执行：
java -jar jenkins.war --httpPort=8080
上面的执行方式会在控制台打印输出，在shell关闭后退出Jenkins无法持久化。可以在首次配置时使用。
这可能需要一段时间，有可能会卡住一会。。。
ps.后台启动Jenkins:
nohup java -jar jenkins.war --httpPort=8080
等到输出下面的内容之后，复制一下这个密码，之后会用到。
[图片上传失败...(image-917a8e-1592803018625)]
通过浏览器打开Jenkins服务，在浏览器中输入以下地址：
http://<你的服务器IP地址>:8080/
会跳转到这个界面：
[图片上传失败...(image-484a8b-1592803018625)]
输入刚才复制的密码。并进行创建一个管理员用户。
在这里填入你的你进入Jenkins的URL，需要课启动时填写一样，像下面那样填写会造成反向代理错误，别问我是怎么知道的。
[图片上传失败...(image-a72e74-1592803018625)]
之后选择推荐安装，会安装一些基础服务例如git读取器等等。
[图片上传失败...(image-2b785-1592803018625)]
这个过程会等待好一段时间，我等了大概有半个小时左右，可以先去做下面的GitHub配置。
[图片上传失败...(image-7d4ab9-1592803018625)]
GitHub配置
生成secret key
点击右上角菜单中的setting->developer settings->Personal access tokens
勾选这些选项，然后生成一个
[图片上传失败...(image-a39021-1592803018625)]
进入Jenkins系统配置
[图片上传失败...(image-cbf9d8-1592803018625)]
之后勾选为GitHub生成一个
[图片上传失败...(image-1acd5e-1592803018625)]
在下面填入上面的personal access token:
[图片上传失败...(image-64512d-1592803018625)]
点击测试链接，成功后会提示一段消息。
*可选：配置node环境，添加nodejs插件，以让Jenkins可以执行node命令例如
npm install，pm2 start等.
进入系统管理->插件管理->可选插件，在input中输入node，
[图片上传失败...(image-f61ecf-1592803018625)]
选择直接安装。
进入全局工具配置->新增NodeJS
[图片上传失败...(image-985b6a-1592803018625)]
点击确定。
添加一个项目：
进入Jenkins添加一个自由风格项目：
在下面输入项目URL
[图片上传失败...(image-af953d-1592803018625)]
[图片上传失败...(image-d0d5d3-1592803018625)]
源码管理
输入仓库地址，并添加GitHub账号密码：
[图片上传失败...(image-9dae2d-1592803018625)]
[图片上传失败...(image-30855a-1592803018625)]
构建触发器
勾选GitHub hook（后面需要在GitHub仓库设置中配置）
[图片上传失败...(image-18305d-1592803018625)]
之后再次添加之前配置过的
[图片上传失败...(image-e2eb15-1592803018625)]
构建环境
构建脚本（我的项目中包含start.sh 其中写了 sudo npm i和 npm run build）
[图片上传失败...(image-4933c7-1592803018625)]
至此Jenkins的配置已经完成了，可以先手动构建一次看看是否成功：
[图片上传失败...(image-37f827-1592803018625)]
点击立即构建，会在下面出现一个构建进度，完成之后是一个蓝色小球，点进去可以查看构建控制台输出：
Started by user
...
> git config remote.origin.url https://github.com/kagurakana/me-kagurakana.git # timeout=10
Fetching upstream changes from https://github.com/kagurakana/me-kagurakana.git
...
Commit message: "fix: style"
First time build. Skipping changelog.
[kagura_kana] $ /bin/sh -xe /tmp/jenkins3162662805171132447.sh
+ echo 'hello world'
hello world
+ bash start.sh
> [email protected] postinstall /root/.jenkins/workspace/kagura_kana/node_modules/esbuild
> node install.js
+ [email protected]
added 1 package in 5.56s
...
added 8 packages from 4 contributors and audited 331 packages in 12.028s
> vite build
vite v1.0.0-beta.1
- Building for production...
[write] dist/_assets/index.0793941e.js 49.07kb, brotli: 17.54kb
[write] dist/_assets/style.061d74bc.css 2.98kb, brotli: 0.77kb
[write] dist/index.html 0.90kb, brotli: 0.27kb
Build completed in 4.50s.
Finished: SUCCESS
看到最后SUCCESS就说明Jenkins这边配置OK
之后我们要做的就是设置GitHub，在每次push之后通知Jenkins服务器自动构建
git仓库配置
push认证（防止CROS）
首先要做的是在Jenkins上生成一个
进入Jenkins->用户列表->用户->生成 token
复制这个TOKEN
[图片上传失败...(image-31024e-1592803018625)]
进入GitHub仓库设置，添加webHooks：
- payloadURL为：
http://:@:8080/github-webhook/
[图片上传失败...(image-588b94-1592803018625)]
注意：userID和用户名不是同一个东西，userID是唯一的，而用户名可能不是，配置错误可能会导致404错误：
[图片上传失败...(image-723b00-1592803018625)]
而API_TOKEN配置错误可能会导致403错误
[图片上传失败...(image-24a482-1592803018625)]
这些错误信息可以在GitHub仓库设置的webhook中查看。
结果
[图片上传失败...(image-8d498f-1592803018625)]