前后端分离的开发模式下，往往前端只需将一个包含js，html，css以及其他静态资源的dist目录发给后端。
最直观的就是vue-cli，create-react-app，自定义脚手架中的npm run build命令，本质上，是webpack，gulp等打包工具去做了编译打包等等工作，最终会生成一个dist目录，它是我们唯一需要提供给后端的内容，
如果代码无bug且只发一次版本（有这么皮的项目吗？），上面这样的方式完全ok。但是如果需要频繁更新版本，那么就需要频繁 打包 发包 接包 部署，这对于前后端来说，都是一个很低效的事情。
因此我们需要将低效的手动式部署，升级为更加先进的工程化的持续部署。
Jenkins就很好的可以做这样的事情，而且公司项目正在正常使用。
下面我将在Github新建一个repo，并且使用vue-cli初始化一个前端项目，最后结合Jenkins做一次前端CD。
local：vue项目 Jenkins服务器
remote：github repo
新建repo
项目地址：https://github.com/FrankKai/f...
初始化项目
vue create demo
下载并安装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-production
源码管理
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目录，更新旧目录
- 断开连接
用一句话总结，其实就是jenkins构建，ssh更新。
茅塞顿开的感觉真好！
关于前端自动化构建，还有以下博文可以参考：
参考资料：
https://segmentfault.com/a/1190000010200161
https://juejin.im/post/5ad1980e6fb9a028c42ea1be
