Nuxt.jsでprocess.env.NODE_ENVを参照する際の挙動についてまとめてみた

Nuxtでprocess.env.NODE_ENVを参照する際にハマりがちだったので挙動をまとめました。

なお、環境は以下のとおりです。

  "dependencies": {
    "cross-env": "7.0.0",
    "nuxt": "2.11.0"
  },

※この記事で記載しているファイルは内容を一部抜粋したものです。

デフォルトの挙動

まず、何の設定もせずにyarn devしたときとyarn build && yarn startしたときの値を確認します。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },

<template>
  <div />
</template>

<script>
export default {
  mounted() {
    console.log(process.env.NODE_ENV);
  }
};
</script>

このようにデフォルトで値が入っていることがわかりました。次に、環境変数を指定した際の挙動を見ていきます。

環境変数を指定したとき

  "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "build": "cross-env NODE_ENV=build nuxt build",
    "start": "cross-env NODE_ENV=start nuxt start"
  },

環境変数に指定した値が入ると思いきや、デフォルトの値が優先されてしまいました。これでは困るので、次にNODE_ENVをnuxt.config.jsに指定したときの挙動を見てみます。

env を指定したとき

  env: {
    NODE_ENV: process.env.NODE_ENV
  }

  "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "build": "cross-env NODE_ENV=build nuxt build",
    "start": "cross-env NODE_ENV=start nuxt start"
  },

今回はこのようにビルド時に埋め込んだ値が取得できることがわかりました。

まとめ

というわけで、process.env.NODE_ENVの値を Nuxt で定義したコンポーネントから取得する際は、nuxt.config.jsのenvプロパティにNODE_ENVを指定したほうが間違いは起こりにくいかもしれません。

しかし、今回の記事では触れていませんが、例えば Nuxt を express で動かす際などは、process.env.NODE_ENVの値をserver.jsなどのファイルから参照する関係で、予想と違う形でprocess.env.NODE_ENVの値が返ってくることがあるかもしれません。

あまりないケースかとは思いますが、そのようなことを考えると build 時とサーバー起動時に設定するNODE_ENVの値は同じにしておいたほうが無難っぽいです。

追記

Nuxt のバージョン2.13.0からruntimeConfigのサポートが入りました。これにより、環境変数の設定がより簡潔に書けるようになるかもしれません。詳しくは以下のページをご確認ください。

• Release v2.13.0 · nuxt/nuxt.js
• いつの間にかNuxt.jsで実行時環境変数が使えるようになっていた件