Перейти к содержимому

Использование переменных окружения

Astro использует встроенную в Vite поддержку переменных окружения и позволяет вам использовать любой из его методов для работы с ними.

Обратите внимание, что, хотя все переменные окружения доступны в коде на стороне сервера, только переменные с префиксом PUBLIC_ доступны на стороне клиента в целях безопасности.

.env
SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there

В этом примере PUBLIC_ANYBODY (доступный через import.meta.env.PUBLIC_ANYBODY) будет доступен в серверном и клиентском коде, а SECRET_PASSWORD (доступный через import.meta.env.SECRET_PASSWORD) будет существовать только на стороне сервера.

Переменные окружения по умолчанию

Заголовок раздела Переменные окружения по умолчанию

Astro включает в себя несколько готовых переменных окружения:

  • import.meta.env.MODE: Режим, в котором работает ваш сайт. Это development при запуске с помощью astro dev и production при запуске с помощью astro build.
  • import.meta.env.PROD: true, если ваш сайт работает в режиме производства; false в противном случае.
  • import.meta.env.DEV: true, если ваш сайт работает в режиме разработки; false в противном случае. Всегда противоположно import.meta.env.PROD.
  • import.meta.env.BASE_URL: Базовый url, с которого обслуживается ваш сайт. Определяется опцией конфигурации base.
  • import.meta.env.SITE: Устанавливается опцией site, указанной в astro.config вашего проекта.
  • import.meta.env.ASSETS_PREFIX: Префикс для ссылок на ресурсы, сгенерированные Astro, если установлена опция конфигурации build.assetsPrefix. Это можно использовать для создания ссылок на ресурсы, не обрабатываемые Astro.

Используйте их как любую другую переменную окружения.

const isProd = import.meta.env.PROD;
const isDev = import.meta.env.DEV;

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

Заголовок раздела Настройка переменных окружения

Файлы .env

Заголовок раздела Файлы .env

Переменные окружения могут быть загружены из файлов .env в директории проекта.

Вы также можете задать режим (production или development) в имени файла, например, .env.production или .env.development, что сделает ваши переменные доступными только в заданном режиме.

Просто создайте файл .env в каталоге проекта и добавьте в него несколько переменных.

.env
# Это будет доступно только на стороне сервера!
DB_PASSWORD="foobar"
# Это будет доступно везде!
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"

Дополнительные сведения о файлах .env, приведены в документации Vite.

Использование CLI

Заголовок раздела Использование CLI

Вы также можете добавить переменные окружения при запуске проекта:

Окно терминала
PUBLIC_POKEAPI=https://pokeapi.co/api/v2 npm run dev

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

Заголовок раздела Получение переменных окружения

Доступ к переменным окружения в Astro осуществляется с помощью import.meta.env, используя функцию import.meta, добавленную в ES2020, вместо process.env.

Например, используйте import.meta.env.PUBLIC_POKEAPI, чтобы получить переменную окружения PUBLIC_POKEAPI.

// Когда import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);


// Когда import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);

При использовании SSR переменные окружения могут быть доступны во время выполнения в зависимости от используемого адаптера SSR. В большинстве адаптеров вы можете получить доступ к переменным окружения с помощью process.env, но некоторые адаптеры работают по-другому. Для адаптера Deno вы будете использовать Deno.env.get(). Смотрите, как получить доступ к среде выполнения Cloudflare для работы с переменными окружения при использовании адаптера Cloudflare. Сначала Astro проверит окружение сервера на наличие переменных, и если они не существуют, Astro будет искать их в файлах .env.

IntelliSense для TypeScript

Заголовок раздела IntelliSense для TypeScript

По умолчанию Astro предоставляет определение типа для import.meta.env в файле astro/client.d.ts.

Хотя вы можете объявить больше пользовательских переменных env в файлах .env.[mode], вы можете захотеть получить поддержку TypeScript IntelliSense для пользовательских переменных, которые имеют префикс PUBLIC_.

Для этого можно создать env.d.ts в src/ и настроить ImportMetaEnv следующим образом:

src/env.d.ts
interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // больше переменных env...
}


interface ImportMeta {
  readonly env: ImportMetaEnv;
}