フリーランチ食べたい

Python/機械学習/データ解析/ソフトウェア開発などなど

Nuxtで@nuxtjs/dotenvを使って環境変数を環境ごとに読み分ける

Nuxt開発の小ネタです。環境変数を開発環境/本番環境で切り分けたいときにどうすればよいか、わからなかったのでメモしておきます。

f:id:ikedaosushi:20190417214843p:plain

環境

  • nuxt@2.5.1
  • vue@2.6.10
  • @nuxtjs/dotenv@1.3.0

dotenvモジュール

nuxtのdotenvモジュールを使います。

github.com

インストールは下記コマンドで行ってください。

$ npm install --save @nuxtjs/dotenv
# yarn add @nuxtjs/dotenv

.envファイル作成

それでは環境変数を設定するファイルを作成していきます。 configディレクトリを作成し、 .env.dev.env.prod のように環境ごとにファイルを作成します。

config
├── .env.dev
└── .env.prod

それぞれのファイルに環境変数を記載します。

config/.env.dev

FOO=0
BAR=hoge

nuxt側の設定

あとはconfigファイルを設定するだけです。 環境変数の NODE_ENV で読み込みファイルを変えるように設定します。

nuxt.config.js

  modules: [
    [
      '@nuxtjs/dotenv',
      { filename: process.env.NODE_ENV !== 'production' ? "./config/.env.dev" : "./config/.env.prod" }
    ]
  ],

簡単ですね。

実行

あとは起動時に環境を切り分けるだけです。 ローカルで検証する場合が次のような感じですね。

$ npx nuxt # => /config/.env.dev を読み込んで起動
$ npx nuxt start # => /config/.env.prod を読み込んで起動

まとめ

Nuxt開発時に環境変数を開発環境/本番環境で切り分ける方法を紹介しました。 必要になる場面は多いと思うのですが、良い方法がパッと出てこなかったのでまとめてみました。 もっと良い方法があれば是非教えてください!