从零搭建前端持续集成环境: github+jenkins+nodejs+nginx

CI：Continuous Integration，也就是持续集成 CD：Continuous Delivery 和 Continuous Deployment，也就是持续交付、持续部署

一般工作流程： 开发人员提交代码到Git/svn版本仓库； Jenkins人工/定时触发项目构建； Jenkins拉取代码、编译、打包or打包镜像； Jenkins部署构建物到目标VM/Docke

前端CICD: 这里指的是基于webpack打包工具和npm包管理工具的前端项目，如基于vue-cli的前端项目，最终将打包后的静态资源部署到Nginx。

本文将展示整个持续集成过程的搭建，这对于devops运维工程师来说是很轻松的事情，这里更想给新手开发人员，特别是前端开发人员对于CICD的基础参考，整个过程实践包含以下三点：

1. 准备代码库： github上创建一个前端项目仓库
2. 搭环境：在服务器上安装/配置 Nginx、git、nodejs、jenkins
3. 配置流水线：在搭建好的jenkins上配置一个流水线并执行

1、代码仓库

gitlab/svn/github都是可以的，jenkins上选择**对应的Plugin**进行配置即可，如果选择github，可以自己创建或者fork一个项目来快速测试

2、搭CICD环境

我这里是在腾讯云centos7进行

关于更换yum源

2.1 Nginx

安装nginx

yum install nginx

service nginx start

配置Nginx

vim /etc/nginx/nginx.conf

将root修改为前端代码部署的路径

location / {
     root /usr/local/CICDdemo/dist;
     index index.html;
}

检查配置文件是否有错误

Nginx -t

重启Nginx

nginx -s reload 

2.2 git

安装git , 是为了jenkins拉取代码时使用

yum install git 

2.3 nodejs

yum install nodejs
建立软连接,配置全局环境变量
    ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
    ln -s /usr/local/nodejs/bin/node /usr/local/bin/
检查是否配置好
    node -v
    npm -v

2.4 jenkins

2.4.1.安装jenkins

$ yum install yum-fastestmirror -y  #安装自动选择最快源的插件

#添加Jenkins源:

$ sudo wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/jenkins.repo

$ sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

$ yum install jenkins               #安装jenkins

启动方式：

$ sudo service jenkins start

2.4.2 jenkins首次进入的基础配置

在浏览器中输入：http://your server ip:8080/，效果如下：

• unlock jenkins

在这里插入图片描述

• 安装Plugin

在这里插入图片描述

• 设置初始账户和密码

在这里插入图片描述

2.4.3. 其余配置

• github上配置：生成token 和 设置webhooks

进入github --> setting --> Personal Access Token --> Generate new token

在这里插入图片描述

进入GitHub上指定的项目 --> setting --> WebHooks&Services --> add webhook --> 输入刚刚部署jenkins的服务器的IP

在这里插入图片描述

• jenkins上配置GitHub Plugin : Add GitHub

系统管理 --> 系统设置 --> GitHub --> Add GitHub Seve

在这里插入图片描述

在这里插入图片描述

• Sever 全局工具配置：Git - Path to Git executable

点击“全局工具配置”，如果不清楚自己的Git安装在哪个路径下，终端执行whereis git

在这里插入图片描述

3、jenkins流水线配置

3.1 流水线配置

• General 设置
  

  在这里插入图片描述
• 配置源码管理

在这里插入图片描述

填写项目的git地址, eg. https://github.com/your\_name/your\_repo\_name.git

添加github用户和密码

• 构建触发器，构建环境

在这里插入图片描述

• 构建

在这里插入图片描述

这里的构建脚本根据实际情况填写，我的是同一台云主机上的jenkins工作空间的构建物（dist）部署到Nginx配置文件指向的资源地址。

在这里插入图片描述

3.2 流水线执行

• 以上设置完成之后，可以github push去触发构建，也可以在jenkins中手动点击构建

在这里插入图片描述

• 可以在工作空间中看到前端项目的代码

在这里插入图片描述

• 构建部署到nginx后，打开网址看到结果成功

在这里插入图片描述

jenkins的 Master/Slave模式

Master：Jenkins服务器

Slave：执行机(奴隶机)。执行Master分配的任务，并返回任务的进度和结果

在这里插入图片描述

路径：jenkins首页—系统管理—节点管理—节点管理

在这里插入图片描述

其他持续集成工具

流行的除了jenkins CI、还有 Travis CI、Circle CI

**Travis CI** 是基于 GitHub 的 CI 托管解决方案之一，由于和github的紧密集成，在开源项目中被广泛使用，打开Travis-CI网站https://travis-ci.org，使用github的账号授权登录即可。在github项目的根目录下新增.travlis.yml，该文件描述了构建时所要执行的所有步骤；

**CircleCI**是一款很有特色，也是比较流行的云端持续集成管理工具，目前仅支持github和bitbucket，它和其他工具的区别在于骂他提供服务的方式不同，circleCI需要付费的资源主要是它的容器

著作权归作者所有。商业转载请联系本账号获得授权，非商业转载请注明原文地址。