基于Docker、Nginx和Jenkins實(shí)現前端自動(dòng)化部署

目錄

前期準備

• 基于CentOS 7系統云服務(wù)器一臺。
• 基于Vue-CLI的項目部署在GitLab之上。

部署目標

搭建Docker+Nginx+Jenkins環(huán)境，用于實(shí)現前端自動(dòng)化部署的流程。具體的實(shí)現效果為開(kāi)發(fā)人員在本地開(kāi)發(fā)，push提交代碼到指定分支，自動(dòng)觸發(fā)Jenkins進(jìn)行持續集成和自動(dòng)化部署?？梢栽O置在部署完成后通過(guò)郵件通知，部署的成功與否，成功后會(huì )將打包后的文件上傳到服務(wù)器，通過(guò)nginx反向代理展現頁(yè)面，失敗則會(huì )打印相關(guān)的錯誤日志。

友情提示：盡量選擇阿里云或者騰訊云服務(wù)器，其他服務(wù)器部署時(shí)可能會(huì )出現Jenkins無(wú)法正常啟動(dòng)！

Dcoker環(huán)境的搭建

連接云服務(wù)器

可以選擇阿里云或者騰訊云提供的在線(xiàn)終端（有時(shí)會(huì )卡），但是推薦使用本地電腦進(jìn)行連接。在終端輸入連接命令：

ssh root@你的服務(wù)器公網(wǎng)地址

之后輸入云服務(wù)器密碼，命令顯示結果如下：

Docker有兩個(gè)分支版本：Docker CE和Docker EE，即社區版和企業(yè)版。本教程基于CentOS 7安裝Docker CE。

安裝Docker環(huán)境

1、安裝Docker的依賴(lài)庫。

yum install -y yum-utils device-mapper-persistent-data lvm2

2、添加Docker CE的軟件源信息。

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3、安裝Docker CE。

sudo yum install docker-ce

4、啟動(dòng)Docker服務(wù)。

sudo systemctl enable docker // 設置開(kāi)機自啟
sudo systemctl start docker //  啟動(dòng)docker

Docker安裝Docker Compose

Docker Compose是用于定義和運行多容器Docker應用程序的工具。通過(guò)Compose，您可以使用YML文件來(lái)配置應用程序需要的所有服務(wù)。然后，使用一個(gè)命令，就可以從YML文件配置中創(chuàng )建并啟動(dòng)所有服務(wù)。下載docker-compose：

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

安裝完成后提升權限：

sudo chmod +x /usr/local/bin/docker-compose

輸入docker-compose -v顯示如下頁(yè)面：

Docker安裝Nginx和Jenkins服務(wù)

安裝Nginx和Jenkins

Docker鏡像拉取Nginx和Jenkins環(huán)境命令如下：

docker pull nginx
docker pull jenkins/jenkins:lts 

安裝完成后執行docker images可以清晰的看到當前Docker下存在的鏡像。

docker images

Nginx和Jenkins目錄編寫(xiě)

為了便于管理，在Docker下我們將Nginx和Jenkins聚集到一個(gè)文件目錄之中。目錄結構如下：

+ compose
- docker-compose.yml  // docker-compose執行文件
+ nginx 
+ conf.d
- nginx.conf        // Nginx配置
+ jenkins
- jenkins_home       // Jenkins掛載卷
+ webserver 
-static              //存放前端打包后的dist文件

Web server目錄屬于后期生成暫不討論，需要手動(dòng)創(chuàng )建的是Compose，Nginx和Jenkins目錄及其下屬文件，其中最主要的是docker-compose.yml文件和nginx.conf文件的配置。以上文件夾建議放在根目錄下面，可以放在home文件夾之下也可以單獨創(chuàng )建一個(gè)新的文件夾。

docker-compose.yml文件配置

version: '3'
services:                                      # 集合
docker_jenkins:
user: root                                 # 為了避免一些權限問(wèn)題 在這我使用了root
restart: always                            # 重啟方式
image: jenkins/jenkins:lts                 # 指定服務(wù)所使用的鏡像 在這里我選擇了 LTS (長(cháng)期支持)
container_name: jenkins                    # 容器名稱(chēng)
ports:                                     # 對外暴露的端口定義
  - 8080:8080
  - 50000:50000
volumes:                                   # 卷掛載路徑
  - /home/jenkins/jenkins_home/:/var/jenkins_home  # 這是我們一開(kāi)始創(chuàng  )建的目錄掛載到容器內的jenkins_home目錄  - /var/run/docker.sock:/var/run/docker.sock
  - /usr/bin/docker:/usr/bin/docker                # 這是為了我們可以在容器內使用docker命令
  - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
docker_nginx:
restart: always
image: nginx
container_name: nginx
ports:
  - 8090:80
  - 80:80
  - 433:433
volumes:
  - /home/nginx/conf.d/:/etc/nginx/conf.d  - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html

nginx.conf文件配置

server{
listen  80;
root /usr/share/nginx/html;index index.html index.htm;
} 

上述兩個(gè)文件配置完成之后，需要進(jìn)入/home/compose目錄下面輸入以下命令，進(jìn)行環(huán)境的啟動(dòng)：

docker-compose up -d

輸入docker ps -a 查看容器的情況：

狀態(tài)顯示up，后面的端口號顯示如上為正常狀態(tài)。在瀏覽器輸入你云服務(wù)器的公網(wǎng)IP加上8080的端口號就可以顯示如下頁(yè)面：

注意點(diǎn)：

• 在此步驟之前，切記一定要開(kāi)放云服務(wù)器的80端口安全組（可以參考提供的一鍵開(kāi)通功能），但是除此之外建議手動(dòng)添加8080端口的安全組。
• 80端口：是為HTTP（HyperText Transport Protocol）即超文本傳輸協(xié)議開(kāi)放的端口。
• 8080端口：是被用于WWW代理服務(wù)的，可以實(shí)現網(wǎng)頁(yè)瀏覽。
  

上圖所需要的密碼在docker-compose.yml中的volumes中的/home/jenkins/jenkins_home/secrets/initAdminPassword中?？梢酝ㄟ^(guò)以下命令獲得：

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword

安裝Jenkins插件

進(jìn)入頁(yè)面之后，選擇推薦安裝。

安裝完成之后，選擇左側Manage Jenkins選項。如下圖所示：

 Jenkins中Manage Plugins搜索以下插件GitLab、Publish Over SSH、Nodejs并安裝。

安裝完成后配置Nodejs環(huán)境和SSH參數 在首頁(yè)選擇global tool Configuration>NodeJS選擇自動(dòng)安裝和對應的Nodejs版本號，選擇成功后點(diǎn)擊保存。

配置SSH信息，Manage Jenkins>configure System填寫(xiě)服務(wù)器的相關(guān)信息：

關(guān)聯(lián)Jenkins和GitLab

生成密鑰

在根目錄下執行一下命令：

ssh-keygen -t rsa

一般默認兩次回車(chē)，如下圖所示：

使用cd ~/.ssh查看生成的文件。將生成的密鑰id_rsa復制粘貼到Jenkins中的憑證。如圖所示：

登陸GitLab，在GitLab中配置id_rsa.pub公鑰：

新建項目

準備完畢后，開(kāi)始新建一個(gè)任務(wù)，選擇新建item>freestyle project構建一個(gè)自由風(fēng)格的項目。

源碼管理

新建完成后，在源碼管理中配置Git信息，credentials選擇我們剛剛添加的憑證。

構建觸發(fā)器

在構建觸發(fā)器中選擇我們觸發(fā)構建的時(shí)機，你可以選擇隊友的鉤子，比如push代碼的時(shí)候，Merge Request的時(shí)候：

點(diǎn)擊高級選項找到secret token>Generate生成一個(gè)token值：

配置成功后，還需要到GitLab中增加對應的鉤子。記下上圖的webhookURL（紅線(xiàn)框出）和secret token值，到GitLab中進(jìn)行配置。

構建環(huán)境及構建配置

完成上述配置后，Jenkins就和GitLab關(guān)聯(lián)起來(lái)，在本地push文件時(shí)，就會(huì )自動(dòng)構建，訪(fǎng)問(wèn)云服務(wù)器的公網(wǎng)IP地址就可以訪(fǎng)問(wèn)修改完成后的項目，同樣也可以在Jenkins上手動(dòng)構建，如圖所示：

結束語(yǔ)

最后，簡(jiǎn)單的線(xiàn)上部署項目就結束了，有域名的同學(xué)可以進(jìn)行云解析映射公網(wǎng)的IP地址，這樣就可以使用更具辨識度的域名進(jìn)行項目的開(kāi)發(fā)及上線(xiàn)。

到此這篇關(guān)于基于Docker、Nginx和Jenkins實(shí)現前端自動(dòng)化部署的文章就介紹到這了,更多相關(guān)Docker、Nginx和Jenkins自動(dòng)化部署內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！