ECS上でNext.jsの環境変数を参照する際にハマったポイントをまとめてみた。

# ベースイメージ
FROM node:20-alpine

RUN apk add --no-cache curl netcat-openbsd bind-tools

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

RUN npm run build

EXPOSE 80

# 起動
CMD ["npm", "start"]

// タスク定義
const frontendTaskDef = new ecs.FargateTaskDefinition(this, 'FrontendTaskDef', {
    memoryLimitMiB: 512,
    cpu: 256,
    executionRole: taskExecutionRole,
    taskRole: taskRole
});

frontendTaskDef.addContainer('frontend-container', {
    image: ecs.ContainerImage.fromRegistry(`${cdk.Aws.ACCOUNT_ID}.dkr.ecr.${cdk.Aws.REGION}.amazonaws.com/${props.frontendRepo}:latest`),
    memoryLimitMiB: 512,
    portMappings: [
    {
        containerPort: 80,
        protocol: ecs.Protocol.TCP
    }
    ],
    environment: {
        'NODE_ENV': 'production',
        'PORT': '80',
        'NEXT_PUBLIC_CLIENT_URL': 'https://hogehoge.com' // ブラウザ環境変数を定義
    },
    logging: ecs.LogDrivers.awsLogs({
        logGroup: props.frontendLogGroup,
        streamPrefix: 'frontend'
    })
});

'use client'
export default function ClientPage() {
  return (
    <div className="mt-8 p-4 bg-green-50 border border-green-200 rounded-lg">
        <h3 className="text-lg font-semibold text-green-800 mb-2">クライアント側環境変数テスト</h3>
        <div className="bg-green-100 p-3 rounded">
            <p className="text-green-700 mb-1"><strong>NEXT_PUBLIC_CLIENT_URL:</strong></p>
            <p className="text-green-800 font-mono text-sm">
                {process.env.NEXT_PUBLIC_CLIENT_URL}
            </p>
        </div>
    </div>
  )
}

# ビルド時に .env.production を作成（例）
RUN echo "NEXT_PUBLIC_CLIENT_URL=https://hogehoge.com" >> .env.production

// 変数を使用しているためこれはインライン化されません。
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])

// 変数を使用しているためこれはインライン化されません。
const env = process.env
setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)

// Static Rendering時の例（ビルド時にインライン化される）
'use server'

export default function StaticServerComponent() {
    // ビルド時に値がインライン化
    const apiUrl = process.env.API_BASE_URL // ビルド時: undefined 

    return (
        <div>
            <p>API URL: {apiUrl}</p> {/* 常に "undefined" */}
        </div>
    )
}

// Server Component を Dynamic Rendering に強制
import { unstable_noStore as noStore } from 'next/cache'

// Server Component - 直接Django API呼び出し
export default async function ServerComponentTest() {
  // Dynamic Rendering を強制（ビルド時実行を防ぐ）
  noStore()

  // 環境変数がリクエスト時にランタイム上で処理されるようになる
  const serverComponentApiUrl = process.env.API_BASE_URL

  .
  .
  .
}