В качестве реакции представляют собой одностраничное приложение (SPA), которое работает как статическая страница внутри среды выполнения браузера, а внутри браузера нет ничего подобного переменным времени выполнения, которые могут использоваться SPA. Тем не менее, есть несколько взрослых, через которые мы можем реализовать динамическую переменную среды в приложении React.
Но вопрос, поэтому нам нужна переменная среды выполнения для статической страницы? Ну, по моему опыту есть несколько случаев, которые заставляют нас искать время выполнения или динамическую переменную в приложении React или для этого факта для любого спа. Например, разные конечные точки API для локального, предварительного продукта и производства, различных клавиш API для предварительного продукта и продуктов и аналогично.
Нам нужно несколько конфигураций для начала местного развития:
- Файл окружающей среды
- Сценарий Bash
- Сценарий NPM
- Включают тег скрипта на публике/index.html.
- Скрипт, когда требуется переменная выполнения
1. Файл окружающей среды
Создайте файл env.preprod, создайте этот файл на /public/env/ Расположение Э.Г. /public/env/env.preprod Это файл, в котором будет сохранена переменная среды выполнения, там может быть более одной переменной в файле. Почему в общественном каталоге? Как это будет в комплекте во время процесса сборки в Тарбол
//Filename: env.preprod REACT_APP_RUNTIME_PREPROD_KEY=xyz
2. Сценарий Bash
Сценарий Bash, который будет выполнен во время NPM начать Для локальных, которые создадут env-config.js с содержимым из файла env.preprod и то же самое для предварительного прод во время развертывания. Для PROD у нас будет файл env-config.js по умолчанию.
Имя имена: Env.sh.
#!/bin/bash
# look for runtime env file
if [ ! -z "${2}" ]; then
envFile="${1}"/env."${2}"
fi
#If can't find it then exit
if [[ ! -f "$envFile" ]]; then
echo "Env file doesn't exist!"
exit 1;
fi
# create runtime env JS file
if [[ ! -z "${1}" ]]; then
envJs="${1}/env-config.js"
fi
#Recreate config file
rm -rf ${envJs}
touch ${envJs}
# Add assignment
echo "window._env_ = {" >> ${envJs}
# Read each line in .env file
# Each line represents key=value pairs
while read -r line || [[ -n "$line" ]];
do
# Split env variables by character `=`
if printf '%s\n' "$line" | grep -q -e '='; then
varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
fi
# Read value of current variable if exists as Environment variable
value=$(printf '%s\n' "${!varname}")
# Otherwise use value from .env file
[[ -z $value ]] && value=${varvalue}
# Append configuration property to JS file
echo " $varname: \"$value\"," >> ${envJs}
done < ${envFile}
echo "};" >> "${envJs}"
echo "generated ${envJs} with content"
cat ${envJs}
3. Сценарий NPM
Это будет проводна как Prestart NPM Script и выполнить сценарий Bash.
//Change in package.json file "prestart" : "chmod +x ./public/env/env.sh && ./public/env/env.sh ./public/env preprod"
4. Включают тег скрипта на публике/index.html.
До настоящего времени Env-Config.js необходимо загрузить в index.html, иначе мы не можем его использовать. Когда создается env-config.js, объект окна браузера присваивается переменной времени выполнения.
5. Скрипт, когда переменная среды выполнения на самом деле используется
И теперь для всей тяжелой работы сделана до сих пор, пришло время созревать/использовать переменную среды выполнения. Поскольку переменная назначается как объект окна, теперь мы можем использовать способ, которым мы хотим. Его можно использовать в файле Vanilla JS или в файле rac rac app jsx/tsx. Оформить заказ Образец кода
//Filename: some-important.js const RUNTIME_ENV_KEY = window?._env_?.REACT_APP_RUNTIME_PROD_KEY ? window._env_.REACT_APP_RUNTIME_PROD_KEY : window?._env_?.REACT_APP_RUNTIME_PREPROD_KEY;
Кроме того, включите некоторые VACUTION.js в головке index.html:
Для препровода
- Выполнить скрипт во время развертывания
- location.conf (при использовании nginx)
1. Выполнить скрипт во время развертывания
Включите скрипт для выполнения Env.sh в процессе развертывания. Для деталей Docker изображений оформить заказ ссылочной секции в конце.
Имя файла: предварительнопроD-deployment.sh.
bash ./public/env/env.sh ./public/env preprod
2. location.conf (при использовании nginx)
Когда сервер NGINX используется в качестве веб-сервера, разрешите доступ к файлу env-config.js.
Имя имена: location.conf.
location ~ /env/(.+\.(?:js))$ {
expires -1;
add_header Cache-Control "public"
}
Для производства
1. Создать по умолчанию env-config.js
Создание по умолчанию снижает усилия для настройки любых шагов, необходимых во время развертывания производства. Но если мы хотим, мы можем создать другой файл env, такой как env.prod и запустить то же самое во время развертывания производства. Однако это полностью зависит от вас!
Имя файла: env-config.js
window._env_ = {
REACT_APP_RUNTIME_PROD_KEY=runtime-env-value
};
Образец кода
Фрагмент кода, представленный в этом блоге, доступен в GitHub, Образец кода Отказ В случае, если вы просто заинтересованы в файлах, заказать Github Gist
Если вы достигли здесь, то я сделал удовлетворительные усилия, чтобы держать вас в чтении. Пожалуйста, будьте добры, чтобы оставить какие-либо комментарии или попросить любые исправления. Счастливое кодирование!
Ссылка:
Мои другие блоги:
- Почему нам нужен несколько инструментов анализа кода?
- Что такое вай-ария и почему нам это нужно?
- Стратегия тестирования приложения Ract
Оригинал: «https://dev.to/akdevcraft/react-runtime-variables-49dc»