search

FrankKai / FrankKai.github.io

FE blog
https://frankkai.github.io/
363 stars 39 forks source link

Jenkins前端项目持续部署 #92

Open FrankKai opened 6 years ago

FrankKai commented 6 years ago

前后端分离的开发模式下，往往前端只需将一个包含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/frontend-jenkins-cd

初始化项目

vue create demo

下载并安装Jenkins

  1. Download Jenkins.

  2. Open up a terminal in the download directory.

  3. Run java -jar jenkins.war --httpPort=8080.

  4. Browse to http://localhost:8080.

  5. Follow the instructions to complete the installation.

CD配置

项目(Job)名称：foo-production

源码管理 Git

构建触发器

触发远程构建 (例如，使用脚本)

构建环境 Delete workspace before build starts Abort the build if it’s stuck

构建 Execute shell

yarn install

yarn lint yarn build

Send files or execute commands over SSH SSH Publishers

问题汇总：

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件事：

用一句话总结，其实就是jenkins构建，ssh更新。

茅塞顿开的感觉真好！

关于前端自动化构建，还有以下博文可以参考：

参考资料： https://segmentfault.com/a/1190000010200161 https://juejin.im/post/5ad1980e6fb9a028c42ea1be https://yezihaohao.github.io/2017/09/09/Jenkins%E5%AE%9E%E7%8E%B0%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E8%87%AA%E5%8A%A8%E5%8C%96%E9%9B%86%E6%88%90%E6%89%93%E5%8C%85%E9%83%A8%E7%BD%B2/