Переменные окружения в React

Для компонента аутентификации нам осталось доделать возможность входа через OAuth-провайдер на другом домене или поддомене. Для указания хоста мы можем использовать переменные окружения как мы делаем в бэкенде.

Но работа с окружением во фронтенде сильно отличается тем, что JavaScript код выполняется не на севрере, а в браузере, где никаких переменных нет. И для динамической подстановки значений в момент запуска сервера нам придётся использовать особые подходы.

Поэтому сегодня разберём внутреннюю работу и использование переменных окружения в React при разработке и при деплое с Docker. Заодно познакомимся с аргументами для пробрасывания ключей доступа к приватным репозиториям в процессе сборки контейнеров:

  • 00:01:57 Переменные окружения в React App
  • 00:04:09 Использование переменных в продакшене
  • 00:06:06 Простановка значений в Dockerfile
  • 00:08:08 Использование аргументов сборки
  • 00:11:13 Передача ключей для приватных репозиториев
  • 00:13:57 Подстановка значений при запуске
  • 00:14:18 Использование заглушек значений
  • 00:15:59 Подстановка значений в docker-entrypoint
  • 00:18:29 Проверка работы
  • 00:20:44 Сокрытие паролей
  • 00:21:47 Подведение итогов
Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (7)
fedot

Спасибо!

Ответить
Konstantin

Спасибо! Ждем новых эпизодов)

Ответить
Руслан

Спасибо!

Ответить
Arunas

спасибо.

Ответить
Руслан

Дима, добрый день, в локальном окружении именно переменные с секретами не подставляются на фронт почему-то, передает /run/secrets/secret_file_name, что мог упустить? Спасибо!

Ответить
Дмитрий Елисеев

Да, так и есть. В переменных окружения оказываются эта строка с именем файла.

В PHP-бэкенде мы сами читаем файлы по этим именам через file_get_contents в функции env().

В JS-фронденде мы тоже должны их сами считать в docker-entrypoint.sh командой cat в переменные как мы делали в скрипте бэкапа:

#!/bin/bash

if [ -f "$REACT_PASSWORD_FILE" ]; then
  export REACT_PASSWORD="$(cat "$REACT_PASSWORD_FILE")"
fi
Ответить
Руслан

Все понял, спасибо, примерно так и сделал, правда решил избавиться от суффиксов _FILE и обновлять в подставном entrypoint значение переменных окружения содержимым файла секрета, если текущее значение совпадает с паттерном адреса секрета, получился более универсальный подход на большинство сервисов и без суффиксов в переменных:

# Паттерн пути секретов
SECRETS_PATH="/run/secrets"

# Читаем все переменные окружения, которые переданы контейнеру
while IFS='=' read -r name value; do
    # Если значение переменной окружения начинается с "/run/secrets/", это секрет.
    if echo "$value" | grep -q "^$SECRETS_PATH/"; then
        # Получаем реальное имя файла секрета
        secret_filename=${value##*/}

        # Если файл секрета существует, читаем его содержимое
        if [ -f "$SECRETS_PATH/$secret_filename" ]; then
            secret_value=$(cat "$SECRETS_PATH/$secret_filename")
            export "$name"="$secret_value"
        else
            echo "Warning: Secret file $value not found"
        fi
    else
        # Просто экспортируем переменную окружения, если это не секрет
        export "$name"="$value"
    fi
done < <(env)

# Передаем управление предварительно сохраненному оригинальному docker-entrypoint.sh
exec docker-entrypoint-original.sh "$@"
Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex
MailRu
GitHub
Google