目次

1. 記事概要
2. 結論
3. 疑問解消の調査
4. 最後に
5. 参考文献

1. 記事概要

この記事はvercelでNuxt3のプロジェクトをデプロイした時に、
/pluginsにある.tsから環境変数を参照することができなかった時に調べたメモです。

2. 結論

/pluginsから環境変数を参照したい場合は以下のことを行ってください。
※確証はないですがvercelだからではなくどの本番環境でも同じだと思います。

nuxt.config.tsに以下のコードを加える
※当たり前のことですが、.NEXT_PUBLIC_CONTENTFUL_SPACE_IDの部分は自由です！

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      contentfulSpaceId: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
      contentfulAccessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,
    },
  },
  // ここから下は省略

.env

NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN='sample'
NEXT_PUBLIC_CONTENTFUL_SPACE_ID='testtest'

puluginsからは次のように呼び出す

/plugins/contentful.ts

export default defineNuxtPlugin(() => {
    const configContentful = useRuntimeConfig();
    
    const test: CreateClientParams = {
        space: configContentful.public.contentfulSpaceId,
        accessToken: configContentful.public.contentfulAccessToken,
        // publicはなくても大丈夫、configContentful.contentfulAccessToken
    };
});

3. 疑問解消の調査

process.env.で実行するとlocalでもvercel上でも500エラーがでるはずです。
なので環境変数を別の方法で参照する必要があります。

/plugins/contentful.ts

// エラー
const test: CreateClientParams = {
    space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID, 
    accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN, 
};

実行したときの画面

疑問解消の1つ目の参考文献としてStackOverflow[1]に解決に至った質問がありました。
ここからさらにいくつか[2][3][4]のサイトをたどりなんとなく疑問がはれたことを書いていきます。

まず最初に、pluginsが呼ばれるのがライフサイクル的にだいぶはやそうなのがポイントだと思いました。

pluginsにある.tsはライフサイクル中(ビルド中)に環境変数を参照する必要がありそうです。
ただ公式[2]にこのような記述がありました。

In production runtime, you should use platform environment variables and .env is not used.

本番のランタイムでは.envは直接参照できないということですかね？
なので本番ランタイム中に環境変数を参照するには、nuxt.config.tsのruntimeConfigにpluginsで使用する環境変数を設定しておく必要があるという認識で落ち着きました。

4. 最後に

とりあえずのメモとして記事にしただけなのでまだ理屈などは分かってない状態です。
分かっていないこととして下記部分、privateと書くとserver側しか参照することができなくなりAPI tokenなどを保存するにはよさそうです。
しかし、pluginsからprivateの値を参照するとエラーがでてしまいました。
ここら辺の方法もわかり次第追記していきたいと思います。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // クライアントとサーバー側で参照できる
    },
    private: {
      // サーバー側でしか参照できない
      contentfulSpaceId: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
      contentfulAccessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,
    }
  },
  // ここから下は省略

5. 参考文献

"How to use .env variables in Nuxt 2 or 3?,"https://stackoverflow.com/questions/67703133/how-to-use-env-variables-in-nuxt-2-or-3/67705541#67705541 , (Access. 2024-01-09).
"useRuntimeConfig," https://nuxt.com/docs/api/composables/use-runtime-config#useruntimeconfig , (Access. 2024-01-09).
"Runtime Config," https://nuxt.com/docs/guide/going-further/runtime-config , (Access. 2024-01-09).
"nuxt-community/gtm-module," https://github.com/nuxt-community/gtm-module#runtime-config , (Access. 2024-01-09).