Nuxt.jsにおける環境変数の扱い方(2020年後期版)

この記事はしおだいふく Advent Calendar 2020 11日目の記事です。

今日は環境変数をうまく扱うために丸一日溶かした話です。 個人の感想ですが、環境変数ファイルの扱いはVue CLI3が一番上手で便利だなぁと思うのですが、 ないものねだりをしてもしょうがないので諦めてできることをやっていきます。

Nuxt.jsにおける環境ごとに異なる設定値の扱い

Nuxt.jsには@nuxtjs/dotenvっていうモジュールがあって...という話はもう古くなりつつありますね。

Nuxt.jsのバージョン2.13からはdotenvがビルトインでサポートされており、特に追加のモジュールを使うことなく.envファイルの中身をprocess.envにつっこむことができるようになりました。 さらに、新しくRuntime Configという概念が用意されています。

詳しくは公式ブログの記事を参照してください。

環境変数の使い方

.envファイルから読み込んだ環境変数は直接アプリケーション内で参照するのはちょっと不便です。 というのは、process.env.HOGEの型がstring | undefinedなので、いちいちアプリケーション側でフォールバックを書かなければいけないからです。

<script>
export default defineComponent({
  setup: () => {
    // undefinedの場合は'hoge'を使う
    const value = ref<string>(process.env.HOGE || 'hoge')
    // ......
  }
})
</script>

これをいちいちやるのは面倒なので、Runtime Configでprocess.envを受けておきます。

export default {
  publicRuntimeConfig: {
    HOGE: process.env.HOGE || 'hoge',
  }
}

アプリケーション内では、コンテキストから取得できる$config変数を経由してアクセスします。 これはstring型になっているのでアプリケーション側でフォールバックしなくても怒られません。

<script>
export default defineComponent({
  setup: () => {
    const { $config } = useContext()
    const value = ref<string>($config.HOGE)
    console.log($config.HOGE)
    // ......
  }
})
</script>

最高じゃないか。

ダメなポイント

と思ったら、Nuxt.jsビルトインのdotenvには弱点がありました。 この機能、ファイル名が.envでないと読み込んでくれません。

Vue CLIのように、環境変数を見て.env.developmentとか.env.productionをいい感じに使い分けてくれる機能がないどころか、 読み込むファイル名を変更するオプションもありません。 このあたりの機能が必要な場合は、従来どおりdotenvモジュールを使わざるを得ません。 今回はもうdotenvモジュールを使いたくない気持ちが勝ったので、ビルド実行時にファイルを置き換えることで対応しました。

オプションくらい用意してくれ頼む。

余談: .envファイルを.gitignoreしろという話

dotenvの公式ではなぜか「.envは.gitignoreしろ」という話がかかれていますが、なんかこれちょっと古い時代の話（もしくはRubyで使われてたころの名残）な気がしますね。 もしかしたら環境変数（あるいはdotenv)の使い方として妥当ではないのかもしれませんが、フロントエンド周りで使う場合はローカル環境/開発環境/本番環境によって異なる設定値を掃き出したいという用途がほとんどだと思うので、 人によって違うファイルを使うとかそういう性質のものではないとおもいます¹。

単純にCI/CD環境のような一時的に作成されて破棄される環境で、ビルドとデプロイを自動化するときに無駄に苦しむので普通に.envはコミットしていいと思います。 もちろん公開しちゃまずいような値が記載されてないことが大前提ではありますが。 「駆け出しエンジニアがセキュリティ上よろしくない値をうっかり.envに書く可能性がある」以外でファイルをコミットしてはダメな理由をご存じの方がいらっしゃいましたらTwitterで教えて下さい。

まとめ

本日のまとめです。 Nuxt.jsはバージョン2.13を境に大きく変わっているので、知識のアップデートが必要ですね。

• .envファイルを読むだけなら@nuxtjs/dotenvはいらなくなったよ
• Runtime Configってのが新しくできたよ
• .envコミットしてはいけない理由がよくわからないよ