Какие могут быть причины того, что я не могу развернуть React приложение непосредственно из его директории? 

Как настроить Nginx для корректной работы с подкаталогом, содержащим статические файлы React приложения?

При размещении React приложения в корневой директории /var/www/html на сервере с Nginx, приложение работает нормально. Однако, когда я размещаю приложение в подкаталоге /var/www/html/admin/, возникает проблема с загрузкой JavaScript и CSS файлов. В чём может быть причина этой проблемы и как её исправить?

Вот часть моего текущего Nginx конфигурационного файла из /etc/nginx/sites-available:

```nginx
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location /admin/ {
        try_files $uri $uri/ /admin/index.html;
    }
}
```

После сборки приложения, JavaScript и CSS файлы находятся в папке assets. Я попытался исправить проблему, добавив следующее в конфигурацию:

```nginx
location /admin/assets/ {
    alias /var/www/html/admin/assets/;
}
```

Тем не менее, проблема не была решена. Где может заключаться ошибка и какие дополнительные настройки могут быть необходимы для правильной работы приложения в подкаталоге?
  • 4 декабря 2023 г. 10:31
Ответы на вопрос 2 
React приложения обычно предполагают, что они размещены в корневом каталоге (`/`) сервера. Когда вы переносите приложение в подкаталог, статические файлы подгружаются неправильно, так как пути к ресурсам в вашем собранном коде не соответствуют новому расположению. 

Существуют определённые шаги, которые нужно выполнить для корректной работы приложения в подкаталоге.

1. Укажите базовый путь (base URL) в вашем React приложении во время сборки. Если вы используете Create React App, добавьте `"homepage": "/admin"` в ваш `package.json` перед сборкой приложения. Это позволит React знать, что ваше приложение теперь находится в `/admin`, и обновит все пути к статическим файлам соответственно.

2. Измените конфигурацию Nginx для правильного обслуживания содержимого подкаталога. Ваш конфиг уже пытается перенаправить запросы на `index.html` в /admin/, что правильно. Однако, если ваше приложение загружает статические файлы из другой папки (например, `static`), вам нужно будет добавить дополнительные `location` директивы для обслуживания этих файлов:

```nginx
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

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

    location /admin/static/ {
        alias /var/www/html/admin/static/;
        try_files $uri $uri/ =404;
    }
    
    # Возможно, вам также потребуется добавить дополнительные правила для других папок со статическими файлами

    location / {
        try_files $uri $uri/ =404;
    }
}
```

3. Если ваше приложение использует client-side routing (например, с `react-router`), убедитесь, что Nginx корректно обрабатывает пути. Обычно `try_files $uri $uri/ /admin/index.html;` достаточно, но проверьте, что все маршруты React правильно переходят к `index.html` вашего приложения.

После внесения этих изменений, перезапустите Nginx командой `sudo systemctl restart nginx` (или аналогичной командой в зависимости от вашего дистрибутива Linux), чтобы применить новую конфигурацию. Теперь ваше React приложение должно загружаться и работать корректно из подкаталога `/admin/`.

Это основные шаги, которые нужно предпринять для размещения React приложения в подкаталоге на сервере с Nginx. Если проблемы остаются, возможно, требуется дополнительная отладка конфигурации Nginx или React приложения.
Проверьте, чтобы пути к файлам в вашем коде совпадали с тем, где файлы фактически расположены на файловой системе. Если в коде путь указан как /assets/что-нибудь, а реальные файлы находятся в /admin/assets/, вам необходимо либо создать специальный location в настройках вашего веб-сервера для статических файлов (например, использовать /assets с алиасом на правильную папку), либо изменить пути в вашем коде, чтобы они совпадали с реальным расположением файлов, либо изменить корневую директорию (root) в конфигурации веб-сервера на ту, которая содержит нужные файлы.
Похожие вопросы
    Показать ещё