未分類

AWS Amplifyでサーバーサイドの環境変数が読み込めなかった件と、その対処法

Next.js × Amplify でサーバーサイドレンダリングや API Routes を使っているときに、
環境変数(Secrets含む)が読み込めない!」という事態に遭遇し、結構ハマりました。

最終的に amplify.yml を明示的に設定することで解決できたので、この記事にまとめておきます。


🧨 発端:API Routeから process.env.SUPABASE_SERVICE_ROLE_KEY が undefined?

Amplifyの環境変数設定画面で以下のように登録済み:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY

ですが、Next.js の pages/api/** などサーバーサイド側から process.env.SUPABASE_SERVICE_ROLE_KEY を読むと undefined…。


🧪 試したがダメだったもの

  1. 環境変数の名前の誤り → ❌ なし
  2. NEXT_PUBLIC_ をつけないで登録
  3. 再ビルド
  4. API Route でログ出力 → undefined
  5. process.env.secrets? → ❌ Amplify Lambda Function向け構文でAPI Routeには関係なし

どこをどう見ても、正しく登録されているのに undefined…


✅ 解決策:amplify.yml で明示的に環境変数を注入する!

Amplify のビルド設定ファイル amplify.yml に、以下のように env セクションを追加したところ、ビルド後の実行環境にちゃんと環境変数が反映されました

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  environment:
    variables:
      SUPABASE_SERVICE_ROLE_KEY: ${SUPABASE_SERVICE_ROLE_KEY}

ポイントはこの部分:

environment:
    variables:
      SUPABASE_SERVICE_ROLE_KEY: ${SUPABASE_SERVICE_ROLE_KEY}

これは「Amplifyの環境変数画面に定義されている値を、ビルド環境に注入する」ための指定です。

💡 なぜ必要だったのか?

Amplify の Hosting(特に SSR 対応)では、環境変数のスコープが曖昧になることがあります

  • クライアント用(NEXT_PUBLIC_ つき)→ build時に静的に注入される
  • サーバーサイド(API Routeや getServerSideProps)→ amplify.yml でビルド環境に反映しないと入らないことがある

これがハマりポイントでした。


✅ 最終的に得られた教訓

  • 環境変数をAmplify環境変数画面で登録しただけでは不十分なことがある
  • amplify.yml での environment.variables 明示が有効
  • process.env.secrets は Lambda 向け構文で、Next.js API Route では不要

📌 まとめ

問題解決策サーバーサイドで process.env.SERVICE_KEY が undefinedamplify.yml の environment.variables に明示するクライアント用に値を渡すNEXT_PUBLIC_ プレフィックスをつける再ビルドで反映されない.env 上書き or amplify.yml不足が原因の可能性あり


📝 補足:amplify.ymlのテンプレ

version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
environment:
variables:
SUPABASE_SERVICE_ROLE_KEY: ${SUPABASE_SERVICE_ROLE_KEY}
# 他にも必要ならここに追加

これでようやく process.env.SUPABASE_SERVICE_ROLE_KEY が正しく読み込めるようになり、API Route で Supabase の管理系処理ができるようになりました。

同じところでハマってる方の助けになれば嬉しいです。