情况
前端部署在nginx 后端部署在tomcat
系统前端服务器后端服务器前端项目架构后端项目架构win10nginx1.22.1tomcat9vue3ssmlinux 亲测! 情况同样实用。
部署
- 前端项目修改 项目下载地址 GIThub RuoYi-Vue3
- vite.config.js 基本不用动, 默认打包为文件夹名 dist , 不用dist可以自定义(我用的自定义)
- 前端.env.production 修改VITE_APP_BASE_API = 'tomcat下webapps 下项目文件夹名'
- nginx配置文件 重点
- 部署前端, 直接丢到nginx根目下了, 也可自定义.
- 配置文件配置 nginx.conf service配置
- server {
- listen 80; # 监听80端口，即HTTP请求
- server_name localhost; # 服务器名称为localhost
- root cookbook; # 全局根目录为cookbook，即服务器根目录下的文件夹
- index index.html index.htm default.htm default.html; # 全局默认的索引文件
- # Vue Router 配置
- location / {
- try_files $uri $uri/ @router; # 尝试匹配URI，如果找不到，则转到@router定义的位置
- index index.html; # 设置默认的索引文件
- }
- location @router {
- rewrite ^.*$ /index.html last; # 重写URI为/index.html，并标记为最后处理，防止陷入循环
- }
- location /ruoyi-admin {
- proxy_pass http://127.0.0.1:8080; # 将请求转发到本地8080端口
- }
- # 错误页面处理
- error_page 500 502 503 504 /50x.html; # 定义500、502、503、504错误的处理页面为50x.html
- location = /50x.html {
- root html; # 50x.html页面所在的目录为html
- }
- }
- win情况下 nginx启动关闭建议使用命令实行,这样配置生效比较轻易
- 启动 C:\Users\xxx\Desktop\nginx-1.22.1>start nginx
- 重启 C:\Users\xxx\Desktop\nginx-1.22.1>nginx.exe -s reload
- 制止 C:\Users\xxxx\Desktop\nginx-1.22.1>nginx.exe -s stop
配置来源参考 wsAdmin 的个人博客
- tomcat配置不用修改,直接将war放到webapps目次下
效果
此时革新页面 不报错 404
总结
前端部署在tomcat照旧nginx上? 将前端部署在 Nginx 上通常是更好的选择.
- 静态文件服务： Nginx 专注于快速和有效地提供静态文件，例如 HTML、CSS、JavaScript 和图像文件。与之相比，Tomcat 是一个 Java 应用服务器，不如 Nginx 专注于处理静态文件服从高。
- 性能和资源利用： Nginx 是一个轻量级的服务器，具有高性能和低内存斲丧。相比之下，Tomcat 是一个相对重量级的应用服务器，它大概会斲丧更多的系统资源。
- 静态文件缓存和压缩： Nginx 提供了强大的缓存和压缩功能，可以帮助提高前端资源的加载速度和用户体验。
- 负载均衡和反向代理： 假如需要负载均衡、反向代理或缓存静态资源，Nginx 提供了更灵活和强大的功能。它可以作为反向代理，将请求转发到多个后端服务器，以实现负载均衡和高可用性。
- 安全性： Nginx 提供了丰富的安全特性，可以帮助保护静态资源免受各种网络攻击。
nginx的 location /ruoyi-admin{ proxy_pass... } 作用
$uri阐明
$uri 指的是 http://localhost/index 的 /index
nginx请求过程案例阐明
- 用户请求: 用户在欣赏器中输入** http://localhost/index 。**
- Nginx监听端口80: Nginx监听到来自端口80的请求。
- 查抄匹配的server_name: 由于请求中的 server_name 是 localhost，所以这个server块匹配。
- 处理Vue Router配置: 由于请求是向SPA的前端路由发送的，Nginx会查抄Vue Router的配置。
- location / 部门用于处理大多数请求，其中 try_files 指令会尝试匹配"/index"文件,所以就找到了index.html，假如找不到，Nginx会尝试查找是否存在名为/index的文件夹, 再找不到则会重定向到Vue应用程序的入口点 index.html。
- 假如请求的"/index"能够在cookbook文件夹中查找文件，Nginx会直接返回该文件。
- 假如找不到该"/index"对应的文件/文件夹，它会实行 @router 部门的操作。
- @router部门的处理: 当前的请求不是一个直接的文件路径，因此Nginx会将请求重写到Vue应用程序的入口点 index.html，这是Vue Router将接管路由的地方。
- 代理到后端Java应用程序: 假如请求的URI是 /ruoyi-admin 开头的，Nginx会将请求代理到后端的Java应用程序，代理地址为 http://127.0.0.1:8080。
- 后端Java应用程序响应: 后端Java应用程序收到 /dashboard 的请求，并返回相应的数据或页面给Nginx。
- Nginx将响应返回给客户端: Nginx收到来自后端Java应用程序的响应后，将其返回给用户的欣赏器。
- 用户看到响应: 最终，用户在欣赏器中看到了相应的页面或数据。
详细解释 rewrite ^.*$ /index.html last;
- rewrite: 这是 Nginx 提供的一个指令，用于重写 URI。
- ^.*\(**: 这是一个正则表达式，匹配任意字符（**.***）并表示从开头（**^**）到结尾（**\)）的字符串，即匹配任意 URI。
- /index.html: 这是指定的重写目的，即将匹配到的 URI 重写为 /index.html。
- last: 这是一个标志，表示完成重写后，Nginx 将继续处理 URI。在这个具体的配置中，last 标志的作用是告诉 Nginx，假如这条重写规则匹配成功，那么不再继续查找其他的匹配规则，而是直接将重写后的 URI 交给后续的 Nginx 配置举行处理。
- 综合起来，这个 rewrite 指令的作用是将所有请求的 URI 都重写为 /index.html，这通常用于单页应用（SPA）的前端路由。具体地说，当用户访问一个不存在的路径时，Nginx 会将请求重写为 /index.html，然后返回给前端处理，由前端路由器（如 Vue Router 或 React Router）根据路由规则决定加载哪个页面。这样可以实现前端路由和页面渲染的逻辑，保持页面的单页应用体验。
index index.html; # 设置默认的索引文件
index index.html; 指令告诉 Nginx 在处理请求时，假如请求的 URI 是一个目次而不是具体的文件时，应该尝试返回哪个文件作为默认索引文件。例如，当用户访问 http://example.com/ 而不是具体的文件时，Nginx会尝试返回 index.html 文件作为默认索引文件。
404题目, 项目启动后革新 404; 参考以上步骤.
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
