【若依】前后端分离版本部署到Tomcat完整过程

若依前后端分离版本部署到Tomcat

2022/8/10 周三

---

在本地开发完成后，需要把若依项目（多模块、前后端分离版本）部署到生产环境，基本是按照若依文档 环境部署|RuoYi 的步骤来，根据自己实际部署时的情况整合了一些细节。

1. 后端部署准备

配置文件在 ruoyi-admin 模块，ruoyi-admin\src\main\resources目录下，根据需求修改：
（1）application.yml 修改访问后端端口
（2）application-druid.yml 修改正式环境数据库
（3）logback.xml 修改日志存放路径

2. 后端打包部署

双击执行bin目录下的package.bat

会把整个项目打包到 \ruoyi-admin\target：

把jar包放到服务器 ，在对应目录的cmd里输入 java –jar ruoyi-admin.jar 就可以启动后端了。

3. 前端部署准备

都在ruoyi-ui模块里，主要需要修改图中圈出来的两个配置文件：

（1）.env.production 配置 后端接口地址

（如果不需要在这里配置页面标题可以删掉1、2行）

在VUE_APP_BASE_API配置要访问的后端接口的地址，端口与第1步application.yml里配的一致。

（2）vue.config.js 配置访问 前端静态资源 的路径：

这个主要是看到时候Tomcat准备怎么配置，等下还会说到。比如我把前端资源放在webapps下的app目录，publicPath这里就要修改为如图所示的 /APP/

下边的outputDir也可以一并改成app，是前端打包生成的目录名称。

另外，在这个文件中还有几处与端口相关的配置，都是开发时用的配置，这时候不要去改动了。

4. 前端打包部署

在ruoyi-ui目录下的cmd执行打包到正式环境的命令：
npm run build:prod

包也会打到这里：

把app文件夹放到 服务器Tomcat 的webapps目录下：

再次强调，放到webapps的话，这个文件夹名“app”，要与vue.config.js里的publicPath配置一致，否则会找不到前端的静态资源。

5. Tomcat配置

请参照若依文档：环境部署|RuoYi

（1）修改server.xml，Host节点下添加Context节点，这一步如果之前加过Context，应该就不需要再加了

（2）解决页面刷新就跳转404的问题：app目录下新建WEB-INF文件夹，并在里面添加web.xml文件，内容复制若依文档里的

6. 启动Tomcat服务

由Tomcat首页的URL后面加 /app访问页面，比如 localhost:8080/app

注意：我还遇到一个问题（也可能是我的网络等其他原因），在第3步前端部署准备时，如果.env.production里写的localhost:xxxx，就只能用localhost访问，ip地址访问不到；最好配置时就配 ip地址:xxxx。