Проблема с несколькими локациями Nginx и React Router

На чтение 4 мин Опубликовано 23.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Объяснение конфигурации
Добавление гибкости
Заключение

Вопрос или проблема

Я пытаюсь настроить nginx для моего фронтенда на React. У него есть маршруты, которые обрабатываются с помощью React-router, использующего browser-history.

Локации в основном такие:
domain.com/cm
domain.com/cm/dashboard
domain.com/cm/management
и так далее

Текущая конфигурация выглядит следующим образом:

root         /srv/build;

location /cm {
    alias /srv/build/cm;
    index index.html
    try_files $uri $uri/ /index.html;
}

Это соответствует /cm и ничему другому.

Я пробовал это с location ^~ /cm {}, но это не сработало, хотя должно было, потому что в документации говорится, что оно соответствует всему, что начинается с /cm

Решение, которое работает, но уродливо и не модульно, следующее:

location /cm {}
location /cm/dashboard {}
location /cm/management {}

Та же конфигурация внутри блока работает. Но в этом случае каждый раз, когда мы добавляем новый маршрут, нам нужно изменять nginx.

Как я могу решить это с помощью только одного местоположения?

ОБНОВЛЕНИЕ

Я обнаружил основную проблему: когда я использую местоположение /cm {alias /srv/build/cm}, оно пытается сделать следующее: /srv/build/cm/management, когда я хочу достичь domain.com/cm/management. Что мне действительно нужно, так это то, что каждый маршрут, который начинается с /cm, должен быть алиасом к /srv/build/cm, а не к /srv/build/cm/management или т.д.

Таким образом, если я вводю domain.com/cm/management, я также должен использовать алиас /srv/build/cm здесь.

Вы пробовали просто определить / вместо /cm:

location / {

Для справки: https://stackoverflow.com/questions/35320674/how-can-i-have-same-rule-for-two-locations-in-nginx-config

ОБНОВЛЕНИЕ в условиях нескольких веб-сайтов:
Если / представляет собой другой веб-сайт, тогда:

location ~ ^/(cm|dashboard|management)/ {
   root       /srv/build; 
}

Ответ или решение

Для настройки Nginx с маршрутизацией React Router, особенно если вы используете browser-history, потребуется правильно сконфигурировать обработку маршрутов. Основная проблема, с которой вы столкнулись, заключается в том, что Nginx не понимает, как правильно перенаправлять запросы на клиентскую часть приложения React, если они начинаются с /cm.

Проблема

Когда вы определяете блок location с alias, Nginx ищет ресурсы в указанной директории, но не обрабатывает маршруты, которые относятся к клиентской части React. Например, при запросе по адресу domain.com/cm/management, Nginx попытается найти файл по пути /srv/build/cm/management, что неверно для одностраничных приложений (SPA), базирующихся на библиотеке React.

Решение

Чтобы все маршруты, начинающиеся с /cm, перенаправлялись в одну и ту же директорию для вашего приложения, используйте следующий конфигурационный блок:

server {
    listen 80;
    server_name domain.com;

    root /srv/build;

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

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

Объяснение конфигурации

root /srv/build; – Определяет корневую директорию для статических файлов.
location /cm {} – Указывает на начало маршрутов, начинающихся с /cm.
try_files $uri $uri/ /cm/index.html; – Nginx будет:
- Проверять, существует ли запрашиваемый файл ($uri).
- Проверять, существует ли директория ($uri/).
- Если ни тот, ни другой вариант не найден, он перенаправит на index.html внутри cm, что позволит React Router обрабатывать маршрутизацию на клиентской стороне.

Добавление гибкости

Если вы планируете использовать другие маршруты, просто добавьте аналогичные блоки location, если потребуется. Однако, отделяя маршруты для отдельных компонентов, вы можете использовать шаблоны:

location ~ ^/cm/(.*)$ {
    try_files $uri $uri/ /cm/index.html;
}

Этот подход будет захватывать все подмаршруты /cm/* и корректно перенаправлять их в index.html.

Заключение

Таким образом, данная конфигурация Nginx позволяет осуществлять корректную обработку всех маршрутов на клиентской стороне React с поддержкой браузерной истории. Это позволит избегать ситуации, когда при добавлении новых маршрутов требуются изменения в конфигурации сервера.

Если у вас возникнут дополнительные вопросы или потребуется помощь с регулированием других направлений, не стесняйтесь обращаться за помощью.