20260708tue

Published: at 15:00

20260708tue

Nuxt の package.json に環境別の起動コマンドを書く

--dotenv オプションを使うと、コマンドごとに読み込む .env ファイルを切り替えられる。

"scripts": {
  "dev": "nuxt dev --dotenv .env.development",
  "dev:stg": "nuxt dev --dotenv .env.staging",
  "dev:prd": "nuxt dev --dotenv .env.production",
  "build": "nuxt build --dotenv .env.production",
  "generate": "nuxt generate --dotenv .env.production",
  "preview": "nuxt preview"
}

.env ファイルを env/ ディレクトリ以下に整理したい場合は、パスを指定する。

"build": "nuxt build --dotenv env/.env.production"

各コマンドの役割

コマンド役割
npm run dev開発サーバーを起動
npm run generate静的ファイルを生成
npm run build./output フォルダに成果物を生成
npm run previewnpm run build 実施後に実行。build で生成したフォルダを使ってローカルサーバーを起動

runtimeConfig で環境変数を管理する

nuxt.config.ts の runtimeConfig を使って環境変数をコンポーネントから参照できる。

1. .env ファイルに変数を定義

# .env.development
NUXT_PUBLIC_API_BASE=http://localhost:8080/api
NUXT_PUBLIC_APP_URL=http://localhost:3000

# .env.production
NUXT_PUBLIC_API_BASE=https://api.example.com/api
NUXT_PUBLIC_APP_URL=https://example.com

2. nuxt.config.ts で runtimeConfig に設定

NUXT_PUBLIC_ プレフィックスを付けると自動でマッピングされる。初期値は '' で OK。

export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: "", // サーバーサイドのみ（NUXT_SECRET_KEY）
    public: {
      apiBase: "", // クライアントにも公開（NUXT_PUBLIC_API_BASE）
      appUrl: "", // クライアントにも公開（NUXT_PUBLIC_APP_URL）
    },
  },
});

public に入れた値はクライアント・サーバー両方で使える。APIキーなどクライアントに露出させたくない値は public の外に置く。

3. コンポーネント・composable での使い方

const config = useRuntimeConfig();

// APIリクエスト
const data = await $fetch(`${config.public.apiBase}/users`);

// URL参照
console.log(config.public.appUrl);

SSG でのAPIエンドポイント露出問題

public に入れた値はクライアントに公開されるため、APIエンドポイントが見えてしまう。SSG の場合はこれが基本的に仕方ない。

SSG の制約：

現実的な対策：

対策内容
APIサーバー側でCORS制限許可するオリジンをフロントのドメインだけに絞る
APIサーバー側でRate Limit大量リクエストを弾く
APIキーが必要な処理はサーバー経由にCloudflare Workers / Netlify Functions などで薄い BFF を作る

露出がどこまで問題かは用途次第：

devProxy で開発時のCORSを回避する

開発時に devProxy を使うと、ブラウザから見て同一オリジンのリクエストになるため CORS に引っかからない。

ブラウザ → localhost:3000/api/* → (Nuxt がプロキシ) → 本番APIサーバー

devProxy は nuxt dev のときしか動かないため、本番ビルドには影響しない。

設定例

# .env.development
NUXT_PUBLIC_API_BASE=/api   # プロキシ経由なのでパスだけで OK

# .env.production
NUXT_PUBLIC_API_BASE=https://your-api.example.com/api  # 直接
// nuxt.config.ts
nitro: {
  devProxy: {
    '/api': {
      target: 'https://your-api.example.com/api',
      changeOrigin: true,
    },
  },
},

開発時は /api → プロキシ経由、本番は直接エンドポイントに繋ぐという使い分けになる。