Astroのデフォルト環境変数を使って開発環境と本番環境で条件分岐する方法

Astroのデフォルト環境変数を使って開発環境と本番環境で条件分岐する方法

Astroでは、すぐに使用できる デフォルト環境変数 というものが存在します。

その中でも、開発環境と本番環境を判別できる環境変数が便利だったので、この記事で紹介していきます。

検証環境

当記事で紹介する方法は、以下のバージョンで動作確認を行っています。

検証環境のバージョン情報

Astro
Astro 5.1.3

バージョンの違いによっては、この記事の通りに動作しない可能性がありますので、ご理解いただけますと幸いです。

Astroのデフォルト環境変数

Astroで開発環境か本番環境かを判別するためのデフォルト環境変数は、以下の3つです。

  • import.meta.env.MODE:現在のモード(developmentまたはproduction)を取得
  • import.meta.env.PROD:本番環境ならtrue
  • import.meta.env.DEV:開発環境ならtrue

import.meta.env.MODE

import.meta.env.MODEは、現在動いているサイトのモードを取得できます。

astro devを実行している場合はdevelopmentastro buildを実行している場合はproductionになります。

Astro
    ---
const mode = import.meta.env.MODE;
---
 
<!-- developmentかproductionとなる -->
<p>現在のモード: {mode}</p>
  

import.meta.env.PROD

import.meta.env.PRODは、本番環境の場合はtrue、開発環境の場合はfalseになります。

Astro
    ---
const isProd = import.meta.env.PROD;
---
 
{
  isProd && (
    // 本番環境のみで表示する要素
  )
}
  

本番環境でのみ表示したい要素や解析タグなどを設定する際に便利ですね。

import.meta.env.DEV

import.meta.env.DEVは、開発環境の場合はtrue、本番環境の場合はfalseになります。

Astro
    ---
const isDev = import.meta.env.DEV;
---
 
{
  isDev && (
    // 開発環境のみで表示する要素
  )
}
  

開発環境でのみ表示したい要素やデバッグ用のコードなどを設定する際に便利です。

Astroの本番環境に関する注意点

Astroでは、astro buildを実行して生成された静的ファイルをastro previewでプレビューすることが可能です。

package.json
JSON
    {
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}
  

しかし、このプレビュー環境ではimport.meta.env.PRODtrueになります。

つまり、本番ビルドをローカルで確認しているにもかかわらず、環境変数的には「本番環境」として扱われる点に注意が必要です。

本番用のコードが意図せず表示されてしまう可能性があるため、開発時には注意してください。

【まとめ】Astroのデフォルト環境変数を使って開発環境と本番環境で条件分岐する方法

Astroのデフォルト環境変数を使って、開発環境と本番環境で条件分岐する方法を紹介しました。

デフォルト環境変数をおさらいすると、

  • import.meta.env.MODE:現在のモード(developmentまたはproduction)を取得
  • import.meta.env.PROD:本番環境ならtrue
  • import.meta.env.DEV:開発環境ならtrue

となります。

デフォルト環境変数は手軽に扱えて便利ですが、astro previewでの挙動には注意して使用してください。

環境変数
Astroプロジェクトでの環境変数の使い方を学ぶ
環境変数 favicon https://docs.astro.build/ja/guides/environment-variables/
環境変数