1. ホーム /
  2. Blog /
  3. Nuxt.js /
  4. 「Nuxt3」で「.env」で環境変数を設定する方法
Nuxt.js

「Nuxt3」で「.env」で環境変数を設定する方法

  • 2024.10.13
  • by ShinyaTomozumi
  • 0

Nuxt3で環境変数を設定する方法は、Nuxt2と違って環境変数を設定する方法があります。
Nuxt2では「dotenv」や「cross-env」をインストールして設定していましたが、Nuxt3では標準で環境変数を設定する方法があるようです。

0. 環境

  • Nuxt3: 3.13.0

1. 環境変数を使用するための準備

Nuxt3では「useRuntimeConfig()」を使用することで環墿変数を設定することができます。
そのための準備としてまずは「nuxt.config.ts」に環境変数が使用出来るようにします。

export default defineNuxtConfig({
  ...省略
  runtimeConfig: {
    public: {
      apiEndPoint: process.env.API_END_POINT,
      apiKey: process.env.APP_KEY,
    },
    private: {
      apiSecret: process.env.API_SECRET,
    },
  },
})

「runtimeConfig」に「public」と「private」の2つの設定をします。
「public」はクライアント側・サーバー側の療法で使用できる環境変数、「private」はサーバー側で使用できる環境変数となります。
今回のケースではSSRではなく、クライアント側で使用するため「public」に設定しました。
その中に使用出来るキーを設定して、envファイルから取得するキーには「process.env.XXX(キー名)」として設定します。

2. envファイルの設定

「.env」ファイルに環境変数を設定します。

API_END_POINT=https://api.example.com
APP_KEY=123

3. 環境変数を使用する

環境変数を使用するためには「useRuntimeConfig()」を使用します。

<template>
  <div>
    <h1>API URL: {{ config.public.apiEndPoint }}</h1>
  </div>
</template>

<script setup>
    const config = useRuntimeConfig();
</script>

またvueファイル以外でも使用することは可能です。

/**
 * エンドポイントを返す
 * @returns 
 */
export const exampleFunc = (): string => {
    const config = useRuntimeConfig();
    return config.public.apiEndPoint;
};

4. 環境ごとに「.env」ファイルを分けて使用する。

環境ごとに「.env」ファイルを分けて使用することも可能です。
例えば開発用は「.env.development」、本番用は「.env.production」のように設定します。
そしてビルド時のコマンドで使用する.envファイルを指定します。
そのために「package.json」の「scripts」に「dotenv」を使用して環境変数を指定します。

"scripts": {
    ...省略
    "dev": "nuxt dev --dotenv .env.development",
    "staging": "nuxt generate --dotenv .env.staging",
    "generate": "nuxt generate --dotenv .env.production",
}

上記のように「–dotenv .env.環境名」を指定することで環境ごとに.envファイルを指定することができます。
devで開発中に変更する場合は再度ビルドを行う必要があるので注意してください。
以上でNuxt3で環境変数を設定する方法についてまとめました。