Добавление пользовательского файла .env.staging в приложение Create-React-App

При разработке React-приложения общий сценарий состоит в том, чтобы иметь три среды развертывания:

  • Местный: для местного развития.
  • Staging: онлайн-зеркало производственной среды.
  • Производство: живое приложение, которое обслуживает конечных пользователей.

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

Это означает, что вашему приложению, скорее всего, потребуется как минимум три разных файла .env. Однако приложение Create-React-App поддерживает только ограниченный и предопределенный набор .env файлов.

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

Настройка нескольких пользовательских файлов .env в приложении Create-React-App

Приложения Create-React-App используют react-scripts. Если вы не знакомы с тем, как файлы .evn работают в react-scripts, загляните в раздел Какие другие файлы .env можно использовать? в документации по созданию приложения React. Там вы можете узнать, какие .env файлы поддерживает react-scripts и как он их использует.

Теперь давайте узнаем, как настроить собственный файл .env.staging в вашем приложении React. Обратите внимание, что следующий подход можно легко распространить на любой другой пользовательский файл .env. Кроме того, это решение позволяет вам иметь несколько пользовательских файлов .env.

1. Начало работы

Приложение Create-React-App инициализируется следующим разделом scripts в файле package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

react-scripts поддерживает только определенный набор файлов .env. Эти файлы .env используются во время сборки при развертывании вашего приложения.

Итак, если вы хотите, чтобы ваше приложение Create-React-App с пользовательскими файлами .env создавалось правильно, вам необходимо настроить команду build. В частности, вам нужно заменить его на собственный скрипт сборки. Таким образом, вы можете преодолеть ограничения react-scripts, когда речь идет о .env файлах.

2. Создание пользовательского сценария сборки

Сначала создайте файл build.sh в корневом каталоге вашего проекта. Инициализируйте его следующим образом:

Здесь .env.local удаляется, а .env.production заменяется на .env.staging, когда переменная среды ENV равна «staging». Таким образом, react-scripts build увидит пользовательский файл .env.staging как .env.production и будет использовать его при создании приложения.

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

Теперь вам нужно обновить package.json, чтобы он вызывал пользовательский скрипт build.sh на build. Вы можете добиться этого следующим образом:

"scripts": {
  // ...
  "build": "bash build.sh",
  // ...
}

При запуске npm run build будет запущен файл build.sh. Поскольку buld.sh содержит команду react-script build, приложение будет построено так же, как и раньше. Но с логикой управления файлами .env, определенной до команды react-script.

3. Установка переменной среды ENV на ваших серверах развертывания

На этом этапе все, что вам нужно сделать, это установить переменную среды ENV на промежуточном сервере развертывания. В Linux вы можете добиться этого с помощью следующей команды:

export ENV=staging

И вуаля! Вы только что узнали, как использовать пользовательские файлы .env в приложении React Create-React-App. Обратите внимание, что вы можете настроить пользовательские файлы .env также в Next.js.



Как обращаться с пользовательскими файлами .env в Next.js
Добавление пользовательского файла .env.staging в приложение Create-Next-Applevelup.gitconnected .com



Заключение

В этой статье вы узнали, как настроить приложение React для поддержки нескольких пользовательских файлов .env. Приложения Create-React-App имеют некоторые ограничения, когда речь идет о файлах .env. Поэтому, если у вас есть другие среды развертывания, отличные от ожидаемых react-scripts, вам необходимо реализовать пользовательскую логику, чтобы включить поддержку пользовательских файлов .env. Здесь вы узнали, как это сделать.

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

Повышение уровня кодирования

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

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу