Nuxt.js で dotenv を活用する

Nuxt.js で dotenv を用いて 環境変数を管理する手法を紹介します。

Nuxt.js でアプリケーションを開発する際に APIのホストアドレスなどを環境毎に切り替えたいケースは多いでしょう。
Nuxt.js の dotenv-module を利用する事で、こういった環境個別の設定情報を .env ファイルを用いて柔軟に切り替えることが出来るようになります。

https://github.com/nuxt-community/dotenv-module

dotenv モジュールの利用

初めに必要なモジュールをインストールします。

$ npm i @nuxtjs/dotenv

インストールが完了したら、nuxt.config.js を開いて、モジュールのセクションに設定を追記します。

  modules: [
    '@nuxtjs/dotenv',
  ],

コレで準備は完了です。 プロジェクトのルートに、.env ファイルを作成して、変数情報を記録していきましょう。

API_URL=http://localhost:8000

記述した、 .env 内の変数情報は、Nuxt 内にて、 process.env.API_URL のようにして参照する事が可能です。

しかし、process.env の記述は、 Node サーバ上では清浄に動作するのですが、ブラウザ上では上手く動作させることが出来ないため、ブラウザ上で動作するような Vue コンポーネントの記述等で利用する事ができません。

ブラウザ側でも参照可能なように、 nuxt.config.jsに以下のように記述します。

env: {
    API_URL: process.env.FRONT_API_URL
},

これで指定した環境変数が、process.env.API_URL のような形で、ブラウザ上で動作するコードでも利用可能になります。

dotenv の運用

.env ファイルは通常 .gitignore に入れるなどして、バージョン管理から除外します。

デプロイ先の環境では.envファイルに記述する代わりに、サーバに環境変数を設定し値をアプリケーションに渡せるようにします。

作成した .env の項目を Nuxt.js 以外から利用したい場合には dotenv モジュールを CLI 経由で利用することが可能です。

$ node -r dotenv/config index.js

上記のように実行するすることでindex.jsから.envファイルに記述された環境変数情報を参照することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です