乐趣区

JenkinsNginxGithubGitlab自动化构建部署前端项目

jiezi

在日常开发中，往往可能同时多个项目并行进行开发，功能完成开发，进行代码打包、发布的时候，可能会出现一些问题。如一个基于 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 插件安装

该插件可以帮助我们实现服务器部署功能。选择 系统管理 -> 插件管理，在发中，往往可能同时多个项目并行进行开发，功能完成开发，进行代码打包、发布的时候，可能会出现一些问题。如一个基于 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 的简单项目为列来进行后续的操作。

退出移动版