# 概要

Nuxt3で環境変数を注入するためにはちょっと注意が必要なので忘備録として
書き残す。

# Nuxt3の環境変数

• nuxt３の環境変数はruntimeConfig経由で使用する
• nuxt.config.tsに環境変数を定義することでNuxt内で使用できるようになる。

例

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    // サーバサイド内処理だけで使える
    API_SECRET: '123',
    // Keys within public, will be also exposed to the client-side
    // クライアントサイド、サーバサイド内からも使用可能
    public: {
      API_BASE: '/api'
    }
  }
})

またコメントに書いたようにクライアント、サーバ内で使用するための上記の様な制限がある。
サーバサイドやバックエンド内で使用するには

const config = useRuntimeConfig()
config.API_SECRET // privateキーの場合
config.public.API_BASE // publicキーの場合

上記のように使用する

# cloud runで環境変数を変更したい場合

よくある方法ではprocess.env.[環境変数名]という形で注入する方法があるが

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    // サーバサイド内のファイル(/server/api/...)だけで使える (.vueでは使用できない)
    API_SECRET: process.env.API_SECRET,
    // Keys within public, will be also exposed to the client-side
    // クライアントサイド、サーバサイド内からも使用可能 (.vue内で使用できる。)
    public: {
      API_BASE: process.env.API_BASE
    }
  }
})

環境変数に以下の様に記述してもNuxt内では使えない

API_SECRET=123
API_BASE=/api

ドキュメントを確認すると

Runtime config values are automatically replaced by matching environment variables at runtime.
There are two key requirements:
Your desired variables must be defined in your nuxt.config. This ensures that arbitrary environment variables are not exposed to your application code.
Only a specially-named environment variable can override a runtime config property. That is, an uppercase >environment variable starting with NUXT_ which uses _ to separate keys and case changes.

つまり下記の様に書かないと環境変数として認識できない。

NUXT_API_SECRET=123
NUXT_PUBLIC_API_BASE=/api

private キーの場合は 接頭語としてNUXT_ が必要でpublicキーの場合は接頭語としてNUXT_PUBLIC_が環境変数名に必要になる。