Как заставить мое приложение React указывать на мой Node / Express API в производственном процессе.Прокси работает только в dev.

Question

Я немного новичок в узле / реакции.

У меня есть приложение API / экспресс-узел, и в этом приложении у меня есть приложение реакции.Приложение реагирования имеет команды axios.get и другие вызовы API.Приложение реагирует на вызовы API, которые я выполняю, и перенаправляет их на прокси-сервер, который я установил в package.json приложения реакции.В dev прокси выглядело так: «proxy»: «http://localhost:3003/", но теперь, когда я иду в производство, я пытаюсь изменить этот прокси на URL, на котором я размещаю свое приложение для экспресс-узла»proxy ":" http://168.235.83.194:83/"

Когда я переместил свой проект в производство, я сделал порт 83 приложением узла API и сделал порт 84 приложением реакции (с помощью nginx).Однако по какой-то причине мое приложение реакции просто не знает, как выполнять запросы API к приложению узла. Я получаю пустые данные

После поиска в Google я понимаю, что параметр «прокси» толькоприменяется к запросам, направленным на сервер разработки.Обычно на производстве у вас есть сервер, который выдает начальную страницу html, а также обслуживает запросы API.Так что запросы к / api / foo естественно работают;вам не нужно указывать хост.

Это часть, которую я пытаюсь выяснить.Если кто-то может сказать мне, как настроить мое приложение так, чтобы / api / foo естественно работал, это было бы очень полезно.

Я попытался правильно настроить его.Это, вероятно, полный провал с точки зрения подхода, но уже поздно, и я собираюсь уснуть по этой проблеме ... У меня должен быть дескриптор nginx, обслуживающий как статический html, так и запросы в одном файле операторов?Пока у меня есть это, но я могу быть далеко отсюда ...

server {
  listen 84;
  server_name 168.235.83.194;


  root /home/el8le/workspace/notes/client/build;

  index index.html index.htm;
  location / {
  }

  location /api{
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://168.235.83.194:83/; //I have nginx hosting my API app on this port. Not even sure if this should be like this?
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

}`

Кроме того, я на самом деле хостинг на этих IP-адресах, если вы хотите лучше понять, где я нахожусь: http://168.235.83.194:84

http://168.235.83.194:83/customers

Answer 1

При запросе данных вам нужно будет указать фактический URL-адрес API.Dev-сервер может прокси-сервер для другого URL API.Таким образом, если приложение загружается на http://localhost:83 с использованием сервера DEV, любой запрос данных, например / api / Customers, перейдет на http://localhost:83/api/customers, а прокси-сервер dev перенаправит его на http://localhost:84/api/customers.

* 1007.* Но в производственном процессе, когда вы делаете тот же запрос, он будет использовать базовый адрес вашего приложения и пытаться получить данные из http://PRODUCTION_SERVER:83/api/customers.

Правильный способ справиться с этим - использовать вместо этого абсолютный URLотносительного URL.А поскольку у производства и разработки будут разные базовые URL-адреса, сохраните их в переменной config, а затем добавьте конкретный адрес API к этому базовому адресу, например: ${BASE_URL}/api/customers, где BASE_URL будет равно http://localhost:84 в DEV и http://PRODUCTION_SERVER:84.