Jenkins+vue項目自動化構建部署

Jenkins

更新地址： https://sunseekerx.yoouu.cn/common/jenkins.html

更新時間：2020-05-05 20:39:33

Vue項目自動化構建

Jenkins安裝查看Docker章節。

Jenkins第一次安裝完成最好重啓一下，由於若是安裝了語言包有些地方仍是英文的。應該是個bug。

前提

• Vue項目+Git
• 有Jenkins環境
• 有部署項目的服務器
• 域名
• Linux知識

目標

在本地寫好代碼，一旦提交到Git，經過web-hook，觸發Jenkins的自動構建任務，Jenkins自動從Git上面拉取代碼>安裝依賴>打包>發送到部署的服務器等一系列操做。

簡單來講，我本地寫好代碼，我提交到 Git以後，就有個東西幫我打包發送到服務器。我不須要管這些事，我只要寫代碼、測試、推代碼就完事了。

目前須要實現的就是這樣的功能，但Jenkins能作的不僅是這麼多。不過對於我目前的項目來講足夠了。

實現

0x1 安裝ssh發送插件 - Publish Over SSH

見名知意，經過 ssh發佈，用來將打包好的項目用 ssh鏈接的方式發送到部署的服務器，而且執行其餘的命令。

1. 選擇系統管理
2. 選擇插件管理
3. 頁面直接ctrl+f搜索ssh，直接安裝Publish Over SSH插件(不要用自帶的過濾搜索沒用)

0x2 配置ssh插件

這裏要配置的部署網站的服務器，我採用的方式是密碼登陸，也能夠配置密鑰文件登陸的。看你的喜愛。

1. 選擇系統管理
2. 選擇系統配置
3. 拉到最後面找到Publish over SSH
4. 新增SSH - Server
5. name標識該服務器的
6. Hostname服務器的IP
7. Username填寫服務器的用戶
8. 點開高級設置
9. 勾選Use password authentication, or use a different key
10. Passphrase填寫密碼
11. 填寫完了點擊Test Configuration測試下是否鏈接成功

0x3 安裝nodejs插件

1. 安裝nodejs插件（Jenkins目前好像沒法使用外部的nodejs）

   這個插件用來打包vue項目，跟咱們本身本地執行 yarn build等命令無區別。

   1. 選擇系統管理
   2. 選擇插件管理
   3. 頁面直接ctrl+f搜索nodejs，直接安裝nodejs插件(不要用自帶的過濾搜索沒用)
   4. 安裝完成
   5. 選擇系統管理
   6. 選擇全局工具配置

   7. 選擇新增 NodeJS

      1. 別名node 12.16.3
      2. 勾選自動安裝
      3. 版本選擇12.16.3，這是目前穩定的長期支持版本
      4. 保存

新建項目配置

0x1 新建項目 - 選擇自由風格項目

0x2 輸入名稱

0x3 源碼管理選擇你的項目的Git

個人文檔項目訪問是公開的，能夠直接訪問，若是是私有項目還須要配置一個可訪問的帳號才能夠。就是下面 Credentials選項。

0x4 構建觸發器

勾選 GitHub hook trigger for GITScm polling，這是一旦咱們推送代碼就會觸發構建。

0x5 構建環境

勾選 Provide Node & npm bin/ folder to PATH，這是提供 Node命令給咱們使用。

0x6 增長構建步驟 - 執行shell

執行shell內容

因爲內部的 node環境和外部隔離，因此咱們第一次使用的時候須要安裝 yarn和設置一些國內源。

這一步咱們進行安裝依賴和打包項目，而且將打包的項目壓縮等待後續發送到部署的服務器上。

# 進入Jenkins工做空間下hxkj項目目錄
cd /var/jenkins_home/workspace/sunseekerx

# 下面的命令只須要執行一次，後續能夠刪除
###
# npm切換爲淘寶源
npm config set registry http://registry.npm.taobao.org/
# 安裝yarn
npm i yarn -g
# yarn切換爲淘寶源
yarn config set registry https://registry.npm.taobao.org
###

# 安裝項目中的依賴
yarn
# 打包
yarn build
# 進入生成打包文件的目錄
cd docs/.vuepress/dist
# 把生成的項目打包成壓縮包，方便移動到項目部署目錄
tar -zcvf sunseekerx.tar.gz *

執行完成以後會在服務器生成sunseekerx.tar.gz，下一步就是把這個文件發送到指定部署的服務器。進行解壓。

0x7 增長構建後的步驟

這一步將上一步打包好的文件發送到服務器，而且解壓。

cd /www/wwwroot/sunseekerx.yoouu.cn
\echo ">>>當前工做路徑："`pwd`
\shopt -s extglob
\echo ">>>刪除：(.htaccess|.user.ini|sunseekerx.tar.gz)以外的文件"
\rm -rf !(.htaccess|.user.ini|sunseekerx.tar.gz)
\echo ">>>解壓：sunseekerx.tar.gz"
\tar -zxvf sunseekerx.tar.gz -C ./
\echo ">>>移除：sunseekerx.tar.gz"
\rm -rf sunseekerx.tar.gz
\echo ">>>執行成功"

0x8 測試構建

能夠看到服務器有了構建以後的文件

0x9 訪問下網站試試，nice😁

0x10 Git設置Webhooks

前提是Git須要能訪問到你的Jenkins，一旦有代碼提交上來，Git就會去請求你這個地址，而後Jenkins觸發構建動做。

簡單來講就是我提交代碼告訴 Git， Git告訴 Jenkins你該構建了，完了 Jenkins去構建。 Git就像倉庫管理員， Jenkins就是幹苦力的。😁

0x10 測試下提交構建

在本地修改一些文件，提交上去，稍等一下子查看Jenkins，這個處於等待中的任務就是提交的任務

訪問https://sunseekerx.yoouu.cn/試試，更新成功🤣