Jenkins+Nginx+Github/Gitlab自动化构建部署前端项目

在日常开发中，往往可能同时多个项目并行进行开发，功能完成开发，进行代码打包、发布的时候，可能会出现一些问题。如一个基于vue框架的前端项目，部署的环境有测试环境、线上环境，手动打包发布。由于操作失误可能导致发布到测试环境的代码发布到正式环境。所以，一套自动化打包、部署方案对于前端工程师来说，是很有必要的。不仅能够解决发布操作问题，还能更专注于业务需求的开发。一般这样的事儿是由公司运维去进行的，但对于一些中小型公司来说，想实现这样的一套方案还是得程序员自己动手。就当着自己能力的一种提升，也是不错的。

Jenkins介绍

Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。同时是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。主要特点如下：

• 持续集成和持续交付:作为一个可扩展的自动化服务器，Jenkins可以用作简单的CI服务器，或者变成任何项目的连续交付中心。
• 简易安装:Jenkins是一个独立的基于Java的程序，可以立即运行，包含Windows，Mac OS X和其他类Unix操作系统。
• 配置简单:Jenkins可以通过其网页界面轻松设置和配置，其中包括即时错误检查和内置帮助。
• 插件:通过更新中心中的1000多个插件，Jenkins集成了持续集成和持续交付工具链中几乎所有的工具。
• 扩展:Jenkins 可以通过其插件架构进行扩展，从而为 Jenkins 可以做的事提供几乎无限的可能性。
• 分布式:Jenkins可以轻松地在多台机器上分配工作，帮助更快速地跨多个平台推动构建，测试和部署。

啊，多么牛逼一款工具，是不是有种跃跃欲试的感觉，接下来开始真正的实现部署的环节。

Jenkins安装

我个人使用的服务器是unbuntu 14.04的，所以基于此，来进行jenkins的安装、java的安装等等。jenkins是基于java的程序，所以我们首先要做的就是进行java的安装。本案例中安装的是java-1.8。由jenkins版本所决定。

Java的安装

1. 加入源路径：

   sudo add-apt-repository ppa:openjdk-r/ppa
   

2. 更新源信息：

   sudo apt-get update
   

3. 安装java-1.8:

   sudo apt-get install openjdk-8-jdk
   

4.切换Java版本(若之前已安装其他版本):

    sudo update-alternatives --config java
    sudo update-alternatives --config javac
    

最后输入java或javac，如出现以下内容，则安装成功。

既然jenkins所需的环境已安装好，那么现在就开始进行jenkins的安装了.

Jenkins的安装

wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt-get update -y

sudo apt-get install jenkins -y

注意：最后两步速度非常慢，主要是下载。

安装完成后，有两个目录是我们需要注意的。安装目录：/var/lib/jenkins,日志目录：/var/log/jenkins/jenkins.log.

可以通过以下命令来启动、停止jenkins：

sudo /etc/init.d/jenkins start
sudo /etc/init.d/jenkins stop

接下来就可以在浏览器中输入：http://外网ip/8080如http://192.168.1.100:8080/就可以访问了。首次出现的网页内容如下：

jenkins默认端口号是8080。若想要修改默认端口号也是可以的，由于我自己的服务器上跑有其他项目，占用了8080端口，所以我将jenkins的端口改为8787。那简单说下怎样去修改jenkins的端口。

修改Jenkins默认端口

分三步骤走：

1. 将脚本/etc/init.d/jenkins中所有8080的地方改为8787
2. 修改/etc/default/jenkins文件，将端口8080改成8082

3. 然后重新启动jenkins, 检查一下：

      
      ps -def | grep java
      
       /usr/bin/java -Djava.awt.headless=true -jar /usr/share/jenkins/jenkins.war --webroot=/var/cache/jenkins/war --httpPort=8787
   

可查看到已成功修改了端口号，然后再次通过ip/端口号的方式在浏览器中进行访问。

Jenkins环境初始化

之前说过，浏览器输入你的服务器 ip 地址加8787 端口就可以访问了。

输入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密码，并复制到当前输入框中，然后点击继续

这里我们选择推荐通用插件安装即可，选择后等待完成插件安装以及初始化账户。

![正在安装推荐的插件[7]

这里安装的时间有时候会稍微有点久，耐心等待安装完成就好，最后创建一个账号。

，最后登录进去后就可以看到左侧边栏一些操作菜单了。

Jenkins常用插件安装

NodeJs插件安装

因为我们的项目是要用到node打包的，所以先在jenkins中安装nodeJs插件，安装后进入全局工具配置，配置一个我们要用到的node版本。

安装完成后，点击应用并保存。

Publish Over SSH 插件安装

该插件可以帮助我们实现服务器部署功能。选择系统管理->插件管理，在已安装插件中找Publish Over SSH，若未找到，则在可选插件列表中找到并进行安装

Generic Webhook Trigger Plugin插件安装

该插件可以帮助我们进行动态关联远程仓库，便于在进行某些git操作，如提交等自动构建项目，安装步骤如上。

Email Extension Plugin插件安装

该插件可以让我们对于邮箱进行配置，例如构建项目后，通知相关人员，构建是否成功等，安装步骤如上。

Jenkins构建github项目

从左侧菜单栏选择新建任务。填写任务名称，选择构建一个自由风格的软件，并点击确定。

在General面板出勾选GitHub 项目，并填写Github URL。

在源码管理面板，进行如下配置：

在构建环境面板选择"Provide Node & npm bin/ folder to PATH"，并选择已安装了的nodjs版本。

最后在"构建"面板中，选择shell执行。

并编写shell脚本。

    #!/bin/bash
    node -v &&
    npm install -g cnpm --registry https://registry.npm.taobao.org && 
    cnpm install &&
    npm run build

最后点击应用、保存。
点击立即构建：

因为这个项目是一个react项目，所以打包完后的目录的build，至此，成功构建github项目。那么接下来就要去做构建代码并发布到远程服务器的操作了。

Jenkins自动化构建并发布到远程服务器

首先需要对Publish over SSH进行全局配置，目的是使得我们通过ssh能够访问远程服务器。

Publish over SSH进行全局配置。

系统管理->系统设置，找到Publish over SSH。

这里需要注意服务器端安装了ssh服务，如果忘记了公钥与私有生成过程中是否输入了密码，则可以重新通过如下命令去生成：

 ssh-keygen -t rsa

Passphrase：密码（key的密码，没设置就是空）

Path to key：key文件（私钥）的路径

Key：将私钥复制到这个框中(可通过cat id_rsa查看，复制。path to key和key写一个即可，如果在ssh server配置的时候勾选了Use password authentication, or use a different key，则两个都可以不填)

SSH Servers的配置：

SSH Server Name：标识的名字（随便你取什么）
Hostname：需要连接ssh的主机名或ip地址（建议ip）
Username：用户名
Remote Directory：远程目录（我这里选择了根目录）

高级配置：

Use password authentication, or use a different key：勾选这个可以使用密码登录，不想配ssh的可以用这个先试试

Passphrase / Password：密码登录模式的密码
Port：端口（默认22）
Timeout (ms)：超时时间（毫秒）默认300000

由于我在尝试的过程中，最初出现了jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail],这样的错误，通过查找资料，https://blog.csdn.net/u010947...解决此问题。最终的配置如下：

最后点击测试配置，成功。

并点击应用，保存

其次需要对邮箱进行配置，接着往下看。

全局配置邮箱

在我们对项目进行构建成功或失败后，需要及时知道这一结果，所以进行邮箱的配置是必不可少的。

系统管理→系统设置，进行邮件配置：

• 设置jenkins地址和管理员邮箱地址

• 设置发件人等信息

  PS：这里的发件人邮箱地址切记要和系统管理员邮件地址保持一致（当然，也可以设置专门的发件人邮箱，不过不影响使用，根据具体情况设置即可）

• 配置邮件内容模版

模板内容如下:

    <!DOCTYPE html>    
    <html>    
    <head>    
    <meta charset="UTF-8">    
    <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>    
    </head>    
        
    <body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4"    
        offset="0">    
        <table width="95%" cellpadding="0" cellspacing="0"  style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">    
            <tr>    
                本邮件由系统自动发出，无需回复！<br/>            
                各位同事，大家好，以下为${PROJECT_NAME }项目构建信息</br> 
                <td><font color="#CC0000">构建结果 - ${BUILD_STATUS}</font></td>   
            </tr>    
            <tr>    
                <td><br />    
                <b><font color="#0B610B">构建信息</font></b>    
                <hr size="2" width="100%" align="center" /></td>    
            </tr>    
            <tr>    
                <td>    
                    <ul>    
                        <li>项目名称 ： ${PROJECT_NAME}</li>    
                        <li>构建编号 ： 第${BUILD_NUMBER}次构建</li>    
                        <li>触发原因： ${CAUSE}</li>    
                        <li>构建状态： ${BUILD_STATUS}</li>    
                        <li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a></li>    
                        <li>构建  Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li>    
                        <li>工作目录 ： <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>    
                        <li>项目  Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li>    
                    </ul>    
    
    <h4><font color="#0B610B">失败用例</font></h4>
    <hr size="2" width="100%" />
    $FAILED_TESTS<br/>
    
    <h4><font color="#0B610B">最近提交(#$SVN_REVISION)</font></h4>
    <hr size="2" width="100%" />
    <ul>
    ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"}
    </ul>
    详细提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br/>
    
                </td>    
            </tr>    
        </table>    
    </body>    
    </html>    

• 设置邮件触发机制

• 配置Jenkins自带的邮件功能

配置内容如下，和Email Extension Plugin插件同样的配置，可以通过勾选通过发送测试邮件测试配置按钮来测试配置是否成功发送邮件，如下图：

完成上面的系统设置后，点击保存即可。

这里对于项目构建、发布到远程服务器的全局配置已经完成，接下来以一个vuejs的简单项目为列来进行后续的操作。

选择一个任务，我这里是testVue，然后选择配置

上面三步在之前都已经说了，这里不再赘述。接下来针对构建的shell脚本进行配置：

    #!/bin/bash
    echo $PATH
    node -v 
    npm install -g cnpm --registry https://registry.npm.taobao.org 
    cnpm install 
    npm run build 
    cd /var/lib/jenkins/workspace/testVue/dist
    rm -rf dist.tar.gz
    tar -zcvf dist.tar.gz *
    mv dist.tar.gz /home/jenkinsVue/test
    

然后对构建后的操作，主要是项目构建成功或失败后邮箱的配置以及通过ssh服务将打包后的文件自动上传到服务器指定的文件目录中。

项目构建成功或失败后邮箱的配置:

通过ssh服务将打包后的文件自动上传到服务器指定的文件目录中配置:

Exec command:

#!/bin/bash 
cd /home/jenkinsVue/test
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz

接下来实现开发本地push代码到github上后，触发Webhook，jenkins自动执行构建

• jenkins安装Generic Webhook Trigger 插件
• github添加触发器

然后在github配置Webhook 选择github项目中的Settings->Webhooks>add webhook 配置方式按上图红框中的格式，选择在push代码时触发webhook，成功后会在下方出现一个绿色的小勾勾。

其中Payload URL部分我遮住的部分就是服务器的ip地址或域名+jenkins的端口号。

配置完以后，点击应用、最后点击保存。

构建前的项目打包后显示的情况：

现在把项目页面中“黄澈”去掉。

进行代码的commit、push操作后，项目就进行了自动构建：

再来看一下页面的变化：

以及邮件的通知:

邮件也成功发送通知。

最后再来看下nginx的简单配置：

自动化打包后的dist文件夹的内容在/home/jenkinsVue/test文件夹下：

以上就是所有对于基于jenkins+nginx+github/gitlab进行项目自动化构建部署的操作了。