Jenkins实现前端项目自动化集成打包部署
2021-03-05 22:53:45
Jenkins实现前端项目自动化集成打包部署
Jenkins是一个开源的自动化服务器，广泛用于持续集成和持续部署。通过Jenkins，可以实现前端项目的自动化打包和部署，从而提高开发效率，减少手动操作带来的错误。以下是基于React前端项目、GitLab代码仓库以及Windows系统（其他系统平台配置大同小异）的Jenkins自动化部署配置步骤。
一、安装Jenkins
下载Jenkins：
访问Jenkins官方网站下载页面，下载对应的安装程序或直接下载war包。
安装Jenkins：
根据提示完成安装，默认端口是8080。
如使用war包，可通过命令行启动：java -jar jenkins.war --httpPort=8080（端口可自定义），然后访问
http://localhost:8080。
二、配置Jenkins
查看插件：
点开系统设置的插件管理页面，如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：
http://mirror.xmission.com/...（具体URL根据实际情况选择），然后点击提交和立即获取。
安装必要插件：
选择并安装以下插件：Publish Over SSH、GitLab Plugin、Email Extension Plugin。
三、提前设置配置
配置Publish over SSH：
在系统设置中找到Publish over SSH，点击增加，添加SSH server，并选择高级设置，设置相应的IP、用户名和密码等。
配置邮件通知：
在系统设置中找到邮件通知，配置SMTP服务器，并通过勾选发送邮件测试是否配置成功。
四、新建任务
创建新任务：
点击新建，输入任务名称，选择自由风格的项目。
配置源码管理：
选择Git，并填写GitLab项目克隆地址、用户密钥以及分支。
配置构建触发器：
勾选Poll SCM，设置定时检查代码库是否有更新（如H/5 * * * *表示每5分钟检查一次）。
配置构建：
增加构建步骤，选择Execute shell，并输入打包命令（如npm install && npm run build）。
配置构建后操作：
增加构建后操作，选择Send build artifacts over SSH，将打包好的文件上传到SSH服务器（Linux服务器），并执行相应的部署命令。
可添加多个服务器及平台，选择添加server并完成相应的配置。
再增加构建后操作，选择Editable Email Notification，配置需要通知的邮箱，并设置失败和成功邮件通知。
五、绑定GitLab Web hooks
- 添加Web Hook：
在GitLab项目设置中找到Web Hooks，添加新的Web Hook。
URL格式为：
http://jenkins-server/gitlab/build_now/项目名称，将jenkins-server替换为对应的Jenkins访问地址（注意：如果是localhost，需要换成IP地址）。添加完成后，点击Test Hook，此时Jenkins界面构建队列应出现正在执行的任务，表示配置成功。
六、验证提交代码，成功自动打包部署
提交代码：
在本地开发环境中提交代码到GitLab。
观察Jenkins界面：
提交代码后，观察Jenkins界面，应出现构建任务。
构建完成后，应收到邮件通知。
通过以上步骤，即可实现Jenkins对前端项目的自动化集成打包部署。这不仅提高了开发效率，还减少了因手动操作带来的错误，使开发流程更加顺畅和可靠。
热门标签
