vue-element-admin二次开发前后端部署

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

为了使运维人员更简单、方便的部署我们前端项目，这里我们使用Jenkins流水线构建前端项目；每次版本更新时，只需要使用Jenkins构建前端项目，就可以自动更新到服务器，这样可以使不懂技术的人都能部署发布项目。

一、前端部署

1.Jenkins配置

1.1去gitlab上拉取前端代码

1.2构建环境

	配置自己前端的Node环境，选择自己项目使用的版本，其他的选择默认选项

1.3下载前端的依赖环境

npm install --registry=https://registry.npm.taobao.org，也可以使用yarn等方式下载依赖，这里我们使用npm

在Jenkins的workspace的工作空间下就可以看到我们下载的依赖node_modules前端项目依赖环境

1.4构建生产运行环境

npm run build:prod执行完这个命令，在我们的目录下就会产生一个dist的文件，（dist为你的应用的编译版本）

1.5使用nginx-1.25.2部署项目

C:\SoftwareDownloads\nginx-1.25.2\conf进入nginx的配置文件

配置dist文件信息，有两种方式

第一种把dist文件夹放在Nginx目录下:配置信息相对路径为 root dist

第二种把dist文件夹不移动到Nginx目录下的话为绝对路径，我这里的是C:\Users\Administrator.jenkins\workspace\qiankunbag-vue\dist这个路径，配置就为root C:\Users\Administrator.jenkins\workspace\qiankunbag-vue\dist

1.6xcopy命令

每次更新代码，版本是都要重新生成dist文件，这里我们使用xcopy .\dist C:\SoftwareDownloads\nginx-1.25.2\dist /E /Y > nul
xcopy .\node_modules …\node_modules /E /Y /I > nul 命令覆盖原来的dist文件，这样我们只需要使用Jenkins构建项目，就可以自动更新部署了。

二、后端部署

2.1使用Jenkins配置流水线，可以参考前面前端的配置

2.2找到后端运行jar包

只是我的后端启动jar包

2.3运行jar包

这里我是将他复制在一个新的文件中

为了易操作，这里我使用xcopy拷贝文件，用bat命令直接点击启动jar包

提示：

当客户端发送 http://example.com/goldrope 请求时，Nginx 会将该请求通过代理服务器发送到 http://127.0.0.1:9090/goldrope，然后将目标服务器的响应返回给客户端。
这种代理服务器的配置方式可以让我们在实际应用中灵活地控制请求的转发，例如可以将请求转发到不同的服务器，分发负载等。同时，也可以在代理服务器中控制请求的访问权限、缓存、协议转换等功能。