環境変数をサーバーサイドランタイムからアクセスできるようにします。

Amplify Hosting は、Amplify コンソールのプロジェクト構成で環境変数を設定することにより、アプリケーションのビルドに環境変数を追加することをサポートしています。ただし、Next.js サーバーコンポーネントはデフォルトではこれらの環境変数にアクセスできません。この動作は、ビルドフェーズでアプリケーションが使用する環境変数に保存されているシークレットを保護するためのものです。

特定の環境変数を Next.js にアクセスできるようにするには、Amplify ビルド仕様ファイルを変更すると Next.js が認識する環境ファイルに設定できます。これにより、Amplify はアプリケーションをビルドする前にこれらの環境変数をロードできます。以下のビルド仕様例は、ビルドコマンドセクションに環境変数を追加する方法を示しています。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production
        - env | grep -e NEXT_PUBLIC_ >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

この例では、ビルドコマンドセクションには、アプリケーションのビルドを実行する前に環境変数を.env.productionファイルに書き込む 2 つのコマンドが含まれています。Amplify Hosting を使用すると、アプリケーションがトラフィックを受信したときに、アプリケーションがこれらの変数にアクセスできます。

前の例のビルドコマンドセクションの次の行は、ビルド環境から特定の変数を取得して.env.productionファイルに追加する方法を示しています。

- env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production

ビルド環境に変数が存在する場合、.env.productionファイルには以下の環境変数が含まれます。

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

前の例のビルドコマンドセクションの次の行は、特定のプレフィックスを付けた環境変数を.env.productionファイルに追加する方法を示しています。この例では、プレフィックスNEXT_PUBLIC_の付いた変数がすべて追加されます。

- env | grep -e NEXT_PUBLIC_ >> .env.production

プレフィックスNEXT_PUBLIC_の付いた変数がビルド環境に複数存在する場合、.env.productionファイルは次のようになります。

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf
NEXT_PUBLIC_SEARCH_KEY=asdfiojslf
NEXT_PUBLIC_SEARCH_ENDPOINT=https://search-url

モノレポの SSR 環境変数

SSR アプリをモノレポにデプロイしていて、特定の環境変数に Next.js からアクセスできるようにする場合は、 .env.productionファイルにアプリケーションルートをプレフィックスする必要があります。Nx monorepo 内の Next.js アプリのビルド仕様の例は、ビルドコマンドセクションに環境変数を追加する方法を示しています。

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - env | grep -e DB_HOST -e DB_USER -e DB_PASS >> apps/app/.env.production
            - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
            - npx nx build app
      artifacts:
        baseDirectory: dist/apps/app/.next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
      buildPath: /
    appRoot: apps/app

前の例のビルドコマンドセクションの次の行は、ビルド環境から特定の変数を取得し、アプリケーションルート を持つモノレポ内のアプリケーションの .env.production ファイルに追加する方法を示していますapps/app。

- env | grep -e DB_HOST -e DB_USER -e DB_PASS >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production