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

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

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

検証環境

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

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

Astro 5.1.3

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

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

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

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

Astro

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

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

Astro

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

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

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

Astro

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

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

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

package.json

JSON

    {
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}

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

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

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

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

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

となります。

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