Используйте обратный прокси NGinx для создания приложения-реакции

Я пытаюсь создать приложение ReactJS на удаленном сервере Ubuntu. Чтобы протестировать его в браузере, я использую функции обратного прокси NGinx.

server {
    listen 80;

    server_name mentalg.com;

        location / {
                proxy_pass http://172.31.23.249:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /client/ {
                proxy_pass http://172.31.23.249:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

порт 5000 предназначен для конечных точек REST /api, здесь все хорошо.

Но порт 3000, на котором работает сервер реакции разработки, создает проблемы.

При необходимости сайт открывается по адресу http://mentalg.com/client, но внутри index.html находится URL-адрес файла сценария, который будет выполняться как файл static/js/bundle.js. Этот файл обычно обслуживается сервером разработки React, но NGinx его не видит.

URL static/js/bundle.js генерируется сервером create-react-app dev "на лету", не может его контролировать.

Как мне дополнительно изменить прокси nginx для правильного сервера файлов из папки static?


reactjs create-react-app nginx-reverse-proxy
person Eugen    schedule 23.04.2018    source источник
comment
Возможно, можно было бы решить его перепрошивкой? У меня такая же проблема, но я не совсем уверен, как это сделать.   -  person Simen Russnes    schedule 03.05.2019

Ответы (2)


arrow_upward
7
arrow_downward

Добавление этих 2 правил решило исходную проблему.

location /static/ {
        proxy_pass http://172.31.23.249:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}

location /sockjs-node/ {
        proxy_pass http://172.31.23.249:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}
person Eugen    schedule 23.04.2018
comment
Могу я спросить, почему здесь ip вашего домена вместо localhost (127.0.0.1)? - person andrey.shedko; 03.05.2019
comment
думаю, это был скопированный / вставленный код, localhost тоже подойдет - person Eugen; 03.05.2019
comment
Это очень уродливое решение, и оно не работает с несколькими серверами реакции. Нет лучшего решения? - person smolus; 25.07.2019
comment
Я тоже хотел бы это увидеть. Однажды, может быть;) - person Eugen; 25.07.2019

arrow_upward
2
arrow_downward

У меня была такая же проблема, и я нашел способ решить ее, используя комбинацию перезаписи и установки параметра домашней страницы в create-response-apps package.json.

В package.json вы добавляете

"homepage": "http://172.31.23.249/client"

Это приведет к тому, что сгенерированный URL-адрес в index.html будет генерировать /client/static/js/..., поэтому он достигнет правильной директивы перенаправления для nginx.

Как только он достигнет перенаправления от nginx, нам нужно удалить начальный /client, прежде чем передавать его прокси, что мы можем сделать с помощью директивы rewrite.

server {
    listen 80;

    server_name mentalg.com;

        location / {
                proxy_pass http://172.31.23.249:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /client/ {
                rewrite ^/client(/.*)$ $1 break;

                proxy_pass http://172.31.23.249:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

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

person super    schedule 21.04.2020
comment
Насколько я могу судить, homepage учитывается только сценарием сборки webpack, а не сценарием запуска webpack. Сервер разработки веб-пакетов по-прежнему возвращает index.html, который содержит относительные URL-адреса, такие как /static/main.js, а не /client/static/main.js. Что мне не хватает? - person jdolan; 25.03.2021
comment
@jdolan Вы ничего не упускаете. Вопрос в том, как развернуть приложение за сервером NGINX. На сервере разработки вы можете использовать прокси поле вместо этого. - person super; 25.03.2021