Windows系统下通过Nginx配置多前端项目

Windows系统下通过Nginx配置多前端项目

引用

CSDN

1.

https://blog.csdn.net/Bruce__taotao/article/details/138654765

本文详细记录了在Windows系统下使用Nginx配置多个前端项目（一个PC端项目和一个移动端项目）的过程。文章通过实际操作记录，展示了如何解决Nginx配置中遇到的各种问题，包括重定向循环、静态资源加载、路由处理等。

前言

在Windows电脑上启动一个Nginx服务器，用于测试配置多个前端项目。具体包括一个PC端项目（基于Vue3+TypeScript+Vite，使用history路由模式）和一个移动端项目（同样基于Vue3+TypeScript+Vite，但使用hash路由模式）。

大概思路

本教程将通过以下步骤完成配置：

1. 解决Nginx重定向循环问题
2. 配置正确的root路径
3. 处理静态资源加载问题
4. 配置history模式路由
5. 实现域名根路径重定向

实际操作记录

查看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-1.24.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块来处理动态路由。

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项目了。还需要处理下面的情况

解决：

    # 在最下方新增一个正则表达式location块，用于匹配除/pc和/mobile外的其他所有路径
    # 并且不区分大小写，使用~*标志
    location ~* ^/(?!pc|mobile)(.*) {
        return 301 http://$host:9999/pc;
    }

总结

本文记录了在单个端口下，利用Nginx部署PC前端项目（history模式路由）与移动端前端项目（hash模式路由）的具体配置过程。通过解决一系列配置问题，最终实现了多项目的正确部署和访问。

参考：

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