若依部署Nginx和Tomcat全过程

 更新时间:2024年12月28日 16:17:10   作者:狂暴的小祥  
文章总结了两种部署方法:Nginx部署和Tomcat部署,Nginx部署包括打包、将dist文件拉到指定目录、配置nginx.conf等步骤,Tomcat部署包括前端打包、将文件拉到webapps目录、访问测试等步骤,文章还解决了前后端无法通信和404问题

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>

重启后即可

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nginx如何实现pathinfo模式的方法详解

    Nginx如何实现pathinfo模式的方法详解

    pathinfo是伪静态的一种,对于用过thinkphp的朋友们来说应该都不陌生,下面这篇文章主要给大家介绍了关于Nginx如何实现pathinfo模式的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-09-09
  • 高性能软件负载OpenResty介绍和安装使用详解

    高性能软件负载OpenResty介绍和安装使用详解

    OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项,这篇文章主要介绍了高性能软件负载OpenResty介绍和安装,需要的朋友可以参考下
    2023-12-12
  • nginx启动命令和默认配置文件的使用

    nginx启动命令和默认配置文件的使用

    这篇文章主要介绍了nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • 聊聊Django+uwsgi+nginx服务器部署问题

    聊聊Django+uwsgi+nginx服务器部署问题

    这篇文章主要介绍了Django+uwsgi+nginx服务器部署的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • Web服务器-Nginx-高并发问题

    Web服务器-Nginx-高并发问题

    Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性
    2025-08-08
  • nginx如何根据报文里字段转发至不同地址

    nginx如何根据报文里字段转发至不同地址

    要在 Nginx 中根据 POST 请求的 JSON 负载中的 id 字段的值进行转发,你可以使用 Nginx 的 ngx_http_lua_module 模块,这个模块允许你在 Nginx 配置中使用 Lua 脚本,本文介绍nginx如何根据报文里字段转发至不同地址,感兴趣的朋友一起看看吧
    2024-12-12
  • nginx try_files指令判断文件是否存在实例

    nginx try_files指令判断文件是否存在实例

    这篇文章主要介绍了nginx try_files指令判断文件是否存在实例,本文用一个实际需求讲解try_files指令的使用,并给出配置示例,需要的朋友可以参考下
    2015-02-02
  • nginx+keepalived双主模式双主热备方式

    nginx+keepalived双主模式双主热备方式

    本文详细介绍了双主模式下Nginx和Keepalived的配置和测试,双主模式解决了单主备模式中资源利用率低的问题,通过两个虚拟IP和两个VRRP实例实现互相备份,配置文件包括nginx和keepalived的配置,以及检测脚本,测试部分验证了VIP的漂移和Nginx服务的自动恢复
    2026-01-01
  • 为Nginx动态添加模块的方法

    为Nginx动态添加模块的方法

    这篇文章主要介绍了为Nginx动态添加模块的方法,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • Debian7编译安装nginx简明教程

    Debian7编译安装nginx简明教程

    这篇文章主要介绍了Debian7编译安装nginx简明教程,本文直接给出操作命令和步骤,需要的朋友可以参考下
    2015-03-03

最新评论