Saltearse al contenido
Astro Astro

Usando variables de entorno

Astro usa Vite para el manejo de las variables de entorno el cual te permite usar cualquiera de sus métodos.

Ten en cuenta que todas las variables de entorno estarán disponibles en el servidor, mientras que solo las variables de entorno con el prefijo PUBLIC_ estarán disponibles en el cliente por motivos de seguridad.

.env
SECRET_PASSWORD=contraseña123
PUBLIC_ANYBODY=ahí

En este ejemplo, PUBLIC_ANYBODY (accesible mediante import.meta.env.PUBLIC_ANYBODY) estará disponible tanto en el servidor como el cliente, mientras que SECRET_PASSWORD (accesible mediante import.meta.env.SECRET_PASSWORD) estará disponible solo en el servidor.

Variables de entorno predeterminadas

Astro incluye algunas variables de entorno por defecto:

  • import.meta.env.MODE: El modo en el que se ejecuta tu proyecto. Esto es development al ejecutar astro dev y production al ejecutar astro build.
  • import.meta.env.PROD: true si tu proyecto se está ejecutando en producción; false en caso contrario.
  • import.meta.env.DEV: true si tu proyecto se está ejecutando en desarrollo; false en caso contrario. Siempre lo contrario de import.meta.env.PROD.
  • import.meta.env.BASE_URL: La URL base desde la que se sirve tu proyecto. Esto está determinado por la opción de configuración base.
  • import.meta.env.SITE: Esto se establece en la opción site especificada en astro.config de tu proyecto.
  • import.meta.env.ASSETS_PREFIX: El prefijo para los enlaces de activos generados por Astro si se establece la opción de configuración build.assetsPrefix. Esto se puede usar para crear enlaces de activos no manejados por Astro.

Úsalas como cualquier otra variable de entorno.

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

Configurando variables de entorno

Archivos .env

Las variables de entorno se pueden cargar desde los archivos .env en la raíz de tu proyecto.

También puedes adjuntar un modo (ya sea production o development) al nombre del archivo, como .env.production o .env.development, lo que hace que las variables de entorno solo tengan efecto en ese modo.

Simplemente crea un archivo .env en la raíz de tu proyecto y agrega algunas variables.

.env
# ¡Esto solo estará disponible cuando se ejecute en el servidor!
DB_PASSWORD="foobar"
# ¡Estará disponible en todas partes!
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"

Para obtener más información sobre los archivos .env, consulta la documentación de Vite.

Usando la CLI

También puedes agregar variables de entorno a medida que ejecuta su proyecto:

Terminal window
PUBLIC_POKEAPI=https://pokeapi.co/api/v2 npm run dev

Obteniendo variables de entorno

En lugar de usar process.env, Vite usa import.meta.env, que usa la función import.meta agregada en ES2020.

Por ejemplo, usa import.meta.env.PUBLIC_POKEAPI para obtener la variable de entorno PUBLIC_POKEAPI.

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


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

Cuando se utiliza SSR, se puede acceder a las variables de entorno en tiempo de ejecución en función del adaptador SSR que se esté utilizando. Con la mayoría de los adaptadores puedes acceder a las variables de entorno con process.env, pero algunos adaptadores funcionan de forma diferente. Para el adaptador Deno, utilizará Deno.env.get(). Mira cómo acceder al runtime de Cloudflare para manejar las variables de entorno cuando utilices el adaptador de Cloudflare. Astro comprobará primero el entorno del servidor en busca de variables, y si no existen, Astro las buscará en los archivos .env.

IntelliSense para TypeScript

De forma predeterminada, Vite proporciona una definición de tipos para import.meta.env en astro/client.d.ts.

Si bien puedes definir más variables de entorno personalizadas en los archivos .env.[mode], es posible que desees obtener TypeScript IntelliSense para las variables de entorno definidas por el usuario que tienen el prefijo PUBLIC_.

Para lograr esto, puedes crear un archivo env.d.ts en src/ y configurar ImportMetaEnv así:

src/env.d.ts
interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // más variables de entorno...
}


interface ImportMeta {
  readonly env: ImportMetaEnv;
}