前端開發實現自動化編譯與部署

現在的前端開發早已不用以前的刀耕火種的方式寫代碼了，項目開始時會考慮各類前端框架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