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

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


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

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

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

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

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

前言

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

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

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

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

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

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

image-20220725231423445

本篇文章用到的是自由風格式(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 上點選倉庫,按下圖順序

image-20220725234238980

image-20220725234704506

之後點選建立即可

2、建立一個 Personal access tokens

image-20220725235047549

image-20220725235149381

image-20220725235309522

image-20220725235431597

三 、Jenkins 部署 Vue 專案

1、安裝 Nodejs 外掛

image-20220725235601294

image-20220725235637764

等待完成即可

image-20220725235704877

2、配置 Nodejs

image-20220725235746956

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

image-20220726000026696

3、系統配置

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

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

此處還需要下載兩個外掛

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

image-20220723123647297

找到兩個配置:

1、SSH remote hosts

2、SSH Servers

image-20220723124508598

image-20220723125259942

image-20220723124931631

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

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

image-20220726001018326

image-20220726001057300

image-20220726001420957

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

image-20220726001637797

image-20220726001753543

image-20220726002005243

image-20220726002041791

image-20220726002056727

(圖片說明:變數無需填寫)

image-20220726002136595

(圖片說明:選擇 secret text)

image-20220726002227276

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

image-20220726002323326

(圖片說明:選擇自己新增的那個 憑據)

image-20220726002442954

image-20220726002542464

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


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

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

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

image-20220726003805414

image-20220726003814903

成功的輸出應該如下:

image-20220801232543788

image-20220726003845074

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 任務配置

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

image-20220802002542798

image.png

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

image.png

#/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,甚至都沒法立馬回退版本,或者出現意外情況沒法快速橫向擴容.

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

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

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

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

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

8、測試自動構建

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

image-20220802001152688

image-20220802001441253.png

(圖片說明:此處我放上的是剛寫文的測試)

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

看看我滴測試結果~

image-20220802002453089

後記

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

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

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

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

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

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

玫瑰已然到了花期

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

寫於 2022 年 8 月 3 日晚,作者:寧在春