从零学习Jenkins部署前端项目（MacOs）

Jenkins是现在最常用的部署工具之一，对于开发人员来说，肯定都不陌生。由于项目中，使用到Jenkins已经是前辈配置好的，对其流程，我知之甚少，为了更熟悉Jenkins的配置方式，我打算尝试从零开始学习，尝试Jenkins部署前端项目。

1. 安装Jenkins

1.1. 安装openjdk-8-jdk

Jenkins依赖于java的openjdk，所以安装之前先安装openjdk-8-jdk。输入jave-version查看本地是否安装openjdk（因为多数开发人员之前已经安装过openjdk）。如果有下面输入，则表明已安装

若没有安装，则输入下面命令进行安装，然后输入jave-version进行检测：

brew cask install homebrew/cask-versions/adoptopenjdk8

1.2. 安装Jenkins

 安装Jenkins

brew install jenkins

 命令启动/关闭/重启 Jenkins服务

brew services start Jenkins //启动Jenkins
brew services stop Jenkins //停止Jenkins
brew services restart Jenkins //重启Jenkins

 打开浏览器，输入localhost:8080 或 ip:8080 访问，若打开页面失败（提示404），可尝试重启电脑，或修改端口或者局域网访问。Jenkins默认的地址是127.0.0.1，如果局域网需要访问的话需要将httpListenAddress改成0.0.0.0，修改httpPort的值就是修改端口。打开配置文件：

sudo vim /usr/local/opt/jenkins/homebrew.mxcl.jenkins.plist

查看并修改配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key>Label</key>
        <string>homebrew.mxcl.jenkins</string>
        <key>ProgramArguments</key>
        <array>
                <string>/usr/local/opt/openjdk@11/bin/java</string>
                <string>-Dmail.smtp.starttls.enable=true</string>
                <string>-jar</string>
                <string>/usr/local/opt/jenkins/libexec/jenkins.war</string>
                <string>--httpListenAddress=127.0.0.1</string>
                <string>--httpPort=8080</string>
        </array>
        <key>RunAtLoad</key>
        <true/>
</dict>
</plist>

修改配置文件后，重启Jenkins。
若输入localhost:8080 或 ip:8080查看页面成功，则会看到如下页面：

 获取密码, 根据提示需要输入一个密码，这个密码所在的文本就是上图中提示的路径，我们将它拷贝出来并输入进去点击继续。

cat /var/lib/Jenkins/secrets/ initialAdminPassword

 点击安装推荐插件。如果很多插件安装失败，请点击重试:

 创建管理员账号：

 进入到Jenkins操作界面：

2. 配置Github

2.1. 生成github personal access token

进入到github中，点击头像 Setting  Developer Setting Personal access token  Generate new token，看到如下页面：

按照下面的截图填写名字（Note），勾选repo和admin:repo_hook选项，然后点击Generate token:

相应会生成一个token，这个token务必用软件记下来，因为后面无法再找到:

2.2. 新建webhook

上述完成后我们去到要部署的项目中，比如我的就是F-basic-quiz项目:

点击Setting  Webhooks Add webhook Generate new token, 看到如下页面：

填写Payload URL（Jenkins的公用IP，在后面的“配置Jenkins”会讲到如何生存），选择Just the push event 和Active，之后点击Add webhook，生成连接。生成连接后，点击Recent Deliveries查看连接是否正常，连接正常，则为绿勾。

3. 配置Jenkins

3.1. 生成Jenkins公用IP

由于Github和Github Enterprise都要求Jenkins地址为公用ip(https), 而我们自己搭建的Jenkins没有共用ip, 因此，直接连接是会失败的。为了为解决内网Jenkins的IP问题，我们使用smee， smee是基于nodejs的，所以必须事前安装nodejs.

 安装smee

npm install --global smee-client

 访问smee
访问 https://smee.io/，然后点击 Start a new channel，记住生成的Webhoook Proxy URL：

 映射Jenkins webhook至新公用ip url：

smee --url https://smee.io/GSm1B40sRfBvSjYS --path /ghprbhook/ --port 8080

这里把 https://smee.io/GSm1B40sRfBvSjYS换成自己得到的url, 端口8080也可以换成自己Jenkins的端口。注意:可以用 ghprbhook，也可以使用github-webhook。查看是否连接成功，即查看Recent Deliveries查看连接是否正常。

3.2. Jenkins添加新项目

 添加新项目：

 创建新项目：

 进行系统配置：
回到Jenkins主页面，点击Manage Jenkins  Config System,滑动至Github/Github服务器
点击“添加GitHub服务器按钮”，在生成的Github Server中添加如下内容：

凭据选择Jenkins后，填写内容，并保存：

下拉框中选择你刚才填写的描述项，并勾上管理hook按钮:

点击连接测试，出现下图红框内容，即为成功，点击底下的保存后退出:

 进行项目配置：
回到主页面，点击刚才刚才新建的项目，进入项目页面，点击左上角“配置”，进入配置页面。

 配置“General”

 配置“源码管理”

在Credentials处，点击Jenkins,可添加新的凭据：

点击添加后，可在下拉框中选择你需要的Credentials
 配置“构建触发器”

 配置“构建环境”

 配置“绑定”
点击“新增”Secret text

选择之前填写的凭据:

 配置“构建”
点击“增加构建步骤” 执行Shell

在执行shell时，报错npm: command not found，解决方案：
a. 查询系统环境变量： echo $PATH

b. 配置环境变量：
回到Jenkins主页面，点击Manage Jenkins  Config System,滑动至“全局属性”，点击“环境变量”，配置“键值对列表”

配置完成过，点击保存按钮，配置完成
4. 部署测试
部署中：

查看控制台输出：

5. 后记
以上为Jenkins部署前端项目过程，但此次配置适用于第一次上手配置，且没用到docker等工具，后面将再借助docker配置一个后端项目
参考博客：https://www.jianshu.com/p/add0de676b5a