Nuxt.jsの環境変数でまだdotenv使ってるの？そろそろruntimeConfig使いましょう♪

#dotenvで設定したenvファイルはソースの表示で見えてしまう。

まず、最近かなり驚いたことだが、nuxt.jsバージョン2.13以前は、dotenv を使った方法が一般的でした。
そんな私も漏れなく、何かにつけてはdotenv。
nuxt.config.jsに

nuxt.config.js

export default {
 env:proccess.env
}

と書いては、環境変数を入れてました。
これ実は、envファイルの中身駄々洩れなんです。

ということで、nuxtバージョン2.13以降は、runtimeConfigを使用しましょう。
公式ページにもありますが、dotenvのサポートがされている”publicRuntimeConfig”や”privateRuntimeConfig”が使えます。
ちなみに”privateRuntimeConfig”はSPAモードでは使用できません。

SSRモードの場合は、解説ページが結構多い印象でしたので、
SPAモードの方を今回は解説していきたいと思います。
まずは、envファイルを用意してあげます。

.env

BASEURL:'https://hoge.org'

envファイルの情報を読み込むために、nuxt.config.jsに
publicRuntimeConfigに環境変数として使用したいものを下記のように追加します。

nuxt.config.js

export default {
   publicRuntimeConfig:{baseURL: proccess.env.BASEURL||''}
}

これだけなんです。
めっちゃ簡単ですよね？？
それでこれをvueファイルとかで使用する場合は
$configを付けて使用することができます。

sample.vue

<script>
export default {
 mounted(){
  console.log(this.$config.baseURL)
 }
}
</script>

このように設定すると、開発ツールでenvファイルのbaseURLが出力されてくるはずです。
さて実は、一つ問題があるのです。

#storeのstateでは$configでenvファイルの値を直接参照できない。

これ結構、致命的ですよね？
ここはちょっと工夫が必要です。

ここでNuxtのライフサイクルをちょっとおさらい。
公式サイトにも
ありますが、一番初めに"nuxtServerInit"というのが行われます。

serverInitと書いてあるようにこちらのnuxtServerInitはサーバーサイドに限り実行されます。主にサーバーサイドからクライアントサイドに直接渡したいデータがあるときに使用します。

ただし、今回はSPAモードの場合で考えているのでnuxtServerInitは使えません。
ではどうするのかというと
SPAモードでも同じように、nuxtServerInitのような仕組みを作る必要があります。
そこで、actionsを通して、stateに値を埋め込むという方法をとります。

では、実際にサンプルコードでみてみましょう。
まずは、storeの中にindex.tsというファイルを作りvuexのコードを作ります。
最近流行りというかもう既に現場なんかでは必須になっている、TypeScriptバージョンでみていきましょう。
envやnuxt.config.jsの設定はすでに、説明しているものの続きだと思ってください。

index.ts

interface State {
 testURL: string
}
const state = () => ({
 testURL:''
})
const mutations = {
 setTestURl(state:State,config:any) {
  state.testURL = config.baseURL
}
const actions = {
 initEnvURL({commit},$config) {
 commit('setTestURl',$config)
}
}
export default {state,mutations,actions}

これでまずvuexの中身は完成です。
これをNuxtのアプリが起動した段階で呼び出すために、
pluginsディレクトリの中に下記のようなソースが必要となります。
今回はサンプルとして、plugins/nuxtClientInit.tsというファイルを作成します。

nuxtClientInit.ts

import {Context} from "@nuxt/types";

export default function (context:Context) {
 context.store.dispatch('initEnvURL',context.$config)
}

そして最後に"nuxt.config.ts"の"plugins"に設定を行います。

nuxt.config.ts

export default{
 plugins:[
  {src:/'~/plugins/nuxtClientInit.ts',ssr:false}
]
}

これでNuxtのアプリケーション起動時にstoreのstate内にenvファイルの
baseURLが入ってきます。

いかがでしたでしょうか？
ちょっとstoreの部分では躓きましたが、runtimeConfigを使った方がシンプルに
環境変数を呼び出せ、きちんと隠すことができます。
皆さんもぜひ挑戦してみてください。

下記参考にさせていただいたサイトおよび記事を載せさせていただきます。
私はまだまだ素人に毛が生えた程度の駆け出しエンジニアです。
本記事の誤り等ございましたら、ご教示いただけますと泣いて喜びます。

☆Nuxtのライフサイクルについて
Nuxtのライフサイクルを完全に理解する
☆[Nuxt.js]nuxtServerInitがSPAモードでは使えないので代替のアクションを用意する
SPAモードの代替アクション
☆nuxt-client-init-module を使って Nuxt.js にクライアントサイド限定の初期化処理を追加する
nuxt-client-init-module を使って Nuxt.js にクライアントサイド限定の初期化処理を追加する
☆Access Nuxt $config within Vuex State
Access Nuxt $config within Vuex State