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

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

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

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

在这里插入图片描述
需要做的事情:

  1. 传代码: github上创建一个vue前端项目仓库
  2. 搭环境:在服务器上安装/配置 Nginx、git、nodejs、jenkins
  3. 执行:在搭建好的jenkins上创建一个任务执行CICD

1、代码仓库

gitlab/svn/github都是可以的,jenkins上选择对应的Plugin进行配置即可,如果选择github,可以自己创建或者fork一个项目来快速测试,注意尽量不要选使用了node-sass的前端项目,npm install可能会失败

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 Sever

在这里插入图片描述在这里插入图片描述

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

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

在这里插入图片描述

3、创建一个freestyle任务

3.1 jenkins 任务配置

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

在这里插入图片描述
填写项目的git地址, eg. https://github.com/your_name/your_repo_name.git
添加github用户和密码

  • 构建触发器,构建环境

在这里插入图片描述

  • 构建
    在这里插入图片描述

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

在这里插入图片描述

3.2 jenkins 任务执行

  • 以上设置完成之后,可以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需要付费的资源主要是它的容器

1、待尝试:docker下搭建基于Jenkins的CICD服务
2、后端项目,如基于maven的,整体流程一样,配置和插件不同
通过请求分发等设计,可以实现Master节点的横向伸缩及高可用问题
利用容器技术,可以解决salve节点的弹性伸缩和资源利用问题

发布了22 篇原创文章 · 获赞 22 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/liang526011569/article/details/88120378
今日推荐