原文地址：https://segmentfault.com/a/1190000022079215
前言
打開搜索引擎輸入『Copy攻城獅』，發現最新的一條記錄已經是去年的4月，意味著我又有一年時間沒有再總結成長了。習慣了“溫水煮青蛙”的日子，無論是經驗水平還是薪資收入，已經被同期的小伙伴遠遠地甩在了后頭。開年至今，一直在家“云辦公”的我，被各種打包發布需求困擾。由于種種原因，小作坊模式的開發團隊代碼托管依舊用的svn，無力改變也無力吐槽，我們項目是完完全全的前后分離，前端用的人人都會的Vue,之前都是美麗善良的測試妹妹用公司測試打包專用電腦自己純手工打包、純手工發布到服務器靜態目錄，然后純手工測試。后來，打包這項艱巨的任務就落到前端這邊了，重復的步驟讓人感覺疲倦：本地電腦新建目錄拉取svn代碼-->安裝npm依賴-->打包不同環境-->上傳服務器靜態目錄，簡單又繁瑣的工作，加之通過EasyConnect連接公司內網的網速慢到我能絕望。終于，后端看不下去了，提出了要給我上docker的想法，可惜我前端這邊根本就沒用docker去部署，僅僅一個文件夾丟到nginx靜態文件服務器下就行；后端又問了我打包命令之類的，后來就不了了之了。鑒于后端部署用的docker以及jenkins一鍵發布，我琢磨了一下，前端也能jenkins一鍵發布啊！不就是把我本地手工輸入的npm命令丟給jenkins去做嗎？說干就干，just do it！沒有運維的我們擼起袖子就是干！有寫得不當的地方拜托各位多多指正！
docker安裝jenkins
盡管公司機器已經用docker部署了jenkins，秉著學習的態度，我用自己的乞丐版阿里云ECS再操作一遍，雖然不懂原來，人稱『Copy攻城獅』可不是蓋的，一頓copy操作，妥妥的8080端口就起了一個jenkins服務。關于docker的內容，我這里就不展開說，因為我也不會，具體可以關注下圖雀社區熱乎乎的docker教程,一杯茶的時間，上手 Docker,真的只用一杯茶的時間。那我這里就直接安裝jenkins，更詳細的安裝文檔請移步安裝Jenkins。那我這邊就簡單三步走啦，三行命令分分鐘起一個jenkins服務。
-
拉取jenkins鏡像
docker pull jenkins/jenkins[圖片上傳失敗...(image-5b1db1-1600846533352)]
-
新建文件夾，用于磁盤掛載
mkdir /home/jenkins -
啟動服務
docker run -itd --name jenkins -p 8080:8080 -p 50000:50000 --privileged=true -v /home/jenkins:/var/jenkins jenkins/jenkins[圖片上傳失敗...(image-783eb1-1600846533352)]
難得一把過，沒有翻車沒有bug。我這邊首次打開會提示密碼放在
/var/jenkins_home/secrets/initialAdminPassword，當然服務器上是沒有這個文件的，需要進到docker容器中。當然也可以直接通過安裝日志查看:docker logs jenkins。docker ps -a docker exec -it jenkins /bin/bash cat /var/jenkins_home/secrets/initialAdminPassword[圖片上傳失敗...(image-94f8ad-1600846533352)]
恩恩，拿到密碼了，趕緊Copy過去試一試！O98K，等待一口茶的時間，密碼確認完畢，我們來到了初始化頁面
[圖片上傳失敗...(image-16928c-1600846533352)]
jenkins初始化翻車
當我點擊install選項卡滿懷期待的等待初始化完成的時候，時間一點一點的流逝，看著滿屏的紅叉和一動不動、動也不動的進度條，我開始焦慮，一種不祥的預感涌上心頭。十分鐘過去了，二十分鐘過去了，三十分鐘過去了......jenkins卡在Getting Started 哼，一定是撞墻了！
[圖片上傳失敗...(image-c4cafd-1600846533354)]
一看到安裝出的問題,第一感覺就是撞墻了，改配置文件吧！那就先進入jenkins容器唄。最開始以為在jenkins容器root目錄下結果Permission denied，想到上一步密碼存放在/var/jenkins_home/secrets/initialAdminPassword，那就進入/var/jenkins_home/目錄看看，順利地找到了/var/jenkins_home/updates/default.json ,滿懷信心的想打開它看看究竟是怎樣的配置導致jenkins插件安裝這么慢。結果忘了docker容器默認沒有vi或vim。
[圖片上傳失敗...(image-91ba51-1600846533354)]
先通過docker cp把文件復制到剛剛新建的/home/jenkins目錄下，查看下default.json究竟有些啥神配置？果然，“一枝紅杏出墻來”，接下來的目標是將connectionCheckUrl字段改為墻內地址。
docker cp jenkins:/var/jenkins_home/updates/default.json /home/jenkins/
vi /home/jenkins/default.json
[圖片上傳失敗...(image-ce4681-1600846533354)]
考慮到我安裝vi或vim還在坑里沒爬出來，這里就通過在主環境上修改完再copy到容器中去，不過也掉坑里了，坑在直接復制不生效，我這里先進入jenkins容器備份一下default.json，將主環境修改好的配置文件復制到jenkins容器/tmp目錄下，再移動到/var/jenkins_home/updates/目錄下。再將配置文件復制到主環境驗證一下是否替換成功。
docker cp /home/jenkins/default.json jenkins:/tmp/
docker exec -u root -it jenkins /bin/bash
mv /var/jenkins_home/updates/default.json /var/jenkins_home/updates/default.json.bak
mv /tmp/default.json /var/jenkins_home/updates/default.json
exit
docker cp jenkins:/var/jenkins_home/updates/default.json /home/jenkins/default.json.bak
vi /home/jenkins/default.json.bak
完成修改配置后重啟一下，正常的話能進到賬號注冊的頁面。如果還是顯示很多紅叉，右下角重試左邊應該會有個跳過的選項。歷經了幾個世紀，終于把插件安裝完了，新手上路！
[圖片上傳失敗...(image-84cf9f-1600846533354)]
Vue項目預覽
為了高度還原我們簡單又繁瑣的打包場景，我特意在碼云(不是福報的那個哦)上新建了一個SVN項目，并初始化了一些簡單配置,如區分環境、打包文件添加時間注釋。關于Vue項目配置或者webpack配置可移步Vue CLI官方文檔，webpack配置的話推薦接地氣的帶你深度解鎖Webpack系列。
本次演示vuedemo項目地址：svn://gitee.com/hu-qi/vue-demo
[圖片上傳失敗...(image-a23a00-1600846533354)]
-
.env文件區分環境變量
.env # 在所有的環境中被載入，默認開發 .env.test # 只在測試模式中被載入 .env.prod # 只在生產模式中被載入 -
package.json
通過定義不同指定區分運行/打包不同環境。"serve": "vue-cli-service serve --mode development", "serve:test": "vue-cli-service serve --mode test", "serve:prod": "vue-cli-service serve --mode prod", "dev": "vue-cli-service build --mode development", "build": "vue-cli-service build --mode prod", "test": "vue-cli-service build --mode test", -
vue.config.js
簡單配置webpack輸入目錄，通過 BannerPlugin插件為每個 chunk 文件頭部添加自定義的時間注釋，以便區分是否為最新一次發布。const webpack = require('webpack'); module.exports = { publicPath: './', outputDir: process.env.outputDir, configureWebpack: { plugins: [ new webpack.BannerPlugin(new Date().toLocaleString()) ] } }; -
業務代碼中獲取環境配置
通過process.env訪問.env設置的環境配置參數<template> <div class="hello"> <h1>{{ msg }} - {{ title }}</h1> <h2>API: {{ apiUrl }}</h2> </div> </template> // ... <script> export default { name: 'HelloWorld', props: { msg: String }, data() { return { title: '', apiUrl: '' } }, created() { this.title = process.env.VUE_APP_TITLE this.apiUrl = process.env.VUE_APP_URL } } </script> 運行預覽
通過package.json中定義的運行指令，能達到預期的效果。
[圖片上傳失敗...(image-f0aa43-1600846533353)]打包預覽
通過package.json中定義的打包，能分別打出dev、test、prod文件夾，并且文件中的時間注釋符合預期。
[圖片上傳失敗...(image-6337a4-1600846533353)]-
發布到nginx
這里我依舊通過docker安裝nginx，將打包出來的文件夾上傳到放到nginx的靜態目錄下實現發布。這里docker安裝nginx我也只是簡單安裝實踐：docker pull nginx // 拉取nginx docker run -d --name nginxtest -p 80:80 nginx // 啟個test驗證配置 mkdir -p /home/nginx/{conf,html,logs} // 宿主新建配置文件夾 docker cp nginxtest:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf // 復制配置文件 docker stop nginxtest // 停止nginxtest docker rm nginxtest // 刪除nginxtest docker run --name nginx -d -p 80:80 -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html nginx // 運行正式nginx并掛載到宿主只需將打包出來的文件丟到宿主的
/home/nginx/html下就能正常訪問了。我這里上傳的prod文件夾，所以可以通過***/prod訪問。
[圖片上傳失敗...(image-28485b-1600846533352)]jenkins打包發布Vue項目
回顧一下測試妹妹純手工打包發布的步驟：從svn拉取代碼-->安裝
npm install依賴包-->npm run build打包prod-->將prod上傳到服務器nginx靜態目錄(包括備份上一個版本)。通過學習和實踐，通過給jenkins安裝一些插件，我們能夠輕松的拉取代碼、安裝NodeJS、連接服務器執行shell，構建好流程之后只是點下按鈕，所有的事統統交給jenkins，再也不怕測試妹妹找我打包了。 jenkins安裝插件及nodejs
我這里根據我們的打包需求安裝的插件主要有Subversion Plug-in、Publish Over SSH、NodeJS Plugin。插件安裝在系統管理-->插件管理-->可選插件。搜索對應的插件進行安裝。
[圖片上傳失敗...(image-7f7c84-1600846533353)]
nodejs的安裝在系統管理-全局工具配置-NodeJS，默認是沒有這個選項的，安裝了NodeJS Plugin就會有了，這里我安裝的是默認的Node版本，一般根據實際情況設置，另外設置鏡像 cnpm --registry=https://registry.npm.taobao.org
[圖片上傳失敗...(image-5beed0-1600846533353)]Publish over SSH設置
我們安裝了Publish Over SSH插件，在系統管理-->系統設置能找到對應的設置位置，這里配置一下我們要部署的服務器。后面步驟我們通過執行shell腳本在部署的服務器中打包發布。
[圖片上傳失敗...(image-95b3c-1600846533352)]-
配置jenkins構建任務
如果您也有幸苦于打包，您一定和我一定對于一些簡單的rm -rf、mv、tar等命令已經存在你深深的腦海。我這里新建工程命名為vueDemo\-prod。選擇對應的工程-->配置即可進入工程配置。首先General我配置的是丟棄舊的構建、保持3天構建天數、保持10個構建的最大；然后源碼管理我選擇從svn拉取代碼。
[圖片上傳失敗...(image-102f93-1600846533352)]
再然后構建環境我們使用之前安裝的node，用于后面步驟的打包。
[圖片上傳失敗...(image-bbd3fd-1600846533352)]
環境有了，再然后就是構建，構建這里我們選執行shell，命令主要和前端項目配置的打包命令一致，然后再壓縮，方面后續上傳。
[圖片上傳失敗...(image-491c5a-1600846533352)]
最后構建后操作就是連接到發布服務器，依舊以shell命令的形式執行文件上傳、備份、解壓。確保打包出來的文件夾最終發布到/home/nginx/html下。
[圖片上傳失敗...(image-3492a-1600846533352)]基本上一套下來，就沒太大問題了。應用保存一下，點擊立即構建。一杯茶的時間，等待jenkins構建成功！
[圖片上傳失敗...(image-194a24-1600846533352)]關于調試
往往前方的路不一定一路順風，通過上面的圖能看出即使構建成功了，我也踩了不少坑。通過前面幾次構建失敗的日志，我們能清晰的定位到問題并予以解決，當然整個流程也十分方便調試。工程的首頁面板中的工作空間能查看具體的代碼，點擊某個構建歷史進去之后查看控制臺輸出能看到每次構建失敗的具體原因。我遇到過的問題也不少，包括node安裝失敗，時間不是標準時間，以及一些shell命令書寫不當導致構建失敗；甚至還遇到
docker restart jenkins依舊無法網頁的問題。失敗并不可怕，可怕的是失敗之后不愿再嘗試！
尾聲
在家“云辦公”的這段時間，我有很多機會來寫這篇實踐記錄文章，奈何惰性太強，而且實踐過程中也屢次碰壁。不過，最終還是有幸產出這篇水文，期待評論區各位大佬批評指正！
