.env

.env ファイルは、ビルド/開発時の環境変数を指定します。
このファイルは、機密情報をリポジトリにプッシュしないように、.gitignore ファイルに追加する必要があります。

開発時、ビルド時、生成時

Nuxt CLI には、開発モードおよび nuxt build および nuxt generate の実行時に、組み込みのdotenvサポートがあります。

プロジェクトのルートディレクトリに .env ファイルがある場合、任意のプロセス環境変数に加えて、そのファイルは開発時、ビルド時、生成時に自動的にロードされます。そこに設定された環境変数は、nuxt.config ファイルとモジュール内でアクセスできます。

.env
MY_ENV_VARIABLE=hello
なお、.env から変数を削除したり、.env ファイル自体を削除しても、すでに設定されている値は解除されません。

カスタムファイル

別のファイルを使用したい場合、たとえば .env.local や .env.production を使用したい場合は、Nuxt CLI を使用する際に --dotenv フラグを渡すことで可能です。

ターミナル
npx nuxt dev --dotenv .env.local

開発モードで .env を更新すると、新しい値を process.env に適用するために Nuxt インスタンスが自動的に再起動されます。

アプリケーションコードでは、単純な環境変数の代わりにランタイム設定を使用する必要があります。

本番環境

サーバーが構築された後、サーバーを実行する際に環境変数を設定するのはあなたの責任です。

この時点では、.env ファイルは読み込まれません。その方法は、環境によって異なります。

この設計上の決定は、サーバーレスプラットフォームや Cloudflare Workers のようなエッジネットワークなど、従来のファイルシステムが利用できない場合もある様々なデプロイ環境間での互換性を確保するために行われました。

.env ファイルは本番環境では使用されないため、ホスティング環境が提供するツールや方法を使用して環境変数を明示的に設定する必要があります。一般的なアプローチをいくつか紹介します。

  • ターミナルを使用して環境変数を引数として渡すことができます。
    $ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs
  • .bashrc や .profile のようなシェル設定ファイルで環境変数を設定できます。
  • Vercel、Netlify、AWS など、多くのクラウドサービスプロバイダーは、ダッシュボード、CLI ツール、または設定ファイルを通じて環境変数を設定するためのインターフェースを提供しています。
runtimeConfigは、本番環境で NUXT_ で始まらない環境変数を取得しません (https://nuxt.dokyumento.jp/docs/4.x/guide/going-further/runtime-config#environment-variables).

本番環境のプレビュー

ローカルでの本番環境プレビュー目的では、nuxt preview の使用をお勧めします。このコマンドを使用すると、便宜上 .env ファイルが process.env にロードされます。このコマンドを実行するには、パッケージディレクトリに依存関係がインストールされている必要があることに注意してください。

または、ターミナルを使用して環境変数を引数として渡すこともできます。たとえば、Linux または macOS の場合

ターミナル
DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs

純粋な静的サイトの場合、プロジェクトがプリレンダリングされた後で実行時設定を設定することはできません。

Docs > 4 X > Guide > Going Further > Runtime Configで詳細をお読みください。
ビルド時に設定された環境変数を使用したいが、後でこれらの更新を気にしない場合 (またはアプリ内で反応的に更新する必要がある場合のみ) は、appConfig がより良い選択肢かもしれません。appConfig は、nuxt.config 内 (環境変数を使用) およびプロジェクト内の ~/app.config.ts ファイル内の両方で定義できます。
詳細については、ドキュメント > 4 X > ガイド > ディレクトリ構造 > アプリ設定 を参照してください。