У меня есть проект на 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 приложения?
Ошибка "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 без ошибок переадресации.
1. Можно не засорять вывод комментариями. <br/> 2. Сервер, на котором крутится твой сайт, должен иметь внешний IP-адрес; если внешний адрес на роутере, нужно настроить проброс портов 80 и 443 на внутренний. <br/> 3. Имя домена должно быть ассоциировано с IP-адресом (даже если внутренний) в файле hosts <br/> 4. Проверить конфигурацию можно командой <b>nginx -t</b>