Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

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

Jump to bottom

Jenkins前端项目持续部署 #92

Open
FrankKai opened this issue Aug 28, 2018 · 0 comments
Open

Jenkins前端项目持续部署 #92

FrankKai opened this issue Aug 28, 2018 · 0 comments
Labels
前端工程化

Comments

@FrankKai
Copy link
Owner

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

  • 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

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

  • 编译文件*
    • 从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
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/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
前端工程化
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@FrankKai