Utiliser des variables d'environnement
Astro utilise le support intégré de Vite pour les variables d’environnement, et vous permet d’utiliser n’importe laquelle de ses méthodes pour travailler avec elles.
Notez que si toutes les variables d’environnement sont disponibles dans le code côté serveur, seules les variables d’environnement préfixées par PUBLIC_
sont disponibles dans le code côté client pour des raisons de sécurité.
Dans cet exemple, PUBLIC_ANYBODY
(accessible via import.meta.env.PUBLIC_ANYBODY
) disponible dans le code du serveur ou du client, tandis que SECRET_PASSWORD
(accessible via import.meta.env.SECRET_PASSWORD
) ne sera disponible que côté serveur.
Les fichiers .env
ne sont pas chargés dans les fichiers de configuration.
Variables d’environnement par défaut
Astro inclut quelques variables d’environnement par défaut :
import.meta.env.MODE
: Le mode dans lequel tourne votre site. C’estdevelopment
lorsque vous exécutezastro dev
etproduction
lorsque vous exécutezastro build
.import.meta.env.DEV
:true
si votre site tourne en développement ;false
sinon. Toujours l’opposé deimport.meta.env.PROD
.import.meta.env.BASE_URL
: L’URL de base à partir de laquelle votre site est servi. Elle est déterminée par l’option de configurationbase
(EN).import.meta.env.SITE
: C’est l’optionsite
(EN) spécifiée dans le fichierastro.config
de votre projet.import.meta.env.ASSETS_PREFIX
: Le préfixe pour les liens d’actifs générés par Astro si l’option de configurationbuild.assetsPrefix
(EN) est définie. Ceci peut être utilisé pour créer des liens d’actifs non gérés par Astro.
Utilisez-les comme n’importe quelle autre variable d’environnement.
Définir des variables d’environnement
Le fichier .env
Les variables d’environnement peuvent être chargées à partir des fichiers .env
dans le répertoire de votre projet.
Vous pouvez aussi attacher un mode (soit production
soit development
) au nom du fichier, comme .env.production
ou .env.development
, ce qui fait que les variables d’environnement ne prennent effet que dans ce mode.
Il suffit de créer un fichier .env
dans le répertoire du projet et d’y ajouter quelques variables.
Pour plus d’informations sur les fichiers .env
, voir la documentation de Vite (EN).
Utilisation en CLI
Vous pouvez également ajouter des variables d’environnement lorsque vous exécutez votre projet :
Obtenir des variables d’environnement
Au lieu d’utiliser process.env
, avec Vite vous utilisez import.meta.env
, qui utilise la fonctionnalité import.meta
ajoutée dans ES2020.
Par exemple, utilisez import.meta.env.PUBLIC_POKEAPI
pour obtenir la variable d’environnement PUBLIC_POKEAPI
.
Parce que Vite remplace statiquement import.meta.env
, vous ne pouvez pas y accéder avec des clés dynamiques comme import.meta.env[key]
.
Lorsque vous utilisez SSR, les variables d’environnement peuvent être accédées au moment de l’exécution en fonction de l’adaptateur SSR utilisé. Avec la plupart des adaptateurs, vous pouvez accéder aux variables d’environnement avec process.env
, mais certains adaptateurs fonctionnent différemment. Pour l’adaptateur Deno, vous utiliserez Deno.env.get()
. Voir comment accéder au runtime Cloudflare pour gérer les variables d’environnement lors de l’utilisation de l’adaptateur Cloudflare. Astro vérifiera d’abord l’environnement du serveur pour les variables, et si elles n’existent pas, Astro les cherchera dans les fichiers .env.
Autocomplétion pour TypeScript
Par défaut, Astro fournit une définition de type pour import.meta.env
dans astro/client.d.ts
.
Bien que vous puissiez définir plus de variables env personnalisées dans les fichiers .env.[mode]
, vous voudrez peut-être obtenir l’autocomplétion TypeScript pour les variables env définies par l’utilisateur qui sont préfixées par PUBLIC_
.
Pour cela, vous pouvez créer un fichier env.d.ts
dans src/
et configurer ImportMetaEnv
comme ceci :