Как сделать proxy_pass на React приложение Nginx?

Question

[NewSantaClaus]

Запустил React приложение на 3006 порту

Делаю проксирование

location /crm/ {
        rewrite ^/crm/(.*)$ /$1  break;
        proxy_pass http://127.0.0.1:3006/;
    }

Проксирование происходит но React не может найти файлы которые ему нужны для работы


Он ищет файлы по пути https://my.site, а согласно проксированию он должен искать по пусти https://my.site/crm/....

Как мне это исправить чтобы файлы стало находить и все заработало?

Пробовал

sub_filter 'src="/'  'src="/crm/';
sub_filter_once off;

Но не работает. gzip стоит в режиме off

gzip off;
gzip_comp_level 5;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Когда открываю http://my.site:3006 приложение работает
Когда открываю https://my.site/crm приложение не работает

Полный nginx конфиг /etc/nginx/conf.d/my.site.conf
Корневая папка /var/www/html

server {
    listen 443 ssl;
    server_name my.site www.my.site;

    root /var/www/html/;
    index index.html;

    ssl_certificate /var/www/html/ssl/ssl-bundle-21.crt;
    ssl_certificate_key /var/www/html/ssl/HSSL-123456789p4cc9.key;
    
    gzip off;
    gzip_comp_level 5;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    if ($allowed_country = no) {
        return 403;
    }

    location ~ ^/api {

        client_max_body_size 50M;

        try_files $uri /api/public/index.php;
        index index.php;

        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass unix:/run/php/php8.0-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_intercept_errors on;
            include fastcgi_params;
        }
    }

    location ~ ^/files {
        try_files $uri /api/public$request_uri;
    }

    location ~ /crm/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://127.0.0.1:3006;
    }

    location / {
        proxy_pass http://127.0.0.1:5000;
    }
}

server {
    listen 80;
    server_name my.site www.my.site;

    if ($allowed_country = no) {
        return 403;
    }
    
    location / {
        return 301 https://$host$request_uri;
    }
}

Comments

[Lynn «Кофеман»]

Настроить реакт что бы выдавал правильные пути к статическим файлам

[Lynn «Кофеман»]

Если у вас там webpack, то настраивайте publicPath https://webpack.js.org/guides/public-path/

[NewSantaClaus]

Lynn «Кофеман», Он выдает правильные пути. Так как если перейти по http://my.site:3006 то все корректно работает. Не работает только если переходить по https://my.site/crm

[Lynn «Кофеман»]

NewSantaClaus, это и значит что он НЕ выдаёт правильные пути. Он должен выдавать пути с /crm/ если вы хотите что бы он работал по адресу mysite/crm/

[NewSantaClaus]

Lynn «Кофеман», понял. Возможно ли как-то это настроить на nginx чтобы не затрагивать само React приложение? Например тем же sub_filter, которым почему-то не работает у меня?

[NewSantaClaus]

Lynn «Кофеман», Я не использую webpack напрямую, это делает React у себя под капотом. Чтобы я имел доступ к этим настройкам мне нужно выполнить react-scripts eject. Но я не хочу получать полный контроль над настройками. Меня вполне устаивает как собирается проект. Есть ли у меня способ задать output.publicPath: '/crm/' не выполняя react-scripts eject в React?

Answer 1

[Александр Карабанов]

Конструкция rewrite ^/crm/(.*)$ /$1 break; убирает /crm/ из URI

Вот так будет проксироваться:

location ~ /crm/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://127.0.0.1:3006;
    }

Результат:

GET /crm/test.css HTTP/1.0
Host: example.com
X-Real-IP: 192.168.254.254
X-Forwarded-For: 192.168.254.254
X-Forwarded-Proto: https
Connection: close
user-agent: curl/7.68.0
accept: */*

Только это всё равно не выход, та как Nginx должен отдавать статику самостоятельно. Для этого надо указать alias или root, а не proxy_pass

Comments

[NewSantaClaus]

Спасибо что уделили внимание моему вопросу.

Изначально proxy_pass применялся лишь с той целью чтобы сделать проксирование на тот порт на котором работает приложение. И само проксирование происходит, но вот только файлы он тянет как бы минуя проксирование.

Я попробовал тот вариант что вы прислали. К сожалению он не работает для меня так как я ожидаю. Он по прежнему подтягивает файлы от корня сайта, а не от /crm/... .

Также nginx перестал отдавать файлы если их запросить напрямую из адресной строки
Например https://my.site/crm/static/css/2.3418215a.chunk.css
c rewrite ^/crm/(.*)$ /$1 break; ngibx отдавал эти файлы

Для этого надо указать alias или root, а не proxy_pass

Можете пожалуйста показать как это можно сделать. Уже долгое время не могу ничего найти в сети. Буду вам очень благодарен за помощь

Вот еще что мне показывает нетворк

Как видите URI страницы содержит /crm/, а URI файлов которые подтягиваются нет

[Александр Карабанов]

Покажи весь конфиг.
И путь до корневой директории начиная от корня файловой системы сервера

[NewSantaClaus]

Александр Карабанов, спасибо. Добавил обновлением до вопроса, полный конфиг что есть на данный момент

[Александр Карабанов]

Если crm размещена в /var/www/html/ то:

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

И в index.html указать <base href="/"> для того, чтобы относительные пути работали.

[NewSantaClaus]

Александр Карабанов, нет. Расположение каталогов такое:

• /var/www/html/client - NextJs
  
• /var/www/html/api- PHP
  
• /var/www/html/crm - ReactJs
  

/var/www/html/ - здесь практически ничего нету. Только служебные файлы

[NewSantaClaus]

Александр Карабанов, Добрый день. Может у вас есть какая-то мысль как решить данный вопрос?

[Александр Карабанов]

А какой путь до папки со статикой.

[NewSantaClaus]

Александр Карабанов, приложение отдает файлы при обращении к /static/... . Но по факту эта папка лежит в /var/www/html/crm/build/static/.... НО еще есть файлы которые тоде подтягиваться но не лежат в папке static. Это такие файлы как favicon, manifest, ... . Они лежат в /var/www/html/crm/build/...

[Александр Карабанов]

location /crm {
    alias /var/www/html/crm/build;
    index index.html;
    try_files $uri $uri/ /index.html;
}

[NewSantaClaus]

Александр Карабанов, спасибо что уделили время моему вопросу. К сожалению не могу дать ответ вам работает ли, так как при открытии https://my.site/crm/ выдает 403 после внесения этих изменений.

Обновлено. Моя ошибка, случайно добавил слеш в конце. 403 ошибки нету, то файлы по прежнему не находит

[NewSantaClaus]

NewSantaClaus, Получается что сам файл index.html находит, а вот те файлы что подключает он по пути из начиная из корня, нет. То есть насколько я понял нужно еще как-то установить корневую папку на этот случай?