前端自動化部署方案探索(二)：Jenkins篇

碎碎念

---

工做日天天回到家只想睡覺，拖到如今纔開始寫這篇文章，不得不說只有週末在閒暇之餘纔有心情寫本身的代碼或者文章。

前言

---

上一篇講了如何使用Docker去部署應用，但其實在自動化部署的過程當中，Docker並非必要的，甚至於你能夠在服務器上本身搭建好環境，而後經過自動化部署工具去運行你部署項目所用到的命令。因此有無Docker並不影響自動化部署，不過更爲方便。

在本方案中我使用了Jenkins來關聯github而且實現自動化部署的一系列步驟。

Jenkins是由Java語言編寫的一個持續集成(CI)工具，主要用於持續、自動地構建項目。

其實也可以本身去編寫一個程序來代替Jenkins，不過爲了早點體驗到自動化部署的樂趣，在這裏我就直接使用了Jenkins。

正文

---

首先，咱們須要先理清整個過程

1. 代碼上傳到github，Jenkins檢測到github上代碼有變化，將代碼下載下來。
2. 代碼下載以後，Jenkins自動下載項目所須要的依賴文件，而且將代碼打包。
3. 經過咱們前面定義好的Dockerfile，執行docker build命令，將打包好的文件放進容器內。
4. 部署成功，訪問監聽的端口測試是否成功。

如今開始搭建自動化所須要的環境。

1、 Jenkins安裝

首先安裝jdk，由於jenkins是基於jdk運行的。若是已有jdk可忽略此步。

$ sudo apt update
$ sudo apt install openjdk-8-jdk
複製代碼

而後添加jenkins的存儲庫，這裏我用的是ubuntu系統，因此添加的是debian的存儲庫，首先先添加密鑰。

$ wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
複製代碼

而後添加該存儲庫

$ sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
複製代碼

密鑰和存儲庫都添加後，就能夠下載Jenkins了

$ sudo apt update
$ sudo apt install jenkins
複製代碼

下載成功後，經過該命令判斷jenkins是否下載成功而且運行正常。

$ systemctl status jenkins
複製代碼

這時候咱們能夠經過訪問服務器的8080端口來進入jenkins的頁面，若是打不開能夠查看8080端口是否開放。

而後根據jenkins的引導進行初始化的工做：輸入jenkins生成的密碼、配置插件、建立用戶、配置jdk位置等。這一系列都完成後，jenkins的配置就先暫停到這。

2、github配置

jenkins配置好後，咱們須要讓jenkins檢測到github的代碼變更，那麼只能經過webhooks來實現這個功能。

首先，咱們進入github -> setting -> developers -> Personal Access Token頁面，生成一個有讀寫權限的用戶。

選擇這兩個配置項後生成token， 須要將該token記下來，由於後面是查看不到該token的，而且後續咱們要使用到它。

而後在github上建立咱們所須要部署的項目，進入settings頁面設置webhooks。

設置的url爲 服務器的ip+端口+github-webhook。

3、Jenkins關聯github

如今回到Jenkins上，首先咱們將Jenkins和github關聯起來，根據該路徑配置github信息：系統管理 -> 系統設置 -> github -> Add Github Server

點擊憑據的添加按鈕並填寫以下信息，Secret爲剛纔咱們生成的Personal Access Token。

添加後咱們點擊鏈接測試，能夠發現鏈接失敗，由於經過以前的安裝方式，咱們須要配置多一個信息，若是不配置的話後續的操做是無效的，由於沒法連通GitHub。

這個覆蓋Hook URL內的內容，就是咱們剛纔在github填寫的那個地址。（由於這個問題蒐集了好久纔看到這個解決方案，截圖太過於模糊）

連通github後，咱們在jenkins上建立一個項目，選擇構建自由風格項目。而後在general內填寫GitHub項目地址。

接着選擇源碼管理的選項卡，填寫具體的信息。

在該配置信息中，credentials爲github的帳號密碼，branch內能夠選擇檢測的分支。

信息所有配置好後，咱們開始配置構建的過程。選擇構建觸發器的選項卡，勾選以下幾項：

這裏的選擇node環境，須要在jenkins內添加nodejs的插件。具體如何配置能夠參考該文章： jenkins安裝nodejs環境

最後，咱們配置jenkins自動構建的命令：

這個shell腳本內，我使用了docker container stop vue-docker的緣由是第二次構建的狀況下，容器名稱會衝突，由於尚未找到好的解決辦法，因此先將原來的容器中止並刪除掉，從新建立一個新的容器。

4、嘗試構建

一切配置好後，點擊保存並應用。而後咱們修改代碼並push到master分支上，查看jenkins頁面，查看構建隊列或構建歷史面板，能夠看到構建的過程。

這些就是我這個項目的構建歷史，中途的失敗的記錄是不斷踩坑的過程。

總結

至此，該方案已經完成了整個流程，可是這個方案確定還存在着不少不足的地方，例如構建過程是否能把npm install的過程放到docker內執行等等問題。固然，自動化部署方案，如今也有比這個更爲成熟的作法，例如服務器如果阿里雲或騰訊雲的，能夠選擇他們的容器服務，裏面有更爲簡潔、友好的配置，而且可以避免我這個方案中的須要刪掉原有的容器才能建立新容器的問題，惋惜在我配置好後才知道公司的自動化部署正是使用了騰訊雲的配置，避免了這麼繁瑣的配置。

同時，在學習docker以及jenkins的過程當中，也參考了許多大牛的文章，例如一套真實前端開發環境搭建+可持續集成+自動化部署實踐，正是這些前人寫的文章避免了咱們重複踩坑的過程。

最後，若是文章中有什麼不足之處，能夠在下方指正:)