前端开发实现自动化编译与部署

现在的前端开发早已不用以前的刀耕火种的方式写代码了，项目开始时会考虑各类前端框架react vue angular等，而后就是用webpack搭建项目开发架构。开发完后咱们会将webpack编译后的文件经过svn发到服务器上，可是这样很容易存在文件漏发，且多人参与发开易冲突等。通过屡次开发实践，目前咱们的项目采用jenkins+gitlab实现自动化编译与部署，这样简化了项目部署等问题，极大的减小了因代码发布而引发的bug数量。

自动化编译部署介绍

经过搭建gitlab服务器从而在gitlab上管理项目代码，在gitlab上分别创建master,release/test分支，每次开发前须要从master分支上拉取新的开发分支feature，开发完后提交开发分支并将其合并到测试分支release/test上，合并操做经过webhook触发jenkins上已写好的webpack编译脚本，从而达到自动编译并部署到测试环境。测试完成后在发布到线上环境时，咱们先从master分支上拉取新的发布分支release/prod,将开发分支feature合并到发布分支release/prod上，合并操做同发布测试同样会触发自动编译与部署。

搭建gitlab服务器

首先须要服务器的内存至少为4G，否则带不动会出现502错误

安装依赖软件包

sudo yum -y install curl policycoreutils openssh-server openssh-clients postfix

将SSH服务设置成开机自启动，并启动

sudo systemctl enable sshd
sudo systemctl start sshd

设置postfix开机自启，并启动，postfix支持gitlab发信功能

sudo systemctl enable postfix
sudo systemctl start postfix

打开系统防火墙HTTP

sudo systemctl start firewalld
sudo firewall-cmd --permanent --add-service=http
sudo systemctl reload firewalld

添加GitLab镜像源并安装

vim /etc/yum.repos.d/gitlab_gitlab-ce.repo
修改内容以下：

[gitlab-ce]
name=gitlab-ce
baseurl=http://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7
repo_gpgcheck=0
gpgcheck=0
enabled=1
gpgkey=https://packages.gitlab.com/gpg.key

安装gitlab

sudo yum install gitlab-ce

配置gitlab-ce

sudo vim /etc/gitlab/gitlab.rb

external_url 'http://192.168.10.11' //服务器ip地址
unicorn['listen'] = '192.168.10.11'
unicorn['port'] = 9090

配置完后从新启动

sudo gitlab-ctl reconfigure
sudo gitlab-ctl restart

配置访问端口防止端口被占用

sudo vim /var/opt/gitlab/nginx/conf/gitlab-http.conf
将80端口改成3000
listen *:3000;

访问192.168.10.11:3000便可看到gitlab的充值密码页面

管理员的用户名为root
重置密码登陆后会看到gitlab欢迎界面

至此gitlab服务器已搭建完成，至于gitlab中项目的配置咱们后面再介绍。

Jenkins 安装与配置

添加yum repos，而后安装

sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
sudo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
sudo yum -y install jenkins

若是没有java的话要安装java

sudo yum -y install java

配置文件在 /etc/sysconfig/jenkins
默认jenkins使用8080端口，若是有冲突能够在配置文件中修改

启动和中止

sudo service jenkins start/stop/restart

开放8080端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent

访问http://192.168.10.11:8080/ 能够看到解锁 Jenkins的页面

至此jenkins搭建完成

jenkins配置

在/var/lib/jenkins/secrets/initialAdminPassword 或/var/log/jenkins/jenkins.log中找到管理员密码
选择推荐安装的插件

填写管理员帐号信息，继续实例配置，这里默认是8080端口，
至此jenkins已安装就绪，可开始使用了

jenkins插件安装

• Gitlab Hook Plugin
• GitLab Plugin
• Publish Over SSH

新建一个项目在项目配置中填下如下内容

在添加凭据选择ssh username with private key
填写用户名和私钥,

秘钥的生成

ssh-keygen -t rsa -C "个人SSH密钥"
在~/.ssh/目录下可看到生成的公钥id_rsa.pub和私钥id_rsa

触发器构建

记住url http://192.168.10.11:8080/project/auto-deploy

将gitlab中项目的设置中填入webhook url

构建中写入要执行的shell脚本

这样咱们在每次合并到测试分支时都能触发jenkins执行构建中写好的shell脚本

参考文章

• jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战
• 持续集成之Jenkins+Gitlab