環境変数

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 (development | production): サイトが動作しているモードです。これはastro devを実行している場合はdevelopmentで、astro buildを実行している場合はproductionになります。
• import.meta.env.BASE_URL (string): あなたのサイトの配信元のベースURLです。これは、baseオプションによって決まります。
• import.meta.env.PROD (boolean): あなたのサイトが本番環境で動作しているかどうかです。
• import.meta.env.DEV (boolean): 開発中のサイトかどうかです（常にimport.meta.env.PRODの反対）。
• import.meta.env.SITE (string): プロジェクトのastro.configで指定されたsiteオプション.

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

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

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

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

.env                # すべてのケースで読み込まれます。
.env.local          # すべてのケースで読み込まれ、gitにはignoreされます。
.env.[mode]         # 指定したモードのみで読み込まれます。
.env.[mode].local   # 指定したモードのみで読み込まれ、gitにはignoreされます。

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;
}