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

本文轉載自查看原文 2018-08-03 14:56 6667 開發工具篇

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