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

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

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

.env

SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there

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

Осторожно

.env файлы не загружаются внутри конфигурационных файлов.

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

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

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 вашего проекта.

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

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

.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

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

npm

POKEAPI=https://pokeapi.co/api/v2 npm run dev

pnpm

POKEAPI=https://pokeapi.co/api/v2 pnpm run dev

Yarn

POKEAPI=https://pokeapi.co/api/v2 yarn run dev

Осторожно

Переменные, заданные таким способом, будут доступны везде в рамках вашего проекта, включая клиент.

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

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

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

For example, use import.meta.env.PUBLIC_POKEAPI to get the PUBLIC_POKEAPI environment variable.

// When import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);

// When import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);

Осторожно

Поскольку Vite статически заменяет import.meta.env, вы не сможете получить к нему доступ с помощью динамических ключей, таких как import.meta.env[key].

IntelliSense для TypeScript

Раздел, озаглавленный IntelliSense для TypeScript

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

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

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

src/env.d.ts

interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}