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

2 min読了の目安(約1800字TECH技術記事

概要

Nuxt.jsで環境変数を使う際、実行環境の環境変数がセットできるようになっていました。
確か、2.13 以前のversionではBuild時の変数がStringとして置換されるような仕様だったので環境変数はBuild時に確定させる必要がありました。
Build環境はCI環境で別環境になっているような構成は一般的だと思うので、Build用に環境変数用のファイルを用意してdotEnvで頑張る的な運用が必要だったのでとってもハッピーになりました。

使い方

公式ドキュメントはコチラ

nuxt.configruntimeConfig をセットする

2つのconfigファイルがあります
・ CSR時・SSR時どちらでも利用したいものは publicRuntimeConfig
・ SSR時のサーバーサイド限定で利用したいものは privateRuntimeConfig
に以下のように実行時の環境変数から値をセットできます。

export default {
  publicRuntimeConfig: {
    HOGE : process.env.HOGE,
    axios: {
      browserBaseURL:
        process.env.BROWSER_BASE_URL
    }
  },
  privateRuntimeConfig: {
    FUGA : process.env.FUGA,
    axios: {
      baseURL:
        process.env.API_BASE_URL 
    }
  }
}

呼び出し方

SSR時
asyncData($config) {
  console.log($config.FUGA) // SSRなのでprivateで宣言したほうも呼べる
  console.log($config.HOGE)
}
CSR時
mounted() {
  console.log(this.$config.HOGE)  // CSRなのでpublicで宣言した方しか呼べない
}

.env の扱い

実行環境の変数が使えるようになり、各環境ごとの env ファイルが必要なくなったため、今まで @nuxtjs/dotenv をインストールして実現していたものが必要なくなりました。
そうなると、ローカル環境などのデフォルトの環境変数の扱いがめんどくなるので、デフォルトの環境変数を .env ファイルを作成しその中に置いておけば適応されるように変更されました。
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config

そのため、プロジェクトルートに .env ファイルを作成し、以下のようなファイルを置いておけばデフォルトの変数がセットされるようになります。

.env
HOGE=hogehoge
FUGA=fugafuga
API_BASE_URL=https://hogehoge
BROWSER_BASE_URL=https://hogehoge

注意点

実行環境の変数が使えるようになったが、Build時に値を内容を確定させる必要があるものに関しては、注意が必要です。
例えばNuxt.jsではheadの内容を nuxt.configheadプロパティを利用してセットすることができますが、ここの内容はおそらくBuild時に確定するらしく RuntimeConfighead プロパティを追加してみても上書きされませんでした。
例にあるようにaxiosではnuxtの変数を上書きできたので、同じような感じで行けるかなと思っていたんですが @nuxt/axios 側に機能として持っているんでしょうか
分かる人いたら教えて下さい。