Вам когда-нибудь нужно было развернуть приложение React для нескольких сред?
Если вы когда-либо должны были сделать вышеизложенное, то этот сценарий может звучать вам знакомым: У вас уже есть существующий файл сборки, вы хотите изменить некоторые переменные среды, затем повторно разверните его в новую среду.
К сожалению, вы скоро понимаете, что переменные среды были жестко закодированы в файле сборки. Это означает, что вы не можете изменить переменные среды без повторного наращивания.
Есть ли другие способы изменить переменные среды?
Мы просили вокруг, чтобы посмотреть, имел ли другие проекты лучшим способом справиться с этим. Оказалось, что разные команды имели свой подход:
- Некоторые команды просто повторно построят его для каждой среды
- Некоторые команды выделили переменные среды асинхронно из внешнего источника данных
- Одна команда хранила все переменные среды в приложении, затем выбрали окружающую среду на основе URL
- Одна команда сохранила переменную среды заполнителя, затем заменила ее перед подачей файла
Как выглядит идеальный поток?
Все вышеперечисленное имело определенные компромиссы, которые мы не хотели сделать. Мы стремимся построить что-то, что выполнило следующее:
- Не требует восстановления
- Требуется минимальное изменение кода
- Позволяет синхронный доступ переменных среды
- Легко интегрироваться с вашим текущим рабочим процессом
- Простой и простой
reac-inject-env: инструмент, который позволяет изменять переменные среды после того, как статический файл был построенный
Краткое и простое объяснение состоит в том, что он создает env.js Файл в /публики папка. Затем файл выполняется в начале, и переменные загружены в окно объект.
Вот как это использовать
- Добавьте следующее в
index.html.
2. Создайте новый файл под названием env.js и скопируйте следующий код:
export const env = { ...process.env, ...window['env'] }
3. Заменить все экземпляры Process.env С недавно созданным env Переменная
import { env } from './env'
export const App = () => {
return (
{env.REACT_APP_MAIN_TEXT}
)
}
4. Создайте свои статические файлы, используя NPM запустить сборку / React-Screpts построить /Каким бы ни был ваш сценарий сборки.
5. Установите вашу переменные среды, используя следующую команду:
[env variables] npx react-inject-env set # with a black background REACT_APP_COLOR=black REACT_APP_TEXT="Black Background" npx react-inject-env set # with a blue background REACT_APP_COLOR=blue REACT_APP_TEXT="Blue Background" npx react-inject-env set
6. Открыть build/env.js Чтобы убедиться, что ваши переменные присутствуют.
Эти переменные затем будут прочитаны вашим приложением во время выполнения.
И вот и все, ты закончил!
Если вам нужно снова изменять переменные среды, вы можете либо (а) повторить Шаг № 5 или (б) модифицировать build/env.js напрямую Отказ
Как насчет ?
Эта утилита была построена как можно проще, поэтому она должна хорошо интегрироваться и работать с большинством других инструментов.
.env/доценв
React-inject-env автоматически определяет переменные среды в вашем .env Файл, расположенный в вашей корневой папке.
Примечание. Переменные среды, пройденные через командную строку, будут иметь приоритет над .env.env. Переменные.
Машинопись
В Шаг № 2 Создать файл с именем env.ts вместо env.js.
declare global {
interface Window {
env: any
}
}
// change with your own variables
type EnvType = {
REACT_APP_COLOR: string,
REACT_APP_MAIN_TEXT: string,
REACT_APP_LINK_URL: string,
REACT_APP_LOGO_URL: string
}
export const env: EnvType = { ...process.env, ...window.env }
Докер
React-inject-Env также могут быть аккуратно интегрированы с Docker
FROM node:16.10-slim COPY . /app WORKDIR /app RUN npm install RUN npm run build EXPOSE 8080 ENTRYPOINT npx react-inject-env set && npx http-server build
docker build . -t react-inject-env-sample-v2
docker run -p 8080:8080 \ -e REACT_APP_COLOR=yellow \ -e REACT_APP_LOGO_URL=./logo512.png \ -e REACT_APP_MAIN_TEXT="docker text" \ -e REACT_APP_LINK_URL=https://docker.link \ react-inject-env-sample-v2
Резюме
Этот пакет значительно расширил наш рабочий процесс и сократил нашу сборку и раз развертывания более чем на 10 минут. В прошлом нам пришлось строить 4 раза — один раз для каждой среды — но теперь нам нужно только построить его 1x. Развертывание быстро меняют!
Он был построен с учетом простоты, поэтому независимо от того, какой инструмент вы используете, вы должны быть в состоянии интегрировать его как часть вашего рабочего процесса!
Ссылки
Для получения более подробной информации и поддержки и образцов вы можете проверить следующие ссылки:
Оригинал: «https://dev.to/eslynn/how-to-dynamically-change-your-react-environment-variables-without-re-building-55el»