Solution to the redirect loop problem when deploying React project in Nginx

The following error message in the Nginx error log:

2024/12/11 11:28:44 [error] 37#37: *6 rewrite or internal redirection cycle while internally redirecting to "/", client: 61.169.61.66, server: , request: "GET / HTTP/1.1", host: ""

Indicates that Nginx is stuck in a redirect loop while processing the request and cannot be found correctly.document. This is usually due to the Nginx configurationtry_filesorrewriteThe result of improper rule configuration.

Cause of the problem

1. Try_files configuration error

In the Nginx configuration of React projects, it is usually usedtry_filesTo ensure that all requests point to, to support React's client routing. iftry_filesImproper configuration may lead to a redirection loop.

For example, the following configuration may cause problems:

location / {
    try_files $uri $uri/ /;
}

2. Root path error

ifrootThe path configuration is wrong, Nginx may not be found correctlyfile, resulting in a redirect loop.

Solution

1. Check the try_files configuration

make suretry_filesCorrect configuration. Here is a correct configuration example:

location / {
    try_files $uri /;
}

illustrate:

• $uri: Try to match the requested URI.
• /:if$uriIf it does not exist, then redirect to。

2. Check the root path

server {
    listen 80;
    server_name ;

    root /path/to/your/react-project/build;  # Make sure the path is correct    index ;

    location / {
        try_files $uri /;
    }
}

Check if the path is correct

You can check whether the path is correct by following the command:

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

make surebuildThe directory containsdocument.

3. Check file permissions

Ensure Nginx has permission to accessbuildFiles in the directory. You can check permissions by:

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

If the permissions are insufficient, you can modify the permissions:

sudo chmod -R 755 /path/to/your/react-project/build
sudo chown -R www-data:www-data /path/to/your/react-project/build

4. Check Nginx configuration

Retest the Nginx configuration to ensure there are no syntax errors:

sudo nginx -t

If the test passes, restart Nginx:

sudo systemctl restart nginx

Sample configuration

Here is a complete Nginx configuration example for deploying React projects:

server {
    listen 80;
    server_name ;

    root /path/to/your/react-project/build;  # Replace with the path to your React project build directory    index ;

    location / {
        try_files $uri /;
    }

    error_page 404 /;
}

Summarize

Nginx errorrewrite or internal redirection cycleUsually it is due totry_filesImproper configuration orrootCause of path errors. Solutions include:

1. Check and correcttry_filesConfiguration.
2. make surerootThe path points to the correct onebuildTable of contents.
3. Check file permissions to make sure Nginx has permission to access files.
4. Test and restart Nginx.

Hope these steps can help you solve the problem of redirection looping in Nginx!

This is the article about the solution to the redirect loop problem when Nginx deploys React project. For more information about Nginx deploys React redirect loop content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!