環境変数

Astroは環境変数に関するViteの組み込みのサポートを利用しています。環境変数を扱うためにViteが備える任意の方式を使用できます。

サーバ側のコードでは すべて の環境変数が使えますが、クライアント側のコードではセキュリティのためにPUBLIC_というプレフィックスを持つ環境変数のみが使えることに注意してください。

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: サイトが動作しているモードです。これはastro devを実行している場合はdevelopmentで、astro buildを実行している場合はproductionになります。
• 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: プロジェクトのastro.configで指定されたsiteオプションがセットされます。

環境変数は、プロジェクトディレクトリの.envファイルから読み込めます。

また、.env.productionや.env.developmentのように、ファイル名にモード(productionまたはdevelopment)を付けることもできます。この場合、環境変数はそのモードでのみ有効になります。

プロジェクトディレクトリに.envファイルを作成し、そこにいくつかの変数を追加するだけです。

# これはサーバー上で実行したときのみ有効です！
DB_PASSWORD="foobar"
# これはどこからでも呼び出せます！
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"

.envファイルについてさらに知りたい場合は、Viteのドキュメントを参照してください。

プロジェクトの実行時に環境変数を追加することも可能です。

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

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

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

Viteではprocess.envの代わりに、ES2020で追加されたimport.meta機能を使用したimport.meta.envを使用します。

例えば、環境変数PUBLIC_POKEAPIを取得するには、import.meta.env.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`);

デフォルトで、Viteはvite/client.d.tsの中でimport.meta.envの型定義を提供します。

.env.[mode]ファイルではより多くのカスタム環境変数を定義できますが、PUBLIC_をプレフィックスとするユーザーが定義した環境変数のTypeScriptインテリセンスを取得したいと思うかもしれません。

これを実現するには、src/にenv.d.tsを作成し、ImportMetaEnvを以下のように設定します。

interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // その他の環境変数...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}