Как обрабатывать несколько сред в приложении React

#javascript #reactjs

Вопрос:

Я работаю над небольшим проектом, включающим интерфейс react и серверную часть Java с двумя средами.

Я изо всех сил пытаюсь понять, как работать с несколькими средами, я объявляю URL API с помощью axios:

 export default axios.create({
  baseURL: `http://api.dev.project.local/api/v1`,
});

Но это работает только для одной среды, как изменить URL API после сборки пакета? Я не думаю, что хорошей практикой является создание двух сборок (одна для разработчиков и одна для prod), потому что это может создать беспорядок внутри менеджера артефактов (мы используем канал Azure Artifacs).).

Как вы решаете эту проблему?

1. попробуйте использовать webpack

2. @JosephD. Спасибо! Я проверю это 🙂

3. @JosephD. но использование webpack приведет к тому же результату, верно? несколько пакетов, каждый для разных сред?

4. @FilipNiko, правильно. разные конфигурации webpack для каждой среды: dev, prod и common. Использование webpack-merge для создания разных выходных пакетов. Не знаком с Azure, но, возможно, хэши пакетов могут быть удобными.

5. @JosephD. Спасибо за вывод, но как обрабатывать версии в реестре (канал артефактов), если у одного может быть другая конфигурация API, отличная от другой, поэтому я не могу развернуть каждый pacakge в каждой среде…

Ответ №1:

В случае, если вы используете create-react-app, и вам нужна только локальная и производственная среда, используйте встроенную функцию добавления пользовательских переменных среды. В противном случае полезной альтернативой является env-cmd.

Установите env-cmd как зависимость от разработки:

 npm i -D env-cmd

Добавьте файл .env (в корне проекта, одинаковый для всех сред):

 REACT_APP_API_ENDPOINT = https://default.example.com

Добавить .env.qa файл:

 REACT_APP_API_ENDPOINT = https://qa.example.com

Добавить .env.промежуточный файл:

 REACT_APP_API_ENDPOINT = https://stage.example.com

Добавить файл .env.production:

 REACT_APP_API_ENDPOINT = https://production.example.com

Обновить package.json

 {
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
  }
}

Обратите внимание, что команды start и build create-react-app по умолчанию используют .env и .env.production соответственно и не нуждаются в env-cmd.

Готов к использованию в нашем коде

 const baseUrl = process.env.REACT_APP_API_BASE_URL;

И мы также можем использовать env-cmd для команды запуска в среде разработки.

1. Это работает, спасибо! Не могли бы вы объяснить, почему мы должны использовать npm run-script build в пользовательской среде, в то время как используется команда сборки по умолчанию react-scripts build ?

Ответ №2:

я думаю, вам следует использовать переменные среды и создать файл .env и отделить его от вашего проекта.

для получения дополнительной информации вы можете использовать документы react docs о переменных среды

или вы можете использовать переменные сценариев npm

Я надеюсь, что это было полезно.

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

2. с использованием разных файлов .env или во втором решении с использованием разных сценариев для встраивания в разработку и производство

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