Как разместить React проект на сервере, используя nginx?

Question

SapphireMyst

html , react , ssh , nginx

Как разместить React проект на сервере, используя nginx?

У меня есть проект на React, для которого я создал сборку (build), и теперь мне нужно развернуть его на домене. Мой конфигурационный файл Nginx выглядит следующим образом: 

```nginx
server {
    listen 80;  # Порт, на котором будет слушать Nginx
    server_name http://react-cod.ru/;  # Замените на ваш домен или IP-адрес

    root /root/frontend/build;  # Укажите путь к директории с вашими статическими файлами
    index index.html;  # Укажите файл, который будет использоваться по умолчанию

    location / {                                                        
       try_files $uri $uri/ /index.html=404;  # Обработка маршрутов SPA
    }

    location ~ \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;  # Кэширование статических файлов
        access_log off;  # Отключаем логирование доступа к статическим файлам
    }

    location = /favicon.ico {
        log_not_found off;  # Отключаем ошибку 404 для favicon
    }

    location = /robots.txt {
        allow all;  # Разрешаем доступ к robots.txt
    }

    error_page 404 /404.html; 
    location = /404.html {
        internal;  # Указываем, что эта страница должна быть внутренней
    }

    location ~* \.(html)$ {
        expires -1;  # Отключаем кэширование HTML
    }
}
```

При выполнении команды `sudo tail -f /var/log/nginx/error.log` появляется следующая ошибка: 

```
2024/11/12 19:04:53 [error] 21897#21897: *3 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 212.74.000.000, server: your_domain.com, request: "GET / HTTP/1.1", host: "react-cod.ru"

2024/11/12 19:04:53 [error] 21897#21897: *4 rewrite or internal redirection cycle while internally redirecting to "/index.html",
```

Как я могу устранить возникшую ошибку с внутренней переадресацией и правильно настроить Nginx для моего React приложения?

12 ноября 2024 г. 16:23

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ошибка "rewrite or internal redirection cycle" происходит, когда Nginx пытается выполнить внутреннюю переадресацию на один и тот же URI, что приводит к бесконечному циклу.

В случае вашего конфигурационного файла, проблема скорее всего связана с директивой `try_files` в блоке `location /`. Конфигурация выглядит так:

```nginx
try_files $uri $uri/ /index.html=404;
```

Здесь, если ни один из условий (`$uri` или `$uri/`) не выполнится, будет выполнен запрос к `/index.html`, что в некоторых ситуациях может вызывать зацикливание, если Nginx снова испытает те же условия.

Чтобы это исправить, измените `try_files` на:

```nginx
try_files $uri $uri/ /index.html;
```

Удалите `=404`, потому что Nginx будет пытаться вернуть `/index.html`, если ни один из файлов не найден, и это может снова привести к вызову этой же логики для маршрутов, определённых в вашем приложении React.

Вот обновлённый конфигурационный файл:

```nginx
server {
    listen 80;  # Порт, на котором будет слушать Nginx
    server_name react-cod.ru www.react-cod.ru;  # Замените на ваш домен или IP-адрес

    root /root/frontend/build;  # Укажите путь к директории с вашими статическими файлами
    index index.html;  # Укажите файл, который будет использоваться по умолчанию

    location / {                                                        
       try_files $uri $uri/ /index.html;  # Обработка маршрутов SPA
    }

    location ~ \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;  # Кэширование статических файлов
        access_log off;  # Отключаем логирование доступа к статическим файлам
    }

    location = /favicon.ico {
        log_not_found off;  # Отключаем ошибку 404 для favicon
    }

    location = /robots.txt {
        allow all;  # Разрешаем доступ к robots.txt
    }

    error_page 404 /404.html; 
    location = /404.html {
        internal;  # Указываем, что эта страница должна быть внутренней
    }

    location ~* \.(html)$ {
        expires -1;  # Отключаем кэширование HTML
    }
}
```

### Дополнительные рекомендации:

1. Убедитесь, что вы заменили `server_name http://react-cod.ru/;` на `server_name react-cod.ru www.react-cod.ru;`, чтобы правильно обработать имена хостов без протокола.

2. После внесения изменений в конфигурацию не забудьте перезагрузить Nginx, чтобы изменения вступили в силу:
   ```bash
   sudo systemctl reload nginx
   ```

3. Проверьте, что директория `/root/frontend/build` действительно содержит скомпилированные файлы вашего приложения. Для этого выполните:
   ```bash
   ls /root/frontend/build
   ```

После выполнения указанных шагов ваше React приложение должно корректно работать на Nginx без ошибок переадресации.

Answer 2

1. Можно не засорять вывод комментариями. 
 2.  Сервер, на котором крутится твой сайт, должен иметь внешний IP-адрес; если внешний адрес на роутере, нужно настроить проброс портов 80 и 443 на внутренний. 
 3. Имя домена должно быть ассоциировано с IP-адресом (даже если внутренний) в файле hosts 
 4. Проверить конфигурацию можно командой nginx -t