搭建 Jenkins+nginx 的Node+vue的前端自动化部署

最新推荐文章于 2025-10-30 15:40:31 发布

原创最新推荐文章于 2025-10-30 15:40:31 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jenkins #前端自动化部署

自动化部署同时被 2 个专栏收录

3 篇文章

订阅专栏

Jenkins

2 篇文章

订阅专栏

本文介绍了如何使用Jenkins结合nginx搭建前端自动化部署流程，包括安装nginx、配置Jenkins、安装Node.js环境、配置系统插件、创建Jenkins项目以及详细部署步骤。通过Docker和Portainer简化操作，实现一键部署。

搭建 Jenkins+nginx 的Node+vue的前端自动化部署

主要用的Jenkins进行前端的自动化部署，环境以及工具使用的是：Docker 以及 Portainer ；

文章目录

- 搭建 Jenkins+nginx 的Node+vue的前端自动化部署

安装nginx及配置

1- 使用Portainer的App Templates 进行创建容器。【点一下就可以了】

由于这个模板进行创建的，真的里面的Linux版本是啥的工具都没有装的啊！ (ノ｀Д)ノ。。

2- 安装SSH - 用于之后传输前端打包好的文件

docker exec -it -u root nginx bash
mkdir /u01/nginx
apt-get update
apt-get install ssh
passwd  修改密码：123456
vim /etc/ssh/sshd_config
	PubkeyAuthentication yes #启用公钥私钥配对认证方式
    AuthorizedKeysFile .ssh/authorized_keys #公钥文件路径
    PermitRootLogin yes #root能使用ssh登录
:qw

service ssh restart
ps -ef|grep ssh  # 验证是否真正开启.
root      1211     0  0 09:27 ?        00:00:00 /usr/sbin/sshd
root      1238    31  0 09:29 ?        00:00:00 grep ssh

3- 配置Nginx ，前端部署路径以及 api服务代理【因为api服务于前端不在一个容器内】

whereis nginx 
nginx: /usr/sbin/nginx /usr/lib/nginx /etc/nginx /usr/share/nginx
cd /etc/nginx/conf.d
vim default.conf  调整如下：
	root /u01/nginx/web/ruoyi-ui;  # 此目录为Jenkins打包后传过来的目录
	location ^~ /stage-api/ {  
		# 这里stage-api 作为后端应用访问路径前缀，需要在服务端配置一下的。
		# 因为我node项目和前端项目是部署在同一台服务器上的，
		# 所以地址用的是192.168.1.165:8080，如果是不同服务器可自行配置服务器端项目地址
		   	proxy_pass http://192.168.1.165:8080;  
		}
	location / {
	    #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        try_files $uri $uri/ @router;
        index  index.html index.htm;
    }
    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }
:wq
nginx -s reload

到这里，Nginx的配置就这些了。这里只是做测试使用的情况，nginx配置的比较简单，也没有https啥的东西。

注意点，这个容器就只是作为nginx的，它的进程编号为1，如果关闭，容器就退出了的。

安装Jenkins及配置

这个是最主要的东西，配置以及以后的操作，都是用这个了。点一下就部署好，贼方便的。

1- 安装Jenkins本身

一样用的Portainer的模板进行安装的，所以进去之后一些的工具是要手动安装的。

# 安装Jenkins   Portainer的App Templates 中点一下 罒ω罒 
docker exec -it Jenkins bash
cat var/jenkins_honm/....  
# 获取key，然后使用Jenkins界面推荐插件安装 这里不过多的说明了，反正很简单，点点就可以了
# 设置用户 admin / 123123   
# 访问地址URL:http://192.168.1.180:32770/   这里的端口映射可以在Portainer中查看到

2- 系统安装NodeJS的环境

因为前端的打包构建，依赖于Node，所有环境是必须安装的。

# 由于必要的工具没有 所以就直接用root用户登入容器，进行操作了
docker exec -it -u root Jenkins bash
apt-get update 
apt-get install vim 

# 正式开始安装 
cd var/jenkins_home/node_home   # 此目录可以随意啦
wget https://cdn.npm.taobao.org/dist/node/v14.15.0/node-v14.15.0-linux-x64.tar.xz  # 此为官网包的地址，版本可依据情况而定
tar -xvJf   ***.tar.xz
# nodejs路径: /var/jenkins_home/node_home/node-v14.15.0-linux-x64

# 编辑系统环境，加载NodeJS 
vim /etc/profile
	#在末尾添加
	export NODE_HOME=/nodejs路径
	export PATH=$PATH:$NODE_HOME/bin 
	export NODE_PATH=$NODE_HOME/lib/node_modules
#保存并退出
:wq!
# 生效
source /etc/profile
# 检查环境是否安装成功
node -v
v14.15.0
npm -v
6.14.8

3- Jenkins 系统插件及环境变量

这里需要安装的Jenkins的插件有：NodeJS、Publish Over SSH ，这两个。

1、在Jenkins主界面——>系统管理——>插件管理，安装NodeJS、Publish Over SSH插件。
2、在Jenkins主界面——>系统管理——>系统配置，找到Publish over SSH，对SSH进行配置让其连接远程服务器
3、NodeJs 配置在全局工具配置中。

# ---------SSH 配置----------
配置SSH 到本台物理机Linux的ssh连接：docker-nginx ip :172.17.0.6  
Passphrase 服务器密码 ： 123456
ssh-servers：
	name:nginx
	hostname：172.17.0.6  
	username:root
	remote Dirctory:/u01/nginx
	
完成配置后点一下test，需要显示：Success；

# ---------NodeJS 配置-------
这里安装的NodeJS创建也是要配置一下，连接到本地机子的NodeJS的安装路径的。
在构建项目的时候，选择项目类型为Node的项目之后会有一个，如下的选项：
	这里的“NodeJS Installation”是下拉选择的，需要提前在如下地方添加：
系统管理->全局工具配置->NodeJs下面
# 感觉上一个步骤的nodeJS也可以在这里的时候，自动安装的  ╮(╯_╰)╭

实例配置图：

在这里插入图片描述

4- 创建Jenkins的项目

配置的重点在于构建，使用的是目录下使用Node的npm进行构建，然后打包。再使用SSH发送到目标nginx的机子去，完成自动部署。

1. 创建自由项目
2. 丢弃就的构建 - 按自己的需求随便了，╮(╯_╰)╭  不是重点
3. 源码管理 - 选择Git
	1.Repository URL ： 项目Git路径 ,例如：https://gitee.com/smallhang/RuoYi-Vue.git
	2.Credentials ： 如果为私人项目，则需要用户密码
	3.指定分支：*/master   【此为默认，可按需求调整实际项目分支】
	4.源码库浏览器：自动
4. 构建触发器 - 按项目需要选择 （我这里仅作为测试，啥都不选）
5. 构建环境 - Provide Node & npm bin/ folder to PATH
	1. NodeJS Installation ： 这个就是上面安装NodeJS插件需要配置的，本机NodeJS安装路径全局变量
	2. 其他按需默认
6. 构建-重点
	1.执行shell ，脚本内容如下：
		#打印环境变量
        echo $PATH
        #检查NodeJS环境
        node -v
        npm -v
        #默认在Git项目目录，我的前端代码都在ruoyi-ui目录下
        cd ruoyi-ui
        #防止报chromedriver@2.37.0 install: `node install.js错误
        # npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
        npm install --registry=https://registry.npm.taobao.org
        #安装依赖
        # npm install
        #打包
        npm run build:stage
        cd dist
        #rm -rf bodac.tar.gz #删除上次打包生成的压缩文件，打包的时候会自动删除整个dist文件夹无需这一步
        #将dist目录下所有文件打包成tar包
        tar -zcvf ruoyi-ui.tar.gz *
        #返回上级目录
        cd ../
	2.执行Send files or execute commands over SSH 
		1.SSH Server Name：【选择之前配置测试成功的连接nginx服务器的选项。】
		2.Transfers Set-Source files ：ruoyi-ui/dist/*.tar.gz 【打包dist的目录】
		2.Transfers Set-Remove prefix：ruoyi-ui/dist/ 【移除目录，该目录不知道为什么移除╮(╯_╰)╭】
		3.Transfers Set-Remote directory：web/ 【相对于系统配置SSH的Remote directory目录】
		4.Transfers Set-Exec command： 【在远程服务-nginx中执行的，操作为解压，更新重启nginx。】
			#打开远程目录
            cd /u01/nginx/web
            #移除之前打包的目录
            rm -rf ruoyi-ui
            #创建新目录
            mkdir ruoyi-ui
            #解压tar包到bodac目录
            tar -zxvf ruoyi-ui.tar.gz -C ruoyi-ui/
            #移除tar包
            rm -rf ruoyi-ui.tar.gz
            nginx -s reload
7. 完成
8. 测试去了。。。。
访问：http://192.168.1.180:32772/  就可以进入系统了  o(￣▽￣)ｄ