コンテンツにスキップ
Astro Astro

環境変数

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

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

.env
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オプションがセットされます。
  • import.meta.env.ASSETS_PREFIX: build.assetsPrefix設定オプションが設定されている場合に、Astroが生成するアセットリンクに付加されるプレフィックスです。Astroが関与しないアセットリンクを作成するために使用できます。

他の環境変数と同様に使用します。

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

環境変数を設定する

セクションタイトル： 環境変数を設定する

.envファイル

セクションタイトル： .envファイル

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

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

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

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

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

CLIの利用

セクションタイトル： CLIの利用

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

Terminal window
POKEAPI=https://pokeapi.co/api/v2 npm 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`);

SSRを使う場合、使用するSSRアダプターによって実行時に環境変数にアクセスできます。ほとんどのアダプターではprocess.envから環境変数にアクセスできますが、DenoアダプターではDeno.env.get()を使用する必要があります。Cloudflareは独自の方法 (EN)で環境変数を処理します。Astroはサーバーの環境変数をチェックし、存在しない場合は.envファイルを探します。

TypeScriptのインテリセンス

セクションタイトル： TypeScriptのインテリセンス

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

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

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

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


interface ImportMeta {
  readonly env: ImportMetaEnv;
}