Jenkins前端項目持續部署

時間 2019-11-10

原文原文鏈接

先後端分離的開發模式下，每每前端只需將一個包含js，html，css以及其餘靜態資源的dist目錄發給後端。css

最直觀的就是vue-cli，create-react-app，自定義腳手架中的npm run build命令，本質上，是webpack，gulp等打包工具去作了編譯打包等等工做，最終會生成一個dist目錄，它是咱們惟一須要提供給後端的內容，html

若是代碼無bug且只發一次版本（有這麼皮的項目嗎？），上面這樣的方式徹底ok。可是若是須要頻繁更新版本，那麼就須要頻繁 打包發包接包部署，這對於先後端來講，都是一個很低效的事情。前端

所以咱們須要將低效的手動式部署，升級爲更加先進的工程化的持續部署。vue

Jenkins就很好的能夠作這樣的事情，並且公司項目正在正常使用。java

下面我將在Github新建一個repo，而且使用vue-cli初始化一個前端項目，最後結合Jenkins作一次前端CD。node

local：vue項目 Jenkins服務器
remote：github reporeact

新建repo

項目地址：https://github.com/FrankKai/f...linux

初始化項目

vue create demowebpack

下載並安裝Jenkins[](https://jenkins.io/doc/pipeli...

Download Jenkins.
Open up a terminal in the download directory.
Run java -jar jenkins.war --httpPort=8080.
Browse to http://localhost:8080.
Follow the instructions to complete the installation.

CD配置

項目(Job)名稱：foo-productionnginx

源碼管理
Git

Repositories
- Repository URL https://github.com/FrankKai/frontend-jenkins-cd.git
- Credentials frank/*******
Branches to build
- Branch Specifier */master
Additional Behaviours
- Fetch tags
- Shallow clone
- Shallow clone depth 0

構建觸發器

觸發遠程構建 (例如，使用腳本)

身份驗證令牌

構建環境
Delete workspace before build starts
Abort the build if it’s stuck

Time-out strategy Absolute
Timeout minutes 5
Provide Node & nom bin/folder to PATH
- NodeJS installation node_8.11.3
- Npmrc file taboo registry

構建
Execute shell

Command

echo $PATH
node —version
npm install -g yarn —registry=https://registry.npm.taobao.org
yarn —version

yarn install

yarn lint
yarn build

Send files or execute commands over SSH
SSH Publishers

SSH Server
- Name nginx-crm
- Transfers
  - Transfer Set
    - Source files dist/**/*
    - Remove prefix dist

構建後操做
Notify Failure
Notify Success

問題彙總：

/Users/Shared/Jenkins下沒有Home目錄

Jenkins只能運行在Java 8上

管理員密碼獲取不到

/Users/Shared/Jenkins/Home/secrets/initialAdminPassword
因爲secrets目錄權限爲drwx------，所以須要使用sudo -i切換到文件擁有者root用戶。

憑據添加

添加所有的Jenkins憑證便可。

Fetch tags

不選擇這個在克隆時不會帶着tags，在你想訪問refspec指定的內容時能夠節省時間和空間。

Shallow clone

淺克隆，這樣git才能不下載項目的歷史，若是你只想得到最新版，這樣能夠節省你的時間和磁盤空間。

Shallow clone depth 0

設置一個shallow的深度，這樣git才能下載項目最近的歷史，節省時間空間。
注：與npm list --depth 0 -g是一個道理。

觸發遠程構建（例如，使用腳本）

身份驗證令牌
JENKINS_URL/job/weidian-crm-preproduction/build?token=TOKEN_NAME 或者 /buildWithParameters?token=TOKEN_NAME
Optionally append &cause=Cause+Text

卡住中止策略

Absolute Deadline Elastic Likely stuck No Activity

如何安裝NodeJS Jenkins插件？

系統管理->插件管理
插件安裝完成後，就會出現Provide Node & npm bin/ folder to PATH選項。

NodeJS Installation無選項

在全局配置的NodeJS中新增NodeJS便可。

沒有npmrc文件

須要安裝Pipeline NPM Plugin，在系統管理裏找到Managed files，再Add a new Config便可。

沒有SSH Publishers

安裝插件# Publish Over SSH Plugin，遠程執行遠程linux服務器上的命令。

SSH Publisher沒有選項

在全局的系統設置中，新增一臺ssh服務器。

Started by user 高凱
Building in workspace /Users/Shared/Jenkins/Home/workspace/crm-production
[WS-CLEANUP] Deleting project workspace...
[WS-CLEANUP] Done
Cloning the remote Git repository
Using shallow clone
Cloning repository https://github.com/FrankKai/frontend-jenkins-cd.git
 > git init /Users/Shared/Jenkins/Home/workspace/crm-production # timeout=10
Fetching upstream changes from https://github.com/FrankKai/frontend-jenkins-cd.git
 > git --version # timeout=10
using GIT_ASKPASS to set credentials 
 > git fetch --tags --progress https://github.com/FrankKai/frontend-jenkins-cd.git +refs/heads/*:refs/remotes/origin/* --depth=1
 > git config remote.origin.url https://github.com/FrankKai/frontend-jenkins-cd.git # timeout=10
 > git config --add remote.origin.fetch +refs/heads/*:refs/remotes/origin/* # timeout=10
 > git config remote.origin.url https://github.com/FrankKai/frontend-jenkins-cd.git # timeout=10
Fetching upstream changes from https://github.com/FrankKai/frontend-jenkins-cd.git
using GIT_ASKPASS to set credentials 
 > git fetch --tags --progress https://github.com/FrankKai/frontend-jenkins-cd.git +refs/heads/*:refs/remotes/origin/* --depth=1
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
 > git rev-parse refs/remotes/origin/origin/master^{commit} # timeout=10
Checking out Revision af6a29ef8221d59a533fd6139fd2cb23e7a0e9bd (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f af6a29ef8221d59a533fd6139fd2cb23e7a0e9bd
Commit message: "change"
 > git rev-list --no-walk af6a29ef8221d59a533fd6139fd2cb23e7a0e9bd # timeout=10
Adding all registry entries
copy managed file [taobao registry] to file:/Users/Shared/Jenkins/Home/workspace/crm-production@tmp/config7039915536655380363tmp
[crm-production] $ /bin/sh -xe /Users/Shared/Jenkins/tmp/jenkins2849389808941702160.sh
+ echo /Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/bin:/usr/bin:/bin:/usr/sbin:/sbin
/Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/bin:/usr/bin:/bin:/usr/sbin:/sbin
+ node --version
v8.11.3
+ npm install -g yarn --registry=https://registry.npm.taobao.org
/Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/bin/yarn -> /Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/lib/node_modules/yarn/bin/yarn.js
/Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/bin/yarnpkg -> /Users/Shared/Jenkins/Home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node8.11.3/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.9.4
updated 1 package in 0.643s
+ yarn --version
1.9.4
[crm-production] $ /bin/sh -xe /Users/Shared/Jenkins/tmp/jenkins5038056372914853910.sh
+ yarn install
yarn install v1.9.4
info No lockfile found.
[1/4] Resolving packages...
warning @vue/cli-service > webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@vue/cli-plugin-babel > babel-loader@8.0.0" has incorrect peer dependency "@babel/core@^7.0.0".
warning "@vue/cli-plugin-babel > babel-loader@8.0.0" has unmet peer dependency "webpack@>=2".
warning "@vue/cli-plugin-eslint > eslint-loader@2.1.0" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 9.80s.
[crm-production] $ /bin/sh -xe /Users/Shared/Jenkins/tmp/jenkins3713308693086114075.sh
+ yarn lint
yarn run v1.9.4
$ vue-cli-service lint
 DONE  No lint errors found!
Done in 1.00s.
+ yarn build
yarn run v1.9.4
$ vue-cli-service build

 DONE  Compiled successfully in 4555ms13:48:31

  File                                 Size               Gzipped

  dist/js/chunk-vendors.df5f2e07.js    78.56 kb           28.33 kb
  dist/js/app.4aef55d1.js              4.31 kb            1.60 kb
  dist/css/app.d63511e4.css            0.33 kb            0.23 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
Done in 7.46s.
SSH: Connecting from host [frankdeiMac.local]
SSH: Connecting with configuration [crm-test] ...
SSH: Disconnecting configuration [crm-test] ...
SSH: Transferred 7 file(s)
Build step 'Send files or execute commands over SSH' changed build result to SUCCESS
Finished: SUCCESS

從日誌中咱們其實能夠發現，Jenkins主要作了2件事：

編譯文件*
- 從git倉庫拉取文件到Jenkins
- Jenkins更新node_modules
- Jenkins build前端三板斧（html，css，js），通常爲npm run build/ yarn build，生成dist目錄
發送文件
- 與後端服務器創建ssh鏈接
- 發送dist目錄，更新舊目錄
- 斷開鏈接