本文首发于个人博客，您可以移步至我的博客以获得更好的体验:)

什么是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

勾选这些选项，然后生成一个<personal access token>复制这个token，在页面关闭后无法再次查看。

[图片上传失败...(image-a39021-1592803018625)]

进入Jenkins系统配置

[图片上传失败...(image-cbf9d8-1592803018625)]

之后勾选为GitHub生成一个<hook url>，并添加一个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)]

之后再次添加之前配置过的<github access token>
[图片上传失败...(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

> esbuild@0.5.6 postinstall /root/.jenkins/workspace/kagura_kana/node_modules/esbuild
> node install.js

+ esbuild-linux-64@0.5.6
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上生成一个<API_TOKEN>

进入Jenkins->用户列表->用户->生成 token

复制这个TOKEN

[图片上传失败...(image-31024e-1592803018625)]

进入GitHub仓库设置，添加webHooks：

• payloadURL为：

http://<USERID>:<API_TOKEN>@<IP_Address>:8080/github-webhook/

[图片上传失败...(image-588b94-1592803018625)]

注意：userID和用户名不是同一个东西，userID是唯一的，而用户名可能不是，配置错误可能会导致404错误：
[图片上传失败...(image-723b00-1592803018625)]

而API_TOKEN配置错误可能会导致403错误

[图片上传失败...(image-24a482-1592803018625)]
这些错误信息可以在GitHub仓库设置的webhook中查看。

结果

<black> 这是学校的一个实习作业，要写一个个人页面 </black>
[图片上传失败...(image-8d498f-1592803018625)]