使用 Jenkins 自动发布前端站点

似乎作为一名前端,一个个人站点是必备的,前段时间开始折腾起来了。这篇文章记录如何使用 Jenkins 自动发布站点

Jenkins是一个自动发布工具,用它做的事情非常简单:

  1. 等待通知
  2. 收到通知后,开始build
  3. 把 build 完成的文件拷贝到站点目录下
  4. 如果有必要的话,重启站点

安装 Jenkins

环境:CentOS

参考:https://jenkins.io/doc/pipeline/tour/getting-started/

步骤拷贝出来:

(http://mirrors.jenkins.io/war-stable/latest/jenkins.war)[Download Jenkins].

Open up a terminal in the download directory.

Run java -jar jenkins.war --httpPort=8080.

Browse to http://localhost:8080.

Follow the instructions to complete the installation.

需要注意的是

  1. 这里运行的进程是跟随 ssh 进程的,也就是当前 ssh 会话关闭后,Jenkins 进程也会被销毁,所以如果要让 Jenkins 持续运行的话,使用 nohup,命令如nohup java -jar jenkins.war --httpPort=8080 &
  2. 如果把 Jenkins 部署在站点子目录下,会看到 Jenkins 控制台 UI 的 js、css 等资源文件加载不出来,因为 Jenkins 默认资源路径是相对于网站根目录的,要解决这个文件,在启动的时候加上参数--prefix,最终运行的命令如下:nohup java -jar jenkins.war --httpPort=10004 --prefix=/jenkins & 如果需要发送 email 的话,Jenkins 的设置也需要改变:Manage Jenkins -> Configure System -> Jenkins Location -> Jenkins URL设置为带 path 的路径,比如http://www.xxx.com/jenkins/

安装 Github 插件

本文使用 github 插件触发,也可以使用Jenkins 默认带的Trigger builds remotely,或者Generic Webhook Trigger插件。使用 github 插件的原因是比较方便,auth 、repo 区分等都由插件自动完成了

Manage Jenkins -> Plugin Manager选择 Available tab,搜索github plugin,然后点击 install

然后转到Manage Jenkins -> Configure System -> GitHub -> GitHub Servers,点击 Add Github Server,Name 和 API URL 保持默认,Credentials 栏点击 Add,在弹出框的 Kind 选择 Secret Text。(Secret Text 如何获得?),输入 github 的 Secret Text,点击 Add,在Credentials 选择刚刚创建的 Secret Text。Text connection。

设置项目

安装完成后,进入 Jenkins Dashboard,点击左上角 New Item,输入名称,选择Pipeline,点击 OK。

进入到 Config 页面,General Tab,勾选 Gibhub Project,输入要自动发布的 repo 的地址,比如https://github.com/jeange1003/homepage.git/

勾选Build Triggers 下的 GitHub hook trigger for GITScm polling

在Pipeline 下选择Pipeline script,输入脚本,比如:

node {
    stage('Stage 1') {
        git 'https://github.com/jeange1003/homepage.git'
        sh 'sh build.sh'
        sh 'cp -r ./* /home/sites/homepage'
    }
}

tip:

  • 选择Pipeline script后,可以直接在页面中编辑脚本,选择Pipeline script from SCM 后,可以从 git repo 中执行脚本,脚本名称默认Jenkinsfile,[介绍],(https://jenkins.io/doc/book/pipeline/jenkinsfile/)
  • Pipeline script 能够执行 shell 脚本,还有一些内建的步骤,[Pipeline 语法] (https://jenkins.io/doc/book/pipeline/syntax/),支持 Groovy

设置好后,点击 Save

设置 Github 项目

Jenkins 设置好后,得有人触发他,一般是在 push 后触发,打开 github 仓库的 Settings 页面,打开 Webhooks标签,Add webhook, 在 payload URL 中,填入 Jenkins webhook 的地址,例如 https://ci.example.com/jenkins/github-webhook/,在Secret中填入刚刚生成的 Secret Text

试一下

先回到刚刚创建的 Jenkins 的job,点击左侧 Build Now,手动触发 build,如果一些正常的话,可以看到右侧 stage 是绿色的。如果红色有问题,可以点开看 logs,看看具体是哪里出错了,修改相应设置或者脚本。

手动 build 通过后,尝试 push 一下到 github,一切顺利的话,Jenkins 上会触发 build,如果 Jenkins 没有动静,别慌张,打开刚刚的设置 webhook 的页面,划到下方查看 Recent Deliveries 可以看到刚刚的 Deliveries 的结果。进行进一步排查。

Todo

Docker