[Nuxt3] Nuxt3 で.envを使用する方法 | CodeLab プログラミング

Nuxt3 は、サーバーサイドレンダリングや静的サイト生成が可能な Vue.js フレームワークで、開発効率を高める多くの機能を提供しています。その中で、環境変数を使用してアプリケーションの設定を管理することは非常に重要です。この記事では、 Nuxt3 で .env ファイルを使用する方法について詳しく説明します。

Nuxt

Nuxt: The Intuitive Vue Framework

https://nuxt.com

Nuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.

1. 環境変数とは？

環境変数は、アプリケーションの動作に影響を与える設定情報を外部から注入するための手段です。これにより、ソースコードを変更せずに設定を変更でき、異なる環境（開発、テスト、本番など）で同じコードを使い回すことが可能になります。

2. Nuxt3 での環境変数の設定

Nuxt3 では、 .env ファイルを使用して環境変数を定義し、それをアプリケーション内で利用することができます。 Nuxt3 は標準で dotenv をサポートしており、追加の設定なしに環境変数を読み込むことができます。

2.1 .envファイルの作成

まず、プロジェクトのルートディレクトリに .env ファイルを作成します。このファイルに環境変数を定義します。

例として、以下のような内容を .env ファイルに記述します。

API_URL=https://api.example.com
API_KEY=1234567890abcdef

2.2 Nuxt3 の設定ファイルに .env を読み込む

Nuxt3 では、 nuxt.config.ts ファイルを使って設定を行います。 .env ファイルの内容を自動的に読み込むため、特別な設定は不要です。

// nuxt.config.ts
export default defineNuxtConfig({
  // 環境変数の利用例
  runtimeConfig: {
    public: {
      apiUrl: process.env.API_URL,
    },
    private: {
      apiKey: process.env.API_KEY,
    }
  }
})

2.3 環境変数の利用

環境変数は、 useRuntimeConfig を使ってアプリケーション内で簡単に取得できます。

// example.vue
<template>
  <div>
    <h1>API URL: {{ config.public.apiUrl }}</h1>
  </div>
</template>

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

このコードでは、 useRuntimeConfig を使って nuxt.config.ts ファイルで定義した環境変数を取得し、それを表示しています。

3. 環境ごとの .env ファイルの管理

複数の環境（開発、テスト、本番など）を管理するために、 .env ファイルを環境ごとに分けることができます。

3.1 .env ファイルの作成

例えば、以下のようなファイルを作成します。

.env.development
.env.production
.env.test

それぞれのファイルに、環境ごとに異なる設定を記述します。

例：

// .env.development
API_URL=http://localhost:3000
API_KEY=devkey123

// .env.production
API_URL=https://api.example.com
API_KEY=prodkey456

3.2 Nuxt3 で環境ごとの .env ファイルを読み込む

Nuxt3 は、 NODE_ENV に基づいて適切な .env ファイルを自動的に読み込みます。 NODE_ENV を設定して、適切な環境ファイルを使用します。

例：

# 開発環境
NODE_ENV=development nuxt dev

# 本番環境
NODE_ENV=production nuxt build && nuxt start

3.3 環境ごとの設定の優先順位

Nuxt3 では、一般的な .env ファイルがまず読み込まれ、その後に特定の環境用の .env ファイル（例： .env.production ）が読み込まれます。同じ変数が両方のファイルに定義されている場合、後から読み込まれたファイルの値が優先されます。

4. セキュリティ上の注意

環境変数には、APIキーやデータベースの接続情報など、機密性の高い情報が含まれることがあります。これらの情報が誤って公開されないように、 .env ファイルを .gitignore に追加して、バージョン管理システムに含めないようにする必要があります。

# .gitignore
.env
.env.*

まとめ

Nuxt3 で環境変数を管理する方法について説明しました。 .env ファイルを使うことで、簡単に設定を管理し、環境ごとに異なる設定を適用することができます。これにより、アプリケーションの柔軟性とセキュリティが向上します。ぜひ、 Nuxt3 での開発に環境変数を取り入れて、効率的なプロジェクト運営を目指してください。