раздел 03

Переменные окружения и секреты

Что это

Сайту часто нужны секретные значения: ключ к API нейросети, пароль к базе данных, токен платёжного сервиса. Эти значения нельзя писать прямо в коде - код лежит в репозитории, и любой, кто его увидит, получит ваши ключи. Решение - переменные окружения (env): код обращается к ним по имени (OPENAI_API_KEY), а сами значения хранятся отдельно и в репозиторий не попадают.

Зачем это вам

  • Безопасность. Ключи не утекают через код. Засветили ключ в публичном репозитории - его за минуты найдут и используют за ваш счёт.
  • Гибкость. Одно и то же приложение легко переключить между разными ключами (тест и боевой) без правки кода.
  • Стандарт. Все хостинги работают так же - привыкаете один раз.

Как это сделать

  1. Локально значения лежат в файле .env (или .env.local). Этот файл добавляют в .gitignore, чтобы он не попал в репозиторий.
  2. На Vercel откройте Settings -> Environment Variables.
  3. Добавьте пары имя -> значение: например, OPENAI_API_KEY и сам ключ.
  4. Укажите, для каких окружений переменная нужна: Production, Preview, Development.
  5. Передеплойте проект - переменные подхватываются при сборке. Код читает их по имени.

Откуда код читает переменные

В коде вы обращаетесь к ним по имени, а не вписываете значение. Деталь про фронтенд-фреймворки: переменная попадает в браузер только если специально помечена как публичная (в Next.js - префикс NEXT_PUBLIC_). Всё, что не помечено, остаётся на сервере и в браузер не уходит - именно туда кладут секреты.

Пример

Ваш сайт ходит к API нейросети. Локально ключ лежит в .env.local (в .gitignore, в Git не попадает). В Vercel вы добавили OPENAI_API_KEY в Environment Variables для Production и Preview. Код вызывает API, читая ключ из окружения. В репозитории ключа нигде нет - утечки не будет.

Антипаттерны

  • Писать ключ прямо в коде. Утечёт через репозиторий. Только env.
  • Коммитить .env в Git. Файл с секретами должен быть в .gitignore.
  • Помечать секрет как публичный. Он окажется в браузере у всех. Секреты - серверные.
  • Забыть передеплоить после изменения переменной. Новое значение подхватится только при следующей сборке.

Подразделы