Astroでは、すぐに使用できる デフォルト環境変数 というものが存在します。
その中でも、開発環境と本番環境を判別できる環境変数が便利だったので、この記事で紹介していきます。
検証環境
当記事で紹介する方法は、以下のバージョンで動作確認を行っています。
検証環境のバージョン情報
バージョンの違いによっては、この記事の通りに動作しない可能性がありますので、ご理解いただけますと幸いです。
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
を実行している場合はdevelopment
、astro build
を実行している場合はproduction
になります。
---
const mode = import.meta.env.MODE;
---
<!-- developmentかproductionとなる -->
<p>現在のモード: {mode}</p>
import.meta.env.PROD
import.meta.env.PROD
は、本番環境の場合はtrue
、開発環境の場合はfalse
になります。
---
const isProd = import.meta.env.PROD;
---
{
isProd && (
// 本番環境のみで表示する要素
)
}
本番環境でのみ表示したい要素や解析タグなどを設定する際に便利ですね。
import.meta.env.DEV
import.meta.env.DEV
は、開発環境の場合はtrue
、本番環境の場合はfalse
になります。
---
const isDev = import.meta.env.DEV;
---
{
isDev && (
// 開発環境のみで表示する要素
)
}
開発環境でのみ表示したい要素やデバッグ用のコードなどを設定する際に便利です。
Astroの本番環境に関する注意点
Astroでは、astro build
を実行して生成された静的ファイルをastro preview
でプレビューすることが可能です。
{
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
}
}
しかし、このプレビュー環境ではimport.meta.env.PROD
がtrue
になります。
つまり、本番ビルドをローカルで確認しているにもかかわらず、環境変数的には「本番環境」として扱われる点に注意が必要です。
本番用のコードが意図せず表示されてしまう可能性があるため、開発時には注意してください。
【まとめ】Astroのデフォルト環境変数を使って開発環境と本番環境で条件分岐する方法
Astroのデフォルト環境変数を使って、開発環境と本番環境で条件分岐する方法を紹介しました。
デフォルト環境変数をおさらいすると、
import.meta.env.MODE
:現在のモード(development
またはproduction
)を取得import.meta.env.PROD
:本番環境ならtrue
import.meta.env.DEV
:開発環境ならtrue
となります。
デフォルト環境変数は手軽に扱えて便利ですが、astro preview
での挙動には注意して使用してください。
