解决 Nginx 部署 React 项目时的重定向循环问题

Nginx 错误日志中的以下错误信息:

复制代码
2024/12/11 11:28:44 [error] 37#37: *6 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 61.169.61.66, server: cms.stormsha.com, request: "GET / HTTP/1.1", host: "cms.stormsha.com"

表示 Nginx 在处理请求时陷入了重定向循环,无法正确找到 index.html 文件。这通常是由于 Nginx 配置中的 try_filesrewrite 规则配置不当导致的。


问题原因

1. try_files 配置错误

在 React 项目的 Nginx 配置中,通常会使用 try_files 来确保所有请求都指向 index.html,以支持 React 的客户端路由。如果 try_files 配置不当,可能会导致重定向循环。

例如,以下配置可能会导致问题:

nginx 复制代码
location / {
    try_files $uri $uri/ /index.html;
}

2. root 路径错误

如果 root 路径配置错误,Nginx 可能无法正确找到 index.html 文件,从而导致重定向循环。


解决方法

1. 检查 try_files 配置

确保 try_files 配置正确。以下是一个正确的配置示例:

nginx 复制代码
location / {
    try_files $uri /index.html;
}
说明:
  • $uri:尝试匹配请求的 URI。
  • /index.html:如果 $uri 不存在,则重定向到 index.html

2. 检查 root 路径

确保 root 路径指向 React 项目的 build 目录。例如:

nginx 复制代码
server {
    listen 80;
    server_name cms.stormsha.com;

    root /path/to/your/react-project/build;  # 确保路径正确
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}
检查路径是否正确

你可以通过以下命令检查路径是否正确:

bash 复制代码
ls /path/to/your/react-project/build

确保 build 目录中包含 index.html 文件。

3. 检查文件权限

确保 Nginx 有权限访问 build 目录中的文件。你可以通过以下命令检查权限:

bash 复制代码
ls -l /path/to/your/react-project/build

如果权限不足,可以修改权限:

bash 复制代码
sudo chmod -R 755 /path/to/your/react-project/build
sudo chown -R www-data:www-data /path/to/your/react-project/build

4. 检查 Nginx 配置

重新测试 Nginx 配置,确保没有语法错误:

bash 复制代码
sudo nginx -t

如果测试通过,重启 Nginx:

bash 复制代码
sudo systemctl restart nginx

示例配置

以下是一个完整的 Nginx 配置示例,适用于部署 React 项目:

nginx 复制代码
server {
    listen 80;
    server_name cms.stormsha.com;

    root /path/to/your/react-project/build;  # 替换为你的 React 项目 build 目录的路径
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}

总结

Nginx 错误 rewrite or internal redirection cycle 通常是由于 try_files 配置不当或 root 路径错误导致的。解决方法包括:

  1. 检查并修正 try_files 配置。
  2. 确保 root 路径指向正确的 build 目录。
  3. 检查文件权限,确保 Nginx 有权限访问文件。
  4. 测试并重启 Nginx。

希望这些步骤能帮助你解决 Nginx 的重定向循环问题!

相关推荐
ygming4 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming5 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a6 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽6 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku8 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)13 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江30 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码30 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说35 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015536 分钟前
最常用的JS加解密场景MD5
前端