Определите назначение API с помощью React на производственном сервере

Question

У меня есть приложение React, которое работает с REST API, развернутым на том же компьютере, что и приложение React.

• Приложение React деплируется на порт 80 (с использованием Apache Http Server)
• REST API - это приложение на основе Flask, развернутое на порту 5000.

В настоящее время в качестве обходного пути я настроил рабочий сервер на работу на хосте XYWZ, поэтому я жестко прописал цель API вфайлы React:

const API_HOST = 'http://X.Y.W.Z:5000'

Как лучше всего устанавливать назначение API, если я хочу, чтобы он был тем же хостом, что и приложение React, но на другомпорт?(Видел некоторые посты об этом, но никто не имел решения, например, здесь и здесь )

Возможно переслать запрос от React Router на WebServerи установить там обратный прокси?Как это можно настроить?

На сервере разработки я использовал атрибут proxy в package.json (как здесь ) для пересылки запроса, но на конкретном сервере разработкии он все еще должен быть жестко закодирован.

(я думаю, что определение не должно зависеть от развернутого хоста (завтра я могу перейти на хост с другим сервером - поэтому я всегда должен устанавливать цель API?)

Answer 1

Измените API_HOST в соответствии с окружением узла.

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : 'http://X.Y.W.Z:5000';.

И если вы используете прокси для сервера разработки, то вы можете указать API_HOST как

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : '';