Nuxt.jsの環境変数管理方法について

Nuxt.jsで作ったアプリケーションをコンテナ化して、kubernetesのPodとして稼働させるようなケースでは、外部APIサーバ情報などを環境変数を利用して渡すことがよくあります。一年以上前からNuxt.jsを利用している方は、@nuxtjs/dotenvを使っている方や、コンテナビルド時に作成するイメージを環境ごとに分けるなどしていた方もいたかもしれません。今回は、Nuxt.js v2.13で組み込まれたruntimeConfigについて紹介します。

実際にやってみる

公式ドキュメントは、こちらをみてください。

下記のような環境変数を組み込むとします。

API_URL=http://localhost:8080

envプロパティ

よくネットなど検索すると出てくるnuxt.config.jsのenvプロパティの例が見つかると思います。

export default {
  env: {
    apiUrl: process.env.API_URL || "http://localhost:8080",
  }
}

このケースは、ビルド時(=コンテナイメージ作成時)にAPI_URLが文字列として埋め込まれます。kubernetesのPodとして実行時に環境変数を渡したとしても、ビルド時に値として埋め込まれてしまうので、この方法では実現できません。

RuntimeConfigプロパティ

RuntimeConfig プロパティという動的設定や環境変数をnuxtコンテキストにわたす仕組みで実現します。

export default {
  publicRuntimeConfig: {
    apiUrl: process.env.API_URL || "http://localhost:8080",
  }
}

ソースコードでは、　$configから取得します。componentsなどから取る例は、下記の通りです。

import {
  defineComponent,
  ref,
} from '@nuxtjs/composition-api'
export default defineComponent({
  setup(_props: any, context: any) {
    const { $config } = context.root
    console.log($config.apiUrl)
    ...
  },
})

dotenvプラグインを追加せずに、標準機能でできるようになったのは魅力的です。定期的に公式ドキュメントに目を通すと新たな発見がありますね。