Настройка переменных окружения для продакшн-окружения

Введение: зачем нам переменные окружения?

Переменные окружения — это способ передать конфиденциальную информацию или параметры конфигурации в ваше приложение, избегая их захардкода в исходном коде. Например:

• API-ключи.
• URL-адреса серверов (например, https://api.production-server.com).
• Настройки базы данных или сервисов (например, Redis, AWS).
• Различия между продакшн- и development-окружением.

Проблема жестко заданных значений

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

А теперь второй сценарий: вы захардкодили локальные настройки, но они не работают на продакшн-сервере. Вы проводите часы в поисках причины, а насмешливый лог где-то на сервере молчит.

Переменные окружения решают эти проблемы, разделяя конфигурацию и код. Это позволяет использовать разные настройки для разработки, тестирования и продакшна.

Как работают переменные окружения?

Переменные окружения определяются в вашей системе или в специальных файлах .env и могут передаться вашему приложению во время его сборки или выполнения. В случае React, они встраиваются в приложение во время сборки (build-time). Это делает их доступными в вашем коде как глобальные переменные.

Практическая настройка переменных окружения

1. Создание файла .env

Первым делом создаём файл в корне вашего проекта:

touch .env

Добавим в него наши переменные окружения. Например:

REACT_APP_API_URL=https://api.production-server.com
REACT_APP_API_KEY=1234567890abcdef

2. Чтение переменных окружения в коде

Теперь мы можем использовать эти переменные в нашем приложении. Например, создадим файл src/config.ts:

// src/config.ts

export const API_URL = process.env.REACT_APP_API_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

А затем используем их в любом месте приложения:

import { API_URL, API_KEY } from './config';

export const fetchData = async () => {
  const response = await fetch(`${API_URL}/data`, {
    headers: {
      Authorization: `Bearer ${API_KEY}`,
    },
  });

  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }

  return response.json();
};

3. Чтение переменных окружения в коде для Vite

Если проект запускается на движке Vite, то есть два изменения:

Префикс. В Vite переменные окружения должны начинаться с префикса VITE_. Это сделано для безопасности и предотвращения случайной утечки системных переменных. Vite просто проигнорирует переменные без этого префикса.

Подключение переменных выполняетя с помощью другого кода:

// src/config.ts

export const API_URL = import.meta.env.VITE_API_URL;
export const API_KEY = import.meta.env.VITE_API_KEY;

Учитывайте это, если будете запускать проект на движке Vite.

4. Добавление .env в .gitignore

# .gitignore
.env

Теперь Git будет игнорировать этот файл.

5. Настройка переменных на платформе деплоя

На Vercel

Для настройки переменных окружения на Vercel:

1. Зайдите в панель управления Vercel.
2. Выберите ваш проект.
3. Перейдите в раздел Settings -> Environment Variables.
4. Добавьте ваши переменные окружения (имя и значение).

На Netlify

Для настройки переменных окружения на Netlify:

1. Войдите в панель управления Netlify.
2. Выберите проект и перейдите в Site settings -> Environment variables.
3. Добавьте нужные переменные.

6. Проверка работы переменных окружения

В React переменные окружения компилируются во время сборки приложения. Чтобы проверить, правильно ли они работают:

• Убедитесь, что локальный файл .env содержит переменные.
• Пересоберите приложение с помощью npm run build.
• Проверьте, встроены ли значения в результирующий код (например, используйте DevTools в браузере, чтобы увидеть запросы к указанному API).

Типичные проблемы с переменными окружения

1. Файл .env не работает. Убедитесь, что он находится в корне проекта и что переменные начинаются с REACT_APP_.

2. Переменные не появляются в коде. React "запекает" переменные окружения в исходный код во время сборки. Если вы поменяли .env, пересоберите проект.

3. Переменные видны в DevTools. Так как React встраивает переменные в JavaScript-код, они становятся видимыми в браузере. Не храните там конфиденциальную информацию (например, пароли). Для этого используйте защищённые бекенды.

Когда использовать переменные окружения?

Переменные окружения отлично подходят для:

• Настройки API-ключей.
• Указания базового URL для API.
• Конфигурации сторонних сервисов (например, Google Analytics).
• Указания режима работы приложения development, production.

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