Nuxt.jsのRuntimeConfigを使ってみる

Nuxt.jsのRuntimeConfigを使って、環境変数の管理やAPIキーを隠す方法を試してみます。

サンプルコード

RuntimeConfigはNuxt.jsの2.13以降で使用できるプロパティで、動的な設定や環境変数をnuxtコンテキストに渡すことができます。
クライアントとサーバーの両方で使用する場合はpublicRuntimeConfig、サーバーからのみ使用する場合はprivateRuntimeConfigを使用します。

例として、ベースURLとAPIキーを設定する想定で試してみます。
プロジェクトのルートディレクトリに.envファイルを設置して、以下のような内容にします。

BASE_URL=https://example.com
API_KEY=abcdefg

値は例なので、適宜変更してください。

nuxt.config.jsで下記を追加します。

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL
  },
  privateRuntimeConfig: {
    apiKey: process.env.API_KEY
  }
}

前述のとおり、publicRuntimeConfigはクライアントとサーバーの両方で使用可能、privateRuntimeConfigはサーバーからのみ使用可能になります。
SSRやSSGといったサーバーサイドでのみAPIキーを使用したい場合、privateRuntimeConfigで設定することでフロントエンドのコード上からAPIキーを隠すことができます。

ページで呼び出す場合は$configを使用します。

export default {
  async asyncData({ $config }) {
    console.log('baseURL', $config.baseURL);
    console.log('apiKey', $config.apiKey);
  }
}