Jenkins + Github + Nginx 自動化部署 Vue 專案_寧在春

theme: vue-pro highlight: a11y-dark

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第6天，點選檢視活動詳情

祝各位七夕快樂，如果有機會，就不要再錯過她或是他了。

算起來，這應該是建立這個專欄來的第三篇文章啦，可喜可賀，雖然菜，但還在堅持寫。

上一篇文章其實已經介紹過如何利用 Jenkins + Github + Docker 部署一個 Maven 專案，同時也包含了如何使用Docker 安裝 Jenkins ，以及一些基本概念 📌文章連結

有了後端，那麼必然也少不了前端，所以就誕生了本文。

前言

看起來好像 Jenkins 非常複雜，但其實只要自己多實操幾次，一次又一次的去想如何偷懶，你就可以一步一步發現更多的知識點，要相信好奇永遠是你的第一老師。

關於如何使用 Docker 安裝 Jenkins，Jenkins 外掛安裝配置、系統配置等，都已在關於 Docker + Jenkins +Github 實現自動化中全部陳述。

先說說本文最後做出來的效果：

本地開發，push 到 github 倉庫後
觸發 Github 的鉤子函式，通知 Jenkins ，進行重新構建
Jenkins 構建完成後，將前端打包出來的 dist 目錄，傳送到部署的伺服器上的 Nginx 容器掛載的部署目錄下
進行訪問測試

除了第一步是需要自己動手外，其餘部分實現自動化。

前一篇文章主要介紹了 Jenkins 如何構建一個 Maven 專案，但其實大家可以看到 Jenkisn 還有其他幾鐘不同的構建專案的方式。

本篇文章用到的是自由風格式（Freestyle project）部署前端專案。也很簡單的哈。

一、初始化專案

如果需要跟著文章實操，大致需要以下環境：

一臺雲伺服器或本地虛擬機器
伺服器或虛擬機器上需要聯網、Docker 環境
一個 Github 賬號
開發機器上需要有 Git 和開發環境

1、初始化 Vue 專案

其實我也不知道這一步該不該寫......

重點就是大家準備一個可以執行和打包的 Vue 專案。

如果有小夥伴，沒的話，我有~，給你指路： jenkins-vue-demo

拉下來之後，把 .git 檔案刪除掉，然後重新關聯你的github 倉庫就好~

2、推送至 Github 倉庫

在 github 建立一個倉庫（預設大家都會哈~ 不會可以留言的，摸魚的時候會回覆的，別慌）
然後在本地專案目錄下執行下面的命令，其實不寫，在你建立倉庫的時候也會給出這些提示命令

git init git add . git commit -m "init" git branch -M main git remote add 遠端倉庫地址 git push origin main

二、設定 Github

1、設定通知 WebHook

在github 上點選倉庫，按下圖順序

之後點選建立即可

2、建立一個 Personal access tokens

三、Jenkins 部署 Vue 專案

1、安裝 Nodejs 外掛

等待完成即可

2、配置 Nodejs

本地機器檢視 node 版本命令為 node -v

3、系統配置

之前我們在第四小節，只是在Jenkins中進行了打包，並未釋出在伺服器上。

如果要釋出在伺服器上，我們還需要配置一下遠端伺服器資訊。

此處還需要下載兩個外掛

SSH ： SSH 連線工具
Publish Over SSH ：SSH 釋出工具

稍詳細的描述在我上一篇文章：Docker + Jenkins + GitHub 自動化部署 Maven 專案

找到兩個配置：

1、SSH remote hosts

2、SSH Servers

對了記得點選儲存哈，不然又得重現填寫。

4、建立一個自由風格式任務

(圖片說明：指定分支應為 main，圖中有誤)

（圖片說明：變數無需填寫）

（圖片說明：選擇 secret text）

(圖片說明：描述就是取一個名稱)

（圖片說明：選擇自己新增的那個憑據）

npm cache clear --force # 清理 npm 快取，之前我一直報錯，第一次之後大家可以修改修改 ~ npm --registry http://registry.npm.taobao.org install cluster # 配置淘寶映象 npm install --force npm run build echo "打包完成"

執行到這一步時，我們已經可以測試我們當前的這個自由風格的任務了。

點選立即構建，看看git有沒有成功拉取，有沒有打包成功。

第一次構建的時間也會稍長，需要拉取專案，下載Nodejs，下載依賴等，這些資訊都會在控制檯上可檢視：

成功的輸出應該如下：

5、淺提一下Nginx

談到部署前端專案時，大部分情況下我們不可避免的會談到Nginx伺服器。

Nginx 這個中介軟體，不管是對於後端還是前端，都是需要了解的一個伺服器。

想要深入的瞭解它，可能還需要你好好的花費一些時間。

關於Docker 安裝 Nginx 部署前端專案，我之前已經寫好，連結：Docker 安裝 Nginx

後面的小節，都是預設大家已經安裝好了Nginx~

我的Nginx 的 server配置如下：

location /hello { alias /usr/share/nginx/html/www/hello/dist; try_files $uri $uri/ /hello/index.html; index index.html index.htm; }

我們部署成功訪問的路徑是：IP : Port/hello/ ,例如：192.168.1.100/hello/ 就是訪問此專案的的地址。

詳細的還是得大家去了解一下。

6、修改Jenkins 任務配置

開啟任務配置，直接劃到最下面

然後選中之前配置的伺服器

#/bin/bash # 其實在這裡執行的命令，就是在你選擇的那臺伺服器上執行的命令 echo ">>>>>>>>>>>>>開始執行此處的 /home/nginx/html/web 是我 nginx 容器掛載的目錄 >>>>>>>>>>>>>" cd /home/nginx/html/www/hello/dist/ rm -rf dist echo ">>>>>>>>>>>>>cd到Jenkins工作掛載目錄下>>>>>>>>>>>>>" cd /home/jenkins/workspace/jenkins-vue-demo echo ">>>>>>>>>>>> 將dist資料夾複製到 nginx 的掛載目錄下 >>>>>>>>>>>>>" cp -r dist /home/nginx/html/www/hello/ echo ">>>>>>>>>>>>複製成功啟動成功>>>>>>>>>>>>>"

注意：此處我是直接採取將 dist 目錄直接放在了 Nginx 部署的目錄下的，請注意：我這裡並非是一個合格的方式，只能說是用來寫Demo倒也無妨。請大家不要照抄~.

7、最佳實踐

看過上一篇文章的讀者可能知道,真正的應用場景中這樣的部署並不安全,一旦出現bug,甚至都沒法立馬回退版本,或者出現意外情況沒法快速橫向擴容.

所以大概率下,最佳實踐應當是

在 vue 專案中增加 Dockerfile 檔案和 nginx.conf 配置檔案
部署時,首先將 dist + Dockerfile + nginx.conf 打成映象 (docker build 相關明令)
將打包出來的映象上傳至儲存應用的伺服器或DockerHub(私服倉庫)
最後在部署伺服器上從儲存映象的那臺伺服器上拉取映象,執行 docker run 相關命令進行釋出.
測試

原本是沒有這一小節的，但是讀了一遍，感覺有點遺漏，就新增了這一段。

當時在寫的時候，前期的Nginx環境已經搭好，一定程度上少了一些思考，所以就補了這一小節。

關於 Vue 專案利用 Dockerfile 打包成映象部署，以往也寫過一篇不成熟的部落格，如果有想改造成映象釋出的小夥伴，可以參考一下。連結：Docker 部署 vue專案

8、測試自動構建

我們在本地修改檔案，然後推送到遠端倉庫中，你重新整理jenkins頁面，就會發現它已經開始在構建啦。

（圖片說明：此處我放上的是剛寫文的測試）

請注意：Github 因為是公用資源，有一定程度延遲，這一點在自己搭建的GitLab的私有倉庫上是沒有的。

看看我滴測試結果~

後記

寫到這裡本文也算是結束了，感覺這篇文章的質量比起上一篇的質量略低，可能裡面帶有一些重複性的內容，導致寫起來有些懈怠了，望各位見諒。

看完這兩篇文章，可能會有小夥伴產生一種感覺自己會用 Jenkins 了，哈哈，我也有這種感覺，但其實還差得很常遠的，不過自己簡單使用是肯定沒啥問題了。

這個專欄還在繼續更新，兩篇入門文章總算是搞定了~

希望讓你有所收穫~，很開心你讀到這裡，聽我講完廢話

如果今天的你也沒有收到情書的話，那就讓我送一封情書給你吧💌，

你不是一個人，你還有我。

玫瑰已然到了花期

我想把我這一生都奉獻給你，讓光陰將我燒成灰燼，化做風獨舞。

寫於 2022 年 8 月 3 日晚，作者：寧在春

Jenkins + Github + Nginx 自動化部署 Vue 專案

前言