RuoYi若依前后端分离版war包部署

一前言

若依官网：http://ruoyi.vip
若依代码下载：https://gitee.com/y_project/RuoYi-Vue

若依分离版使用的版本是V3.7.0，虽然官方文档部署写得挺好，但是自己实际部署操作过程中还是会遇到问题，验证码不通，访问不了后台等，就写一篇文章记录下。本次使用的是虚拟机安装的Linux系统。自行安装好环境JDK、Mysql、Redis和Nginx，并开放默认端口。

本人使用的版本如下：

JDK = 1.8 
Mysql = 5.7.0 
Redis = 4.0
Nginx = 1.18
Tomcat = 8
Linux = CentOS Linux release 7.9.2009 (Core)

二部署系统

VMware虚拟机安装好的Linux系统，本次使用xshell连接。

2.1 后端部署

2.1.1 部署到linux系统，代码下载下来需更改几个地方

1.修改ruoyi-admin模块pom.xml文件打包方式为war包。本次后端使用IntelliJ IDEA工具打开的。

2.修改ruoyi-admin模块下application.yml配置文件路径、redis如下：

3.修改ruoyi-admin模块下application-druid.yml配置数据库地址、账号和密码如下：

4.修改ruoyi-admin模块下logback.xml配置日志路径如下：

注：更改地址为服务器地址，需要在服务器建有文件夹。

2.1.2 打包上传

可以使用IntelliJ IDEA工具打包，或在ruoyi项目的bin目录下执行package.bat打包Web工程，生成war包文件。然后会在项目下生成target文件夹包含war。

将ruoyi-admin.war上传到服务器tomcat8下webapps中，本次通过Xftp上传。

进入tomcat8下的bin目录执行启动命令：./startup.sh，查看日志：tail -f ../logs/catalina.out，

等待启动完成。

在浏览器输入后端服务器地址：http://192.168.56.130:8080 ，出现如下图则表示后端部署完成。

2.2 前端部署

2.2.1 前端打包

前端可以使用Visual Studio Code、IntelliJ IDEA或WebStorm打开，本次使用Visual Studio Code打开，在下面终端处输入命令：npm install --registry=https://registry.npm.taobao.org 下载依赖。输入命令：npm run build:prod 打包。

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

将dist文件夹的静态文件发布到你的 nginx 或者静态服务器即可。本次放在虚拟机安装的Linux系统中/home/ruoyi/projects/ruoyi-ui目录下，如下图：

需要注意的是在dist目录的文件夹下新建WEB-INF文件夹，并在里面添加web.xml文件，配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
     <display-name>Router for Tomcat</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

2.2.2 Nginx配置

前期安装好的Nginx，现在可以进行配置

更改nginx.conf配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location / {
            root   /home/ruoyi/projects/ruoyi-ui;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

最后启动nginx

在浏览器输入IP地址：http://192.168.56.130 ，能进入出现如下图所示即部署成功。

验证码能正确显示出来，问题不大了，输入正确账号、密码和验证码登录

三注意事项

3.1 自行导入数据库

3.2 访问后台总是报404

总是访问不了后台，验证码出不来

这里是按照官网说的修改server.xml，Host节点下添加：

<Context docBase="" path="/" reloadable="true" source=""/>

就出现这种情况，T坑。

后面更改为自己后端应用路径即可，即使用根目录代替http://192.168.56.130:8080/ruoyi-admin

<Context docBase="/usr/local/tomcat8/webapps/ruoyi-admin" path="/" 
reloadable="true" source=""/>

一 前言

二 部署系统