Jenkins实现前端项目自动化集成打包部署

Guakin_Huang 发布于2019-08-21 16:26 / 542人阅读

摘要：原博客地址实现前端项目自动化集成打包部署掘金地址前言以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。验证提交代码，成功自动打包部署提交代码，观察界面，出现构建任务，构建完成之后收到邮件通知。

原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins实现前端项目自动化集成打包部署/
掘金地址:https://juejin.im/entry/59b40bd36fb9a00a5474c3c7

前言

以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。

这种方式确实有点low并且效率也不高。
自从用了Jenkins持续集成工具，写前端项目越来越工程化，再也不用担心忘记部署项目，也不用烦躁每次打包压缩后还要部署多个服务器和环境，更开心的是每次家里写完代码，不用远程公司部署项目，提交代码后自动会为你部署。
本文基于React的前端项目和GitLab的代码仓库以及Windows(其他系统平台大同小异)，简述Jenkins实现自动部署的配置。

安装Jenkins

前提：已配置好java环境

1.下载对应的安装程序点我进入下载网站或直接下载war包

2.根据提示安装完成（默认端口是8080）

war包启动方式： java -jar jenkins.war --httpPort=8080（端口自定义），然后访问http://localhost:8080

3.查看插件

点开系统设置的插件管理页面，如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：http://mirror.xmission.com/je...
并且点击提交和立即获取

4.返回可选插件，选择如下插件安装（如果已安装，请忽略）

1.Publish Over SSH
2.GitLab Plugin
3.Email Extension Plugin

提前设置配置

为了方便新建任务，所以先将一些设置配置好，进入系统管理系统设置。

1.配置Publish over SSH

在Publish over SSH处点击增加，添加SSH server，并且选择高级设置，设置相应的ip,用户名和密码等。（其他选项可不用管）

2.配置邮件通知，可通过勾选发送邮件测试是否配置成功

新建任务 1.点击新建，输入名称，选择自由风格的项目

2.配置源码

选择Git，并填上gitlab项目克隆地址，用户密钥以及分支

3.配置构建触发器

勾选Poll SCM即可，其他可忽略，默认提交代码到相应的分支触发该任务

4.配置构建

增加构建步骤选择Execute shell

5.配置构建后操作

增加构建后操作，选择Send build artifacts over SSH。即上述操作全部完成并自动生产了部署文件，该步骤将部署文件上传到之前的SSH服务器（Linux服务器），并执行你想让他执行的命名，部署多个服务器及平台，选择添加server并完成相应的配置

配置后再增加构建后操作，选择Editable Email Notification。根据提示配置需要通知的邮箱，其他可默认。然后选择高级设置，配置失败和成功邮件通知。

绑定GitLab Web hooks

添加web hook. http://jenkins-server/gitlab/... 需要填上的固定格式的URL地址，把jenkins-server替换成对应的Jenkins访问地址，注意：如果是localhost，需要换成ip地址。
添加完之后，点击Test Hook。此时Jenkins界面构建队列出现某个任务正在执行，表示配置成功。

验证提交代码，成功自动打包部署

提交代码，观察Jenkins界面，出现构建任务，构建完成之后收到邮件通知。

最后，推荐给大家前端交流QQ群：264591039。欢迎来这里和大家一起畅聊大前端的一切~

GPU云服务器云服务器 Jenkins自动化部署 maven项目打包部署到云服务器 web项目打包部署到服务器上 jenkins持续集成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88545.html

使用Jenkins持续集成前端项目并自动化部署到Nginx服务器

摘要：上午折腾了一下持续集成，由于公司使用自己搭建的服务器来进行代码管理，因此这里是针对服务器来进行的配置，后面稍微介绍了下针对管理的项目的配置之前项目每次修改之后都需要本地一次手动发布到服务器上方便测试和产品查看，有了持续集成之后只要或者提交之上午折腾了一下Jenkins持续集成，由于公司使用自己搭建的svn服务器来进行代码管理，因此这里Jenkins是针对svn服务器来进行的配置，后面...

liukai90 2019-07-25 14:11 评论0 收藏0
前端开发团队的工具链

摘要：官网地址推荐指数颗星推荐理由自动化部署和集成部署的好工具，操作简单，显示友好，具备多种插件，应有尽有，支持多类型语言的项目集成和部署。官网地址如果你有其他好用的工具，不妨也分享一下原博客链接前端开发团队的工具链汇集前端开发团队中经常使用的好工具，分享给大家！注：都是开源工具 showImg(https://segmentfault.com/img/remote/1460000019...

xcold 2019-08-26 10:24 评论0 收藏0
Jenkins集成Docker镜像实现自动发布

摘要：集群环境的部署方式使用集群管理工具通过版本新增文件实现滚动升级容器等同于应用的部署 1. 思路&流程 Jenkins集成Docker镜像实现自动发布与Jenkins发布mavne项目思路一样总体流程为：Jenkins 拉去远端源码 —— gitl实现应用打包 —— jenkins本地把应用程序打包进Docker镜像 ...

defcon 2019-06-28 17:48 评论0 收藏0
一些小团队的自动化运维实践经验

摘要：行业内各巨头的自动化运维架构都各种功能各种酷炫，如下图，让人可望不可及。面对这么多问题，我就想啊，如何在低成本情况下实现自动化运维。自动扩缩容通过配置告警规则，调用相应就可以实现实战以上就是笔者关于自动化运维的一些实践。行业内各巨头的自动化运维架构都各种功能各种酷炫，如下图，让人可望不可及。现在最终的样子大家都知道了，但问题是如何根据自己团队当前的情况一步步向那个目标演进？笔者所在团队，三...

princekin 2019-04-25 17:22 评论0 收藏0
fir.im weekly - 「持续集成」实践教程合集

摘要：来这里看看的工程师如何进行持续集成与持续部署。主要介绍了豆瓣移动持续集成和测试相关实践，用工具化自动化社会化测试来解决遇到的问题，将打包发布环节自动化。这期的持续集成实践分享就到这里。我们常看到许多团队和开发者分享他们的持续集成实践经验，本期 fir.im Weekly 收集了 iOS，Android，PHP ，NodeJS 等项目搭建持续集成的实践，以及一些国内外公司的内部持续集成...

A Loity 2019-06-27 13:42 评论0 收藏0