nuxtRuntimeConfigを利用して環境変数を扱う

TOC

Nuxt.jsのnuxtRuntimeConfigを利用して、環境変数を登録し扱う方法をまとめたいと思います。

概要

RuntimeConfigはNuxt.jsのバージョン2.13以降で利用することができる機能で、環境変数をnuxtのcontextに渡すことができます。 publicRuntimeConfigとprivateRuntimeConfigという2種類のプロパティがあり、サーバーサイド or クライアントサイドからのアクセスで使い分けます。

publicRuntimeConfig

publicRuntimeConfigに設定した値は、サーバーサイドとクライアントサイドのどちらからもアクセス可能です。

privateRuntimeConfig

privateRuntimeConfigに設定した値は、サーバーサイドのみアクセス可能です。 ブラウザ上からは隠蔽される為、APIのKeyなどを設定する際はこちらを利用します。 また、publicRuntimeConfigと同じプロパティ名を登録した場合は、privateRuntimeConfigで上書きされます。

登録方法

.nuxt.config.jsに以下のように追加します。

export default {
  privateRuntimeConfig: {
    apiKey: process.env.API_KEY
  },
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://sample.com'
  },
}

使用方法

登録した変数は、this.$configからアクセスできます。 また、contextにも追加されるのでnuxtServerInit・middleware・`asyncDataからもアクセス可能です。

<template>
  <p>baseURL: {{ $config.baseURL}}</p>
</template>

nuxtServerInit(store, { $config: { baseURL }}) {
  console.log(baseURL)
}