【備忘録】Nuxt3のruntimeConfigで設定したAPI KEYを隠蔽する方法

はじめに

こんにちは秋本です。
Nuxt3皆さん使っていますか？
個人的に触っていて最初躓いた内容を備忘録も兼ねて記事にしようと思います。

この記事では、runtimeConfigを使用して公開設定を行った場合のデメリットと、それを回避するための方法について詳しく説明します。

runtimeConfigの基本

Nuxtの公式ドキュメントによれば、runtimeConfigは、ランタイム中にクライアントとサーバーの両方からアクセス可能な設定を提供します。

// nuxt.config.ts
runtimeConfig: {
  apiKey: '' // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
    public: {
       baseURL: '' // Exposed to the frontend as well.
    }
}

このオブジェクトの値はサーバー側でのみアクセス可能です。
主に秘密の設定やAPIの秘密トークンなど、フロントエンドに公開されない設定を保持するために使用します。
public: このオブジェクトの値はフロントエンドにも公開されます。

publicのデメリット

publicの中に設定を置くことで、それがクライアント側で見ることができるようになります。これは、APIキーなどの秘密情報を公開してしまうリスクがあるため、注意が必要です。
後悔のリスクがあるため、サーバー側でAPIを叩くことが可能です。
次ではその方法を詳しく見ていきます。

NuxtのNitroを使用してサーバー側でAPIを叩く

NuxtのNitroを使用すると、server/apiディレクトリ内でAPIを叩くことができます。これにより、APIキーをサーバー側で隠蔽しつつ、クライアント側からのリクエストを安全に処理することができます。

NuxtのNitroを使用してサーバー側でAPIを叩く具体例

1. nuxt.config.tsファイルに環境変数の登録

// nuxt.config.ts
  runtimeConfig: {
    myApiKey: process.env.MY_API_KEY,
  },

2. server/apiディレクトリの作成
   プロジェクトのルートディレクトリにserver/apiディレクトリを作成します。

3. APIエンドポイントの作成
   server/apiディレクトリ内にfetchData.tsというファイルを作成し、以下のようにコードを記述します。
   server側のためuseFetchが使えないのでofetchの$fetchを利用しています。
   $fetchが気になる方は下記のリファレンスを参考にしてください。
   https://nuxt.com/docs/api/utils/dollarfetch#fetch

// server/api/fetchData.ts
const BASE_URL = "https://api.example.com/data";
const config = useRuntimeConfig();

export default defineEventHandler(async () => { // fetch時に引数を取ることももちろん可能です
  try {
    const prefData = $fetch(`${BASE_URL}&key=${config.myApiKey}`);

    return prefData;
  } catch (error) {
    console.error(error);
    return error;
  }
});

3. クライアント側でのデータの取得
   composablesで状態管理をしている前提で、useFetchData.tsというファイルでuseFetchでAPIを叩く処理を書きます。
   composablesディレクトリに関しては以下を参考にしてください。
   https://nuxt.com/docs/guide/directory-structure/composables

// composables/useFetchData.ts
const fetchData = (state: Ref<myState>) => {
  return async () => {
    const { data: fetchData } = await useFetch("/api/fetchData", {
      body: {
	// body内にプロパティを定義すると、fetchData.ts側で引数として受け取ることが可能です
      },
    });

    const { data } = (fetchData.value as any).res
  };
};

このように、TypeScriptを使用しても、useFetchを利用することで簡単にサーバー側でAPIを叩き、その結果をクライアント側で取得することができます。

まとめ

NuxtのruntimeConfigは非常に便利な機能ですが、公開設定を行う際には注意が必要です。
セキュリティリスクを最小限に抑えるために、NuxtのNitroを使用してサーバーサイドでAPIを呼び出す方法を採用することをおすすめします。