若依部署Nginx和Tomcat

Nginx部署

第一步：打包

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

第二步：将生成的dist文件 中的

拉到

第三步：配置nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            index  index.html;
            # 这里的配置 是防止 刷新后 找不到路径
            try_files $uri $uri/ @router;
        }
        # 这里的配置 是防止 刷新后 找不到路径
        location @router {
            rewrite ^.*$ /index.html last;
        }
        # 只写了 生产 环境
        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;
        }
    }

}

后端部署

可以直接打成jar包，双击或者命令运行

Tomcat部署

第一步：前端打包

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

第二步：拉到webapps

第三步：访问测试

访问：http://localhost:8080/dist/

可以看到已经 可以访问 若依的页面了

问题：一直等待

解决方法

将静态文件拉到webapps下面

效果

第四步：后端打包war

maven打包

或者去Maven本地仓库

第五步：放在webapps下面

第六步：启动tomcat看效果

访问：http://localhost:8080/ruoyi-admin/

访问：http://localhost:8080/dist

前后端无法通信

可以清楚看到验证码获取不到，说明前后端无法通信

解决方法

将原本的war包名字修改掉

以为前端访问的是prod-api这个请求路径

或者在打包前修改

测试环境：

或者

后端：

第七步：重启tomcat

可以正常访问了

出现问题：点击刷新404

问题出现在，若依采用的vue中的单页面，页面的变换是根据路由（routes）来变换的，在点击刷新时走的tomcat的目录路径，所以404

解决方案

第一步：前端打包时设置路由

export default new Router({
  mode: 'history', // 去掉url中的#
  base: '/apps/', // -----------设置这里 和 前端 打包后的包名一直，不一致 等打包成功修改包名
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

第二步：添加文件

在项目中添加WEB-INF文件夹，并在WEB-INF文件下创建web.xml

添加如下配置

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0"
         metadata-complete="true">

    <display-name>webapp</display-name>
    <description>
        webapp
    </description>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

重启后即可