Использование приложения create-реакции-приложения, размещенного на S3, для использования API Heroku

Question

Backgroud

backend - это приложение только для Rails API, работающее на Heroku (на порту 5000 во время локальной разработки).

Интерфейс сделан с create-react-app и размещен в корзине S3 позади AWS CloudFront (на порту 3000 во время локальной разработки).

Настройка разработки

Локально, интерфейс пользователя package.json включает в себя:

"proxy": "http://localhost:5000",

Это позволяет мне выполнить команду Javascript, например…

await fetch(`/someEndpoint`)

… и сервер разработки, работающий на localhost:3000, перенаправляет ответ от http://localhost:5000/someEndpoint. Это прекрасно работает, и мой интерфейс успешно обрабатывает ответы ?.

Проблемы с производством

Теперь я работаю над производством.

Если я ничего не изменю, попытается выполнить ту же строку загрузить с https://asdfasdfasdf.cloudfront.net/someEndpoint, что составит 404.

Вместо этого я хочу настроить приложение таким образом, чтобы в рабочем режиме оно попадало в приложение Heroku https://my-awesome-rails-app.herokuapp.com/someEndpoint, где работает Rails API.

Вопросы

(1) То, что я хочу, возможно без изменения кода

await fetch(`/someEndpoint`)

, либо путем настройки внешнего интерфейса для использования my-awesome-rails-app.herokuapp.com, либо путем настройки CloudFront для пересылки некоторых запросов на S3 и другие в Heroku?

(2) Если ни то, ни другое невозможно, как мне написать команду fetch(), чтобы позволить мне запускать Heroku в рабочей среде, но при этом сохранять поведение локального прокси во время локальной разработки? Возможно использование переменных окружения?

Answer 1

На мой взгляд, лучше следовать одному и тому же процессу (чтобы получить имя хоста API) во всех средах. Кроме того, настройка CloudFront только для этой цели не является убедительной, если у вас нет других причин для этого.

Я думаю, что вы можете использовать переменную окружения, и вот как вы можете это сделать.

с использованием переменных окружения в реактивном проекте

react-scripts supports переменные окружения с использованием dotenv библиотека.

мы создаем приложение реагирования, используя:

REACT_APP_API_DOMAIN=REACT_APP_API_DOMAIN npm run build

или вы можете определить .env.production, где переменная окружения NODE_ENV установлена ​​на production.

REACT_APP_API_DOMAIN=http://localhost:5000

Затем в вашем кодовом файле вы можете получить к нему доступ с process.env

await fetch(`${process.env.REACT_APP_API_DOMAIN}/someEndpoint`)

Пожалуйста, прочитайте ссылку, есть шаблон, с помощью которого вы должны определить переменные среды, чтобы он работал. например, каждая переменная среды, которую вы определяете, должна начинаться с REACT_APP_

Ссылка:

https://create-react-app.dev/docs/adding-custom-environment-variables/

надеюсь, это поможет.