import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

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

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

SECRET_PASSWORD=password123PUBLIC_ANYBODY=there

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

:::caution Файлы .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 вашего проекта.
• import.meta.env.ASSETS_PREFIX: Префикс для ссылок на ресурсы, сгенерированные Astro, если установлена опция конфигурации build.assetsPrefix. Это можно использовать для создания ссылок на ресурсы, не обрабатываемые Astro.

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

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

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

Файлы .env

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

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

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

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

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

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

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

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

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

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

// Когда import.meta.env.SSR === trueconst data = await db(import.meta.env.DB_PASSWORD);// Когда import.meta.env.SSR === falseconst data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);

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

IntelliSense для TypeScript

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

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

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

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