利用Jenkins与Nginx实现前端项目自动构建与持续集成

发布时间：2025-11-05 10:55:13 来源：创站工坊 作者：IT科技

实现目标

本地push代码到GitHub，利用Webhook自动触发Jenkins上的实现构建动作，完成安装Node插件并且打包，前端然后通过Publish Over SSH插件，项目将打包出来的自动文件，部署到目标服务器上。构建

前期准备

Jenkins介绍

Jenkins是持续开源的，使用Java编写的集成持续集成的工具，在CentOS上可以通过yum命令行直接安装。利用Jenkins只是实现一个平台，真正运作的前端都是插件。这就是项目Jenkins流行的原因，因为Jenkins什么插件都有。自动

首先登录服务器更新系统软件

安装Java和Git

安装Nginx

出现Redirecting to /bin/systemctl start nginx.service。构建

说明Nginx已经启动成功了，持续访问http://你的ip/，如果成功安装会出来Nginx默认的欢迎界面：

安装Jenkins

Jenkins启动成功后默认的是8080端口，浏览器输入你的服务器IP地址加8080端口就可以访问了。站群服务器

输入cat /var/lib/jenkins/secrets/initialAdminPassword查看初始密码。

这里我们选择推荐通用插件安装即可，选择后等待完成插件安装以及初始化账户。

然后安装两个推荐的插件：Rebuilder、SafeRestart。

在Jenkins中安装NodeJs插件

因为我们的项目是要用到Node打包的，所以先在Jenkins中安装NodeJs插件，安装后进入全局工具配置，配置一个我们要用到的Node版本。

创建任务

点击创建一个新任务。

Jenkins关联GitHub项目地址：

选择构建环境并编写shell命令：

配置完成后点击立即构建，等待构建完，点击工作空间，可以发现已经多出一个打包后的dist目录。点击控制台输出可以查看详细构建log。

到这里已经实现了本地代码提交到GitHub，然后在Jenkins上点击构建，可以拉取代码并且打包，下一步实现打包后的dist目录放到目标服务器上。

安装Publish Over SSH插件，我们将通过这个工具实现服务器部署功能

安装完成后在系统管理-> 系统设置->Publish over SSH里设置服务器信息：

SSH Servers的配置：

高级配置：

这里配置的是账号密码登录，填写完后点击test，出现Success说明配置成功。

在刚才的testJenkins工程中配置构建后操作，选择send build artificial over SSH， 参数说明：

注意在构建中添加压缩dist目录命令：

填完后执行构建。成功后登录我们目标服务器发现test目录下有了要运行的文件：

访问域名发现项目可以访问了。

接下来实现开发本地push代码到GitHub上后，触发Webhook，Jenkins自动执行构建。

配置方法

在刚才的testJenkins工程中点击构建触发器中选择Generic Webhook Trigger，IT技术网填写token：

GitHub配置Webhook。

选择GitHub项目中的Settings->Webhooks>add webhook配置方式按上图红框中的格式，选择在push代码时触发Webhook，成功后会在下方出现一个绿色的小勾勾。

测试一下，把Vue项目首页的9900去了，然后push代码去GitHub，发现Jenkins中的构建已经自动执行。

查看页面也是ok的。

一套简单的前端自动化工作流就搭建完成，是选择代码push后在Jenkins中手动构建，还是push后自动构建，看公司情况使用。

最后

写的有点啰嗦，有错误的地方希望大家指出，也希望这篇文章对大家有帮助。

相关文章