Служить React-приложению в качестве вспомогательного пути в nginx

Question

Существует приложение React, которое обслуживается на 0.0.0.0:5000 локально.Также у меня есть доменное имя example.com.

Что я хочу сделать, это прокси каталог example.com/app в 0.0.0.0:5000.

Я пробовал следующим образом.

location /app  {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    rewrite /app/(.*) /$1 break;
    proxy_pass http://0.0.0.0:5000/app;

}

Но в консоли отображаются следующие ошибки:

Loading failed for the <script> with source “http://localhost/static/js/bundle.js”. app:45:1
Loading failed for the <script> with source “http://localhost/static/js/0.chunk.js”. app:45:1
Loading failed for the <script> with source “http://localhost/static/js/main.chunk.js”.

Также я пытался добавить homepage: './app в package.json тоже

Как это исправить?

Answer 1

Конфигурация nginx выглядит нормально для меня, но вам нужно будет обновить конфигурацию веб-пакета, а также конфигурацию маршрутизатора в приложении React, чтобы обслуживать приложение по определенному пути.

Я могу 'Не берут кредит на следующую суть, но она охватывает все случаи, которые вам нужны:

https://gist.github.com/codepunkt/ae82a0f3b9deb93908dc1f3d5bbc8da2

(Обратите внимание, что ваш basePath должен начинаться с "/", например "/ приложение ")