Windows系统下通过nginx配置多项目

文章目录

  • 前言
  • 大概思路
  • 实际操作记录:
    • 查看nginx 错误日志
    • 问下AI
    • 注意点:
  • 当访问域名根路径时,重定向到/pc
  • 总结


前言

在windows电脑启动一个nginx 测试配置多前端项目,一个pc端(vue3+ts+vite ,history路由),一个mobile端(vue3+ts+vite ,hash路由)。


大概思路

在这里插入图片描述

实际操作记录:

在这里插入图片描述

在这里插入图片描述

查看nginx 错误日志

关键语句:rewrite or internal redirection cycle while internally redirecting to “/index.html”, client: 127.0.0.1, server: localhost, request: “GET /favicon.ico HTTP/1.1”, host: “localhost:9999”, referrer: "

问下AI

这个错误信息表明Nginx在处理请求时发生了重定向循环,具体来说是在尝试内部重定向到/index.html时陷入了循环。问题发生在对/favicon.ico的请求上,从错误日志中的referrer可以看出,这个请求是从http://localhost:9999/pc发起的。

原因在于你的Nginx配置中try_files指令的设置可能不够精确,尤其是在处理静态资源时。当Nginx尝试访问一个不存在的资源(在这里是/favicon.ico),它会按照try_files指令进行查找。如果配置中没有恰当地处理这种情况,导致它不断地尝试重定向到/index.html,就形成了一个重定向循环。

根据上面的意思先把try_files这一行都注释掉。

杀掉全部的nginx的进程,这个本地用还好。正式环境谨慎使用,以免删掉别的nginx进程。

taskkill /f /im nginx.exe

/f:强制杀死
/t:进程树

语法检查:

nginx -t

启动:

start nginx

这时候发现404,也就是路径匹配有问题。
在这里插入图片描述

这里主要root的路径名配置错误了。Nginx 的 root 指令不接受相对路径,它要求一个绝对路径。这是因为 root 指令定义了文件系统的根目录,Nginx 使用这个根目录与请求的URI相结合来定位文件。如果提供了相对路径,Nginx 将无法正确解析并找到文件,可能会导致意想不到的行为或者错误。

例如,你不应该这样配置:

root html/pc;

而是应该提供一个从系统根目录(如Linux的 / 或Windows的 C:\ 开始的)绝对路径,像这样:

root /var/www/html/pc;  # Linux 示例
root C:\nginx-12.0\html\pc;  # Windows 示例

root 路径改了后,应该是对的,但还是404,查看路径, CreateFile() “C:\nginx-1.24.0/html/50x.html” failed (2: The system cannot find the file specified), client: 127.0.0.1, server: localhost, request: “GET / HTTP/1.1”, host: “localhost:9999”

这个错误信息表明Nginx在尝试访问自定义错误页面50x.html时找不到文件。当你修改了root路径之后,所有通过root指定的文件路径都会受到影响,包括错误页面。错误信息中显示的路径是C:\nginx-1.24.0/html/50x.html,但Nginx没有在那里找到这个文件。

问了AI:
为了解决这个问题,你需要确保几个方面:

  1. 确保50x.html文件存在:检查你的文件系统中确实有一个名为50x.html的自定义错误页面文件,并且它位于你新设置的root路径下。如果之前配置中默认寻找的50x.html是在其他地方,你需要将这个文件复制或移动到新指定的html目录下。

  2. 检查Nginx配置:在Nginx配置文件中,如果有专门对错误页面进行配置的地方(比如使用error_page指令),确保这些配置与新的root路径相匹配。例如,如果错误页面应该位于html目录下,且你的root已经是C:\nginx-1.24.0/html,那么在error_page指令中指定相对路径(如error_page 500 502 503 504 /50x.html;)即可,无需包含完整的路径。

  3. 重新加载配置:每次修改完Nginx配置文件后,都需要重新加载或重启Nginx服务以使改动生效。使用命令nginx -s reload进行重新加载。

原来是50x.html 这个被我移动了位置。移动对了以后。报错500
错误log:
The filename, directory name, or volume label syntax is incorrect), client: 127.0.0.1, server: localhost, request: “GET /pc HTTP/1.1”, host: “localhost:9999”

解决
root “C:/nginx-1.24.0/html/pc”;
双引号后,注意是/

配置后终于跳转到我的项目的index.html。但是vite项目的配置没有所以 aseet 那些文件缺少前缀,例如下面给我加了pc后,assets也应该跟着加上。

在本地测试:
在这里插入图片描述
加上路径pc/测试一下,可以打开。
在这里插入图片描述

报错log
C:/nginx-1.24.0/html/pc/login" failed (2: The system cannot find the file specified), client: 127.0.0.1, server: localhost, request: “GET /login HTTP/1.1”, host: “localhost:9999”, referrer: http://localhost:9999"

Nginx试图访问C:/nginx-1.24.0/html/pc/login这个路径,但没有找到对应的文件或目录。如果您的Vite项目是用来处理这些动态路由(如/login),login是我vite项目的路由。所以猜想进入index后 应该有index 自己处理。

配置Nginx反向代理:在Nginx配置中,为Vite项目设置一个location块来处理动态路由。

```nginx
location / {
    # 尝试直接服务静态文件
    try_files $uri $uri/ /index.html;

}
```

加上 try_files $uri $uri/ /index.html; 后成功加载login页面。

注意点:

在这里插入图片描述

try_files 写在 index index.thml index.htm 下面。history模式的时候会影响到。mobile用的是hash模式 没有影响。

上面配置后 写http://localhost:9999/pc/login 能正确跳转,但是http://localhost:9999/ 这样无法跳转。
加多一个补丁:

当访问域名根路径时,重定向到/pc

     server {
       listen       9999;
       server_name  localhost;

       #charset koi8-r;

       #access_log  logs/host.access.log  main;

      # 当访问域名根路径时,重定向到/pc/
   location = / {
       return 301 http://$host:9999/pc;
   }


        location /pc {
           alias   "C:/nginx-1.24.0/html/pc";
           index  index.html index.htm;
           try_files $uri $uri/  /pc/index.html;
           gzip_static on;
       }
      
      location /mobile {
           alias   "C:/nginx-1.24.0/html/mobile";
           index  index.html index.htm;
           try_files $uri $uri/  /mobile/index.html;
           gzip_static on;
       }
       # 公共api调用
       location ~*/(.*)Api/ {
           proxy_pass http://xxxx:8082;
       }


       #error_page  404              /404.html;

       # redirect server error pages to the static page /50x.html
       #
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }

这里添加pc二级目录后,前端项目路由的重定向也需要修改。用于dev环境。
在这里插入图片描述
上面的配置后,可以正确跳转pc与mobile项目了。还需要处理下面的情况
在这里插入图片描述


总结

记录单个端口下,利用nginx部署 pc前端项目(history模式路由)与mobile前端项目(hash模式路由)其中的修改。

参考:
https://blog.csdn.net/weixin_43422861/article/details/134289285
https://juejin.cn/post/7143053956850122783
https://segmentfault.com/a/1190000041955546

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/612008.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue3专栏项目 -- 二、自定义From组件(下)

需求分析: 现在我们还需要一个整体的表单在单击某个按钮的时候可以循环的验证每个input的值,最后我们还需要有一个事件可以得到最后验证的结果,从而进行下一步的操作 如下,我们应该有一个form表单包裹着全部的input表单&#xf…

【C语言】整数和浮点数在内存中的存储

大家可能在学习的时候会经常疑惑数据在内存中是怎样存储的,今天用一篇博客给你讲清楚!!!从此不再疑惑!!! 文章目录 1. 整数在内存中的存储2. 大小端字节序和字节序判断2.1 什么是大小端2.2 为什…

[VulnHub靶机渗透] Hackademic: RTB1

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收…

day2_greedyIntervalsLRU/LFU

二、贪心算法之区间调度问题 0.计算一个区间集合中无重复的区间的最大数量(模板) public int intervalSchedule(int[][] intvs) {if (intvs.length 0) return 0;// 按 end 升序排序Arrays.sort(intvs, (a, b) -> Integer.compare(a[1], b[1]));// 至少有一个区间不相交in…

Baidu Comate 编程插件:提升开发效率的利器

文章目录 引言简介目的 Baidu Comate插件概述定义与功能市场现状竞品分析 安装与配置VsCode 安装:注意事项 版本选择 核心特性详解功能介绍代码生成实时续写错误纠正 使用体验体验地址 引言 简介 基于文心大模型,结合百度积累多年的编程现场大数据和外…

专业做护眼灯的有哪些品牌?几款专业儿童卧室灯品牌分享

在当今时代,我们观察到一个不容忽视的现象:孩子们的视力问题日益增多,这无疑向众多家长发出了警示。它提醒着我们,除了追求学术成就之外,孩子们的视觉健康同样重要,不容忽视。因此,选择一款适合…

leetcode刷题:对称二叉树

题目: 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例 1: 输入:root [1,2,2,3,4,4,3] 输出:true 示例 2: 输入:root [1,2,2,null,3,null,3] 输出:false 提示&#xf…

以导航产品为核心,东软想为车企扫除出海障碍

得益于新能源汽车领域多年的布局,以及在汽车智能化方面的先发优势,近年来,中国汽车品牌在质与量上都得到了极大提升,并带来强大的竞争力。 据海关总署公布的数据,过去三年,中国汽车出口规模连续突破式发展…

LeetCode算法题:7. 整数反转

给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−2^31, 2^31 − 1] ,就返回 0。 假设环境不允许存储 64 位整数(有符号或无符号)。 示例 1: 输…

会赚钱的人都在做这件事:你了解吗?

在我们日常生活的点滴中,以及在各种场合的交互中,利他思维始终扮演着不可或缺的角色。当我们追求合作与共赢时,单方面的自我立场显然是不够的,真正的关键在于换位思考,寻找并满足对方的需求。 互利互赢的核心理念正是利…

【挑战30天首通《谷粒商城》】-【第一天】【10 番外篇】 解决docker 仓库无法访问 + MobaXterm连接VirtualBox虚拟机

文章目录 课程介绍 1、解决docker 仓库无法访问 2、 MobaXterm连接VirtualBox虚拟机 Stage 1:下载MobaXterm选择适合你的版本 Stage 2:vagrant ssh 连接,开启ssh访问 Stage 2-1:su获取root账号权限,输入密码(默认vagra…

纯血鸿蒙APP实战开发——阅读翻页方式案例

介绍 本示例展示手机阅读时左右翻页,上下翻页,覆盖翻页的功能。 效果图预览 使用说明 进入模块即是左右翻页模式。点击屏幕中间区域弹出上下菜单。点击设置按钮,弹出翻页方式切换按钮,点击可切换翻页方式。左右翻页方式可点击翻…

【软件测试】3.开发模型

目录 1.常见的开发模型 1.1瀑布模型 1.2螺旋模型 1.3增量模型和迭代模型 1.4敏捷模型 1.4.1特点: 1.5Scrum模型(三个角色和五个重要会议) 1.5.1三个角色: 1.5.2Scrum工作流程(五个会议) 1.6测试模…

如何选择适合自己网站的SSL证书提供商?

在互联网技术飞速发展的今天,确保数据安全已成为网站运营的基石。HTTPS证书作为一项重要的安全认证协议,对于保护数据传输的安全性至关重要。本文将为您提供一份详尽的指南,帮助您了解如何申请和部署HTTPS证书。 一、选择SSL证书提供商 首先…

JUC下的CompletableFuture详解

详细介绍 CompletableFuture是Java 8引入的一个实现Future接口的类,它代表一个异步计算的结果。与传统的Future相比,CompletableFuture提供了更丰富的功能,比如链式调用、组合异步操作、转换结果、异常处理等,极大地增强了Java在…

给网络镜像模式下的 WSL2 使用 127.0.0.1代理的方法

网络镜像模式下的WSL2虽然复制了宿主机windows的ip,但是仍然无法访问127.0.0.1的代理。经过调查,发现因为WSL2从应用商店下载而来,所以可能是UWP应用,所以需要用工具解除环回代理限制。

mysql 不停的重启关闭

早上在使用phpstudy的时候,发现自己的mysql5.7和5.8都出现了问题,就是不停的重启,在梳理了状况之后,可能是硬盘的内存空间不足,或者硬盘出现了问题;于是我将mysql 重新安装了一次,整个问题就解决…

数据结构(四)————二叉树和堆(中)

制作不易,三连支持一下呗!!! 文章目录 前言一、堆的概念及结构二、堆的实现三.堆的应用 总结 前言 CSDN 这篇博客介绍了二叉树中的基本概念和存储结构,接下来我们将运用这些结构来实现二叉树 一、堆的概念及结构 1…

一篇文章,系统性聊聊Java注解

你好! 这类系统性聊聊***知识点的文章,是希望给大家带来对某个技术的全貌认识,如果大家喜欢,后续可以陆续更新此系列 下面,开始今天的分享 在之前,我们已经分享过注解相关的三个面试题, 今天的…