Jenkins前端项目持续部署

头像
趁你还年轻
    阅读 7 分钟
    2

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

    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

    • 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
    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/

    期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

    努力成为优秀前端工程师！

    前端工程化前端
    趁你还年轻
    4.1k 声望4.1k 粉丝
    « 上一篇
    前端工程师必会之ssh命令
    下一篇 »
    es6必会之let && const

    引用和评论

    推荐阅读
    头像
    浅谈业务中台前端设计

    趁你还年轻赞 2阅读 2.1k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.7k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    0 条评论
    得票最新