Ошибка при настройке nginx для нескольких приложений ReactJS на одном сервере?

Содержание

Вопрос или проблема
Ответ или решение
Конфигурация Nginx для нескольких приложений ReactJS на одном сервере
Введение
Проблема
Решение конфигурации Nginx
Объяснение конфигурации
Заключение

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

Я создаю решение с несколькими модулями. Каждый модуль – это приложение ReactJs, и я пытаюсь настроить nginx для публикации его на одном домене. Например:

http://application-domain/auth
http://application-domain/admin
http://application-domain/dashboard
http://application-domain/sales

Мой публичный каталог для nginx выглядит так:

где auth, admin, dashboard и sales – это подпапки для каждого проекта.

Моя конфигурация сервера nginx:

server {
 listen 9000 default_server;
 listen [::]:9000 default_server;
 server_name localhost;

 index index.html;

 location / {
    root /var/www/auth;
 }

 location /admin { 
   root /var/www;
 }

 location /dashboard {
   root /var/www;
 }

 location /sales {
   root /var/www;
 }
}

У каждой подпапки проекта есть аналогичная структура

Проблема заключается в том, что при доступе к http://application-domain/admin, например, приложение пытается загрузить статические файлы из корня вместо подпапки проекта

GET http://localhost:9000/static/js/main.6314dcaa.js net::ERR_ABORTED

Правильным было бы получать файлы из подпапки admin следующим образом:

GET http://localhost:9000/admin/static/js/main.6314dcaa.js

Какой лучший подход к исправлению конфигурации nginx для этого?

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

 location /admin { 
   root /var/www/admin;
 }

 location /dashboard {
   root /var/www/dashboard;
 }

 location /sales {
   root /var/www/sales;
 }

Но это будет то же самое, что и просто иметь

location / {
  root /var/www/
}

Поскольку вызов к http://application-domain/admin будет соответствовать /var/www/admin.

Первое решение скрывало бы всё остальное в /var/www/, так как нет правила местоположения для доступа к, скажем, http://application-domain/private.

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

Конфигурация Nginx для нескольких приложений ReactJS на одном сервере

Введение

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

Проблема

Вы столкнулись с проблемой, когда при попытке доступа к подкаталогу, например, http://application-domain/admin, ваше приложение не находит необходимые статические файлы, поскольку оно обращается к ним относительно корневого каталога, а не подкаталога, как это требуется. Например:

GET http://localhost:9000/static/js/main.6314dcaa.js

Вместо корректного:

GET http://localhost:9000/admin/static/js/main.6314dcaa.js

Решение конфигурации Nginx

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

server {
    listen 9000 default_server;
    listen [::]:9000 default_server;
    server_name localhost;

    index index.html;

    location / {
        root /var/www/auth;  # Корень для первого приложения
        try_files $uri $uri/index.html $uri.html;
    }

    location /admin {
        alias /var/www/admin;  # Используйте alias вместо root для подкаталога
        try_files $uri $uri/index.html $uri.html;
    }

    location /dashboard {
        alias /var/www/dashboard;  # Аналогично для dashboard
        try_files $uri $uri/index.html $uri.html;
    }

    location /sales {
        alias /var/www/sales;  # Аналогично для sales
        try_files $uri $uri/index.html $uri.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;  # Кеширование статических файлов
    }
}

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

Использование alias: В отличие от root, alias позволяет напрямую указывать путь, который будет использоваться для доступа к файлам. Это крайне необходимо, чтобы предотвратить неправильное разрешение путей для статических файлов.
try_files: Эта директива позволяет проверять наличие запрашиваемого файла. Если файл не найден, Nginx будет пытаться отобразить index.html, что является стандартным поведением для приложений на React, использующих маршрутизацию на стороне клиента.
Кеширование статических файлов: Для повышения производительности и уменьшения нагрузки на сервер рекомендуется включить кеширование статических ресурсов.

Заключение

Настройка Nginx для работы с несколькими приложениями ReactJS на одном сервере требует внимания к деталям и понимания параметров конфигурации веб-сервера. Выше представленный метод позволяет корректно обслуживать каждое приложение и его статические файлы, а также улучшает пользовательский опыт благодаря эффективному кешированию. Убедитесь, что после внесения изменений в конфигурацию вы перезапустили сервис Nginx для применения новых настроек:

sudo systemctl restart nginx

С правильной конфигурацией ваш сервер будет готов эффективно обрабатывать запросы к каждому из ваших приложений ReactJS.