We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
前后端分离的开发模式下，往往前端只需将一个包含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
项目地址：https://github.com/FrankKai/frontend-jenkins-cd
vue create demo
Download Jenkins.
Open up a terminal in the download directory.
Run java -jar jenkins.war --httpPort=8080.
java -jar jenkins.war --httpPort=8080
Browse to http://localhost:8080.
http://localhost:8080
Follow the instructions to complete the installation.
项目(Job)名称：foo-production
源码管理 Git
https://github.com/FrankKai/frontend-jenkins-cd.git
frank/*******
Branch Specifier */master
0
构建触发器
触发远程构建 (例如，使用脚本)
构建环境 Delete workspace before build starts Abort the build if it’s stuck
node_8.11.3
taboo registry
构建 Execute shell
yarn install
yarn lint yarn build
Send files or execute commands over SSH SSH Publishers
dist/**/*
dist
问题汇总：
/Users/Shared/Jenkins/Home/secrets/initialAdminPassword
npm list --depth 0 -g
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 + [email protected] 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 > [email protected]: Switch to the `bfj` package for fixes and new features! [2/4] Fetching packages... [3/4] Linking dependencies... warning "@vue/cli-plugin-babel > [email protected]" has incorrect peer dependency "@babel/core@^7.0.0". warning "@vue/cli-plugin-babel > [email protected]" has unmet peer dependency "webpack@>=2". warning "@vue/cli-plugin-eslint > [email protected]" 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/
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前后端分离的开发模式下，往往前端只需将一个包含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
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
https://github.com/FrankKai/frontend-jenkins-cd.gitfrank/*******Branch Specifier */master0构建触发器
触发远程构建 (例如，使用脚本)
构建环境
Delete workspace before build starts
Abort the build if it’s stuck
node_8.11.3taboo registry构建
Execute shell
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
dist/**/*dist构建后操作
Notify Failure
Notify Success
问题汇总：
Jenkins只能运行在Java 8上
/Users/Shared/Jenkins/Home/secrets/initialAdminPassword由于secrets目录权限为drwx------，因此需要使用sudo -i切换到文件拥有者root用户。
添加全部的Jenkins凭证即可。
不选择这个在克隆时不会带着tags，在你想访问refspec指定的内容时可以节省时间和空间。
浅克隆，这样git才能不下载项目的历史，如果你只想获得最新版，这样可以节省你的时间和磁盘空间。
设置一个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
系统管理->插件管理
插件安装完成后，就会出现Provide Node & npm bin/ folder to PATH选项。
在全局配置的NodeJS中新增NodeJS即可。
需要安装Pipeline NPM Plugin，在系统管理里找到Managed files，再Add a new Config即可。
安装插件# Publish Over SSH Plugin，远程执行远程linux服务器上的命令。
在全局的系统设置中，新增一台ssh服务器。
从日志中我们其实可以发现，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/
The text was updated successfully, but these errors were encountered: