专栏首页前端劝退师一文搞定前端 Jenkins 自动化部署

一文搞定前端 Jenkins 自动化部署

这两天折腾了一下 Jenkins 持续集成,由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,Git 配置基本一致,后面也介绍了下针对 Github 管理的项目的 Jenkins 配置

之前项目每次修改之后都需要本地 npm run build 一次手动发布到服务器上方便测试和产品查看,有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询。

声明:

  1. 后面的项目地址与打包地址都是使用 my-demo,自行修改;
  2. 另外还有路径等,根据自己情况自行修改;

1. 安装

1.1 安装 Nginx

可以直接去官网下直接下载,解压缩 start nginx就可以使了,常用命令:

start nginx  # 启动
nginx -s reload  # 修改配置后重新加载生效
nginx -s reopen  # 重新打开日志文件
nginx -t  # 配置文件检测是否正确

1.2 安装Jenkins

从官网下载文件安装之后,我这里安装到 C:\Jenkins(Mac 不用在意),默认端口 8080,这时候浏览器访问 localhost:8080 就能访问 Jenkins 首页,这里注意如果不安装到 C 盘根目录有些插件安装会出错

这里会让你去某个地方找一个初始密码文件打开并填到下面的密码框里,验证成功之后进入页面,选择 Installsuggested plugins 推介安装的插件

插件都安装完成之后进入用户登录界面,设定用户名、密码及邮箱。

然后提示 Jenkins is ready!→ Start using Jenkins ~

注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件:NodeJSPluginDeployto containerGithubPostbuild task

这里顺便记录一下启动和关闭Jenkins服务的命令行:

net start jenkins            //启动Jenkins服务

net stop jenkins             // 停止Jenkins服务

2. 创建svn项目的Jenkins任务

2.1 新建

左边栏新建一个任务,输入一个任务名称,这里随便写一个

2.2 配置

General

这里才是重头戏,进入刚刚创建的任务的配置页面的 General

丢弃旧的构建就是检测到新的版本之后把旧版本的构建删除

源码管理

这里采用的是 svn 来管理代码,

构建触发器

这里的 Poll SCM 表示去检测是否更新构建的频率, ***** 表示每分钟, H**** 表示每小时

构建

cd cd C:\Jenkins\workspace\my-demono
de -v
npm -v
cnpm i
npm run build

构建后操作

安装插件 Postbuild task 后,可以在 增加构建后操作步骤中选择 Postbuild task 选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本 - https://blog.csdn.net/minebk/article/details/73294785

我这里的 LogtextBuildcomplete

Script:

rmdir /q/s C:\nginx-1.14.0\html\my-demo
xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\html\my-demo

复制生成好的文件到Nginx的目录下,路径自行修改

3. 创建Github项目的Jenkins任务

Jenkins 不仅可以持续集成 svn 项目,Git 项目也是可以的,这里以 Github 上的项目为例:

其他配置和上面一章一样

这样如果 github 有新的 push 请求,都会自动化部署到之前的服务器上,可以说很方便了。

试一试

配置好了我们试一试,在刚刚 github 项目中随便 commit 一版到 github :

稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/ 就能看到 Jenkins 已经在构建中了

50秒之后:

构建成功!构建用时 54 秒,现在访问本地服务器地址 http://localhost:8282/vue-element-template,已经能看到编译后的发布版本啦~

如果你希望发布的是测试版本,可以自行修改构建后操作的 script


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. 使用Jenkins自动编译部署web应用
  2. Jenkins+github 前端自动化部署
  3. 配置Jenkins邮件通知
  4. jenkins部署maven项目构建后部署前执行shell脚本

本文分享自微信公众号 - 前端劝退师(quantuishi)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于AFN封装的带缓存的网络请求

    git: https://github.com/zhouxihi/NVNetworking

    周希
  • 【React】377- 实现 React 中的状态自动保存

    移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项...

    pingan8787
  • 高效协同开发

    假设服务机器开通sambas服务端口,并且windows防火墙允许访问。这时候可以在windows打开网盘一样,打开sambas共享的服务器文件夹,把代码工程放...

    mariolu
  • Go 模块存在的意义与解决的问题

    作者:William Kennedy | 原文:Modules Part 01: Why And What

    波罗学
  • 关于Git和Github你不知道的十件事

    Git 和 GitHub 都是非常强大的工具。即使你已经使用他们很长时间,你也很有可能不知道每个细节。

    Rookie
  • 一个月真的可以学会一门语言吗?

    知乎上总看到有人提这个问题, 我想转行,我要学多久才能学会,分享下我到经历,以便你评估一下自身来不来得及,别人是没办法帮你评估的。

    王炸
  • 创建Github远程仓库

    之后在在Repository name 填入 ZXTabBarController(你的远程仓库名) ,其他保持默认设置,

    周希
  • 预训练语言模型关系图+必读论文列表,清华荣誉出品

    Github 项目:https://github.com/thunlp/PLMpapers

    机器之心
  • GitHub 博客项目学习之接入GitHu登录

    限于篇幅原因源码以上传github: https://github.com/codesbull/community

    cherishspring
  • iOS PureLayout使用

    PureLayout是iOS Auto Layout的终端API,强大而简单。由UIView、NSArray和NSLayoutConstraint类别组成。 ...

    周希

扫码关注云+社区

领取腾讯云代金券