jenkins+gitlab+nginx部署前端應(yīng)用實(shí)現(xiàn)的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)jenkins+gitlab+nginx部署前端應(yīng)用實(shí)現(xiàn)的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

相關(guān)依賴安裝

docker

由于國內(nèi)安裝太慢，所以可以使用 https://docs.docker.com/desktop/ 進(jìn)行加速下載。
具體的下載過程就不再闡述。
鏡像源："http://hub-mirror.c.163.com"

docker安裝jenkins

# 拉取jenkins鏡像
docker pull jenkins/jenkins

# 在后臺(tái)運(yùn)行一個(gè) 名為 jk，對(duì)外端口號(hào)為3080，鏈接數(shù)據(jù)卷為 ～/docker/jenkins 的服務(wù)

docker run -d --name jk -p 3080:8080 -v ~/docker/jenkins:/var/jenkins_home jenkins/jenkins

命令執(zhí)行完成后，即可啟動(dòng)一個(gè)端口號(hào)為 3080 的http服務(wù)，打開瀏覽器，

• 輸入 http://localhost:3080/ ，等待初始化完成后（可能會(huì)比較漫長），此時(shí)需要管理員密碼，cat ～/docker/jenkins/secrets/initialAdminPassword 即可獲取管理員密碼。

• 再下一步就是安裝插件了，建議第一個(gè)選項(xiàng)，推薦的插件（這個(gè)安裝也會(huì)比較慢，耐心等待）

• 創(chuàng)建第一個(gè)管理員賬戶

docker安裝gitlab

docker pull gitlab/gitlab-ce

docker run -d --name gitlab -p 443:443 -p 9001:80 -p 222:22 -v ~/docker/gl/config:/etc/gitlab:Z -v ~/docker/gl/logs:/var/logs/gitlab:Z -v ~/docker/gl/data:/var/opt/gitlab:Z gitlab/gitlab-ce

• 初始化過程需要的時(shí)間可能會(huì)比較長，運(yùn)行 docker logs -f gitlab可查看進(jìn)度。
  

• 輸入 http://localhost:9001，首次進(jìn)入會(huì)輸入密碼，待完成后輸入用戶名密碼即可進(jìn)入（默認(rèn)的用戶名為root）

• 設(shè)置 https 和 ssh 方式克隆項(xiàng)目的地址。

# 配置http協(xié)議所使用的訪問地址,不加端口號(hào)默認(rèn)為80
external_url 'http://192.168.1.2:9001'

# 配置ssh協(xié)議所使用的訪問地址和端口
gitlab_rails['gitlab_ssh_host'] = '192.168.1.2'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # 此端口是run時(shí)22端口映射的222端口

# nginx 監(jiān)聽80端口，否則默認(rèn)會(huì)使用 external_url 的端口號(hào)，導(dǎo)致端口映射不成功
nginx['listen_port'] = 80
:wq #保存配置文件并退出，重啟容器

如果 ssh 方式不成功，多半是因?yàn)?服務(wù)端的 key文件權(quán)限不正確。docker exec -it gitlab sh進(jìn)入容器，查看 /etc/gitlab目錄下的 ssh_host_ecdsa_key、ssh_host_ed25519_key、ssh_host_rsa_key 3個(gè)文件的用戶名和群組是否為 git（chown 修改 所屬用戶，chgrp修改所屬群組），文件權(quán)限是否為600（chmod命令可修改）.

docker 安裝 nginx

docker pull nginx
docker run -d --name nginx -p 80:80 -v ~/nginx/html:/usr/share/nginx/html nginx

小結(jié)

• localhost:3080，訪問jenkins（應(yīng)運(yùn)行于用于構(gòu)建的服務(wù)器）

• localhost:9001，訪問gitlab（應(yīng)運(yùn)行于放置源碼的服務(wù)器）

• localhost, 訪問nginx（應(yīng)運(yùn)行于服務(wù)器）

配置

1. 安裝 gitlab 相關(guān)插件

首頁->系統(tǒng)管理->插件管理

然后 切換到 可選插件，搜索gitlab，選中 gitlab plugin（我已經(jīng)安裝了，所以此處沒有展示），然后選中左下角的按鈕，等待安裝完成

2. 首頁->系統(tǒng)管理->系統(tǒng)配置

Credentials 那里，添加的時(shí)候必須是 GitLabAPI token，

GitLabAPI token 的獲取方式如下圖，生成的token刷新后就會(huì)隱藏，從而保證安全性。

配置填寫完成以后，最好點(diǎn)擊一下 test connection 按鈕，確保配置填寫正確。

3. 新建一個(gè) job

4. 輸入任務(wù)名稱，并選擇自由風(fēng)格

5. 配置相關(guān)構(gòu)建選項(xiàng)

1. General 配置
選中之前系統(tǒng)配置里面填寫的選項(xiàng)即可，如果不選的話，構(gòu)建的狀態(tài)將無法回傳到 gitlab

2. 源碼管理

URL只能 http 格式的，所以下方的 Credentials 就需要使用username with password，選錯(cuò)的話將無法拉取代碼。

下方的配置，表示只在 master 和 以 ci 開頭的分支進(jìn)行構(gòu)建。具體的規(guī)則可點(diǎn)擊右方的問號(hào)自行了解。

3. 構(gòu)建觸發(fā)器
勾選 Build when a change is pushed to GitLab.，右側(cè)有適用于 gitlab 的webhook URL, 下方則是一些觸發(fā)構(gòu)建的時(shí)機(jī)選項(xiàng)（需要和 gitlab 那邊的配置互相配合）。

jenkins 插件提供的 webhooj URL 是無法直接使用的，因?yàn)?jenkins 是需要登錄的，對(duì)外提供的API也需要登錄，否則就會(huì)返回 HTTP 401, 好在這種登錄用HTTP基本認(rèn)證就可以搞定。
點(diǎn)擊 用戶名 -> 設(shè)置 -> API Token -> 添加新Token -> 輸入名稱 -> 生成，然后復(fù)制該 Token，與之前的 webhook URL拼接即可。拼接規(guī)則為 <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>。最終即可得到 http://ma1:11d4aca0aa206fc89d703879749fa7@192.168.1.2:3080/project/gl

此時(shí)可以先保存一下。然后去 gitlab 進(jìn)行配置。

4. gitlab 配置 webhook URL
gitlab默認(rèn)是不允許使用 本機(jī)URL的，所以要么使用公網(wǎng)域名，要么修改gitlab的隱私設(shè)置（如下圖所示）

隨后打開需要部署的項(xiàng)目 -> settings -> webhooks，填入上一步拼接URL，選擇對(duì)應(yīng)的事件，點(diǎn)擊 Add即可。添加成功以后，可以點(diǎn)擊 Test 測試一下 hooks 是否暢通（）。

5. 構(gòu)建環(huán)境
前端構(gòu)建免不了要使用 node，所以這里一定要勾選 Provide Node & npm bin/ folder to PATH（如果沒有的話，就去插件中心安裝）

6. 構(gòu)建

去插件中心安裝一個(gè)名為 Publish Over SSH 的插件，主要是用于將生成的文件發(fā)送到遠(yuǎn)程服務(wù)器。

需要在 -> 系統(tǒng)管理 -> 系統(tǒng)配置中，進(jìn)行該插件的配置。

2.構(gòu)建tab，增加構(gòu)建步驟，選擇執(zhí)行shell
gl替換為對(duì)應(yīng)的項(xiàng)目名即可

# 刪除之前的文件
rm -rf /tmp/html.tar.gz

# 運(yùn)行測試
npm run test
# npm構(gòu)建，打包腳本
npm run bd

# 切換到該工程目錄
cd /var/jenkins_home/workspace/gl
# 將目標(biāo)文件夾打包為 壓縮文件
tar -zcvf /tmp/html.tar.gz --exclude .git -C ./dist .
# 一定要把壓縮文件放到工程目錄下，所以 publish over ssh無法訪問
mv /tmp/html.tar.gz ./

構(gòu)建tab，增加構(gòu)建步驟，選擇Send files or execute commonads over SSH

# 先刪除/tmp/html，再新建。防止報(bào)錯(cuò)
rm -rf /tmp/html
mkdir /tmp/html

# 將壓縮文件解壓到 /tmp/html，然后刪除壓縮文件
tar -xvf ~/html/html.tar.gz -C /tmp/html
rm -rf  ~/html/html.tar.gz

# 將解壓出來的文件，復(fù)制到 ~/nginx/html（之前docker nginx映射的本地路徑）
cd /tmp/html
cp -R /tmp/html/* ~/nginx/html

7. 構(gòu)建后步驟
點(diǎn)擊 增加構(gòu)建后操作步驟，選擇Publish build status to Gitlab，這樣jenkins構(gòu)建完成后，在 gitlab 的 CI/CD 也能看到此次構(gòu)建的狀態(tài)。

6. 推送代碼，觸發(fā)構(gòu)建
推送代碼后，如果順利的話，就會(huì)在這里看到構(gòu)建歷史，否則檢查配置即可。

7. 瀏覽網(wǎng)站

推送代碼后，只是靜態(tài)文件部署，所以nginx不需要重啟即可看到新內(nèi)容。

總結(jié)

• 推送代碼時(shí)，gitlab 通過 webhook URL 通知 jenkins

• jenkins 收到 POST請(qǐng)求后，觸發(fā)構(gòu)建，包括測試打包等，完成后發(fā)送文件到遠(yuǎn)程服務(wù)器，并執(zhí)行相應(yīng)命令，如解壓縮文件、復(fù)制到nginx相關(guān)目錄等。如果是 nodejs 應(yīng)用，還需要 執(zhí)行 node腳本。

• 遠(yuǎn)程服務(wù)器需提前安裝好 docker 和 nginx 容器，并運(yùn)行 nginx 服務(wù)于后臺(tái)。

• 如果需要 nodejs + nginx，可以使用 docker-compose簡化命令運(yùn)行，然后在 publish over ssh的exec command加入對(duì)應(yīng)命令即可。
  

關(guān)于“jenkins+gitlab+nginx部署前端應(yīng)用實(shí)現(xiàn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。