概要

Nuxt.jsでAPI_KEYを保護する際今までは@nuxt.js/dotenvを使うことが多かったかと思います。
これでも大丈夫なのですが、最新の完全にAPI_KEYを保護する方法を実装していきます。

runtimeConfig

Nuxt v2.13より、nuxt.config.jsにpublicRuntimeConfigとprivateRuntimeConfigというプロパティが追加されました。

手順としては

.envファイルでAPI_KEYを定義
nuxt.config.jsで設定を記述
受け取る際は$configで受け取る
といった形になります。

実際に例を書いてみます。

　.env

API_KEY='ここにAPIキーが入ります'

nut.config.js

require('dotenv').config();
const { API_KEY } = process.env;
export default {
  privateRuntimeConfig: {
    apiKey: API_KEY
  },
  publicRuntimeConfig: {
    apiKey: process.env.NODE_ENV !== 'production' ? API_KEY : undefined
  },
}

pages/index.vue

<script lang="ts">
@Component({
  async asyncData({ $config }) {
    const { data } = await axios.get(
      'https://~~~~~~~~~~',
      {
        headers: { 'X-API-KEY': $config.apiKey }
      }
    )
    return data
  },
})
</script>

このような形になります。

privateRuntimeConfig...こちらはプライベートでフロントエンドでは公開されてはいけない全ての.envファイルのキーを保護します

publicRuntime...フロントエンド、サーバー再度のどちらでも$configを使って受け取ることができます。

Nuxt.jsでは開発モードではサーバーではなくクライアントサイドで返すの、publicRuntimeConfigで記述しておく必要があります。本番環境ではクライアントサイドではキーを保持したくないのでproduction以外はundefindを返します。

受け取る際は$configに指定した形で

$config.任意

といった感じで受け取っています。

なぜ他の方法ではダメなのか？

他の方法でダメなことはないですが、セキュリティとして危険な部分もあります。

nuxt.confing.jsのenvを利用してAPIキーを定義し、受け取る方法の記事などもよくみかけますが、こちらの状態ではasyncDataなどのソースコードにはapiキーは変数として定義しているので読み取れないですが、nuxt.config.jsで簡単に　apiKeyを確認することができてしまします。
結構こういった記事は多いですが気をつけましょう。

ではdotenvなどを利用し、環境変数を定義しprocess.envで受け取るといった方法もよく使われます。
こちらはソースの中にはAPI_KEYはなく、かなり安全そうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまうらしいので、少し不安が残ります。

Nuxt.jsもアップデートしてRuntimeConfigが出てきたので是非こちらを使用していきましょう。
.envファイルをgithubにプッシュなどしたら元も子もないので初学者のみなさんなどは気をつけましょうw