解决 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_files 或 rewrite 规则配置不当导致的。

---

问题原因

1. try_files 配置错误

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

例如，以下配置可能会导致问题：

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

2. root 路径错误

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

---

解决方法

1. 检查 try_files 配置

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

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

说明：

• $uri：尝试匹配请求的 URI。
• /index.html：如果 $uri 不存在，则重定向到 index.html。

2. 检查 root 路径

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

server {
    listen 80;
    server_name cms.stormsha.com;

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

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

检查路径是否正确

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

ls /path/to/your/react-project/build

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

3. 检查文件权限

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

ls -l /path/to/your/react-project/build

如果权限不足，可以修改权限：

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 配置，确保没有语法错误：

sudo nginx -t

如果测试通过，重启 Nginx：

sudo systemctl restart nginx

---

示例配置

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

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 的重定向循环问题！