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

Amplify ホスティングは、Amplify コンソールのプロジェクト構成で環境変数を設定することにより、アプリケーションのビルドに環境変数を追加することをサポートしています。

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

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

重要

デプロイアーティファクトにアクセスできるユーザーはそれらを読み取ることができるため、認証情報、シークレット、または機密情報を環境変数に保存しないことを強くお勧めします。

SSR コンピューティング関数に AWS リソースへのアクセスを許可するには、IAM ロールを使用することをお勧めします。

以下のビルド仕様例は、ビルドコマンドセクションに環境変数を追加する方法を示しています。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e API_BASE_URL >> .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 ホスティングを使用すると、アプリケーションがトラフィックを受信したときに、アプリケーションがこれらの変数にアクセスできます。

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

- env | grep -e API_BASE_URL -e APP_ENV >> .env.production

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

API_BASE_URL=localhost
APP_ENV=dev

前の例のビルドコマンドセクションの次の行は、特定のプレフィックスを付けた環境変数を.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_FEATURE_FLAG=true

モノレポの SSR 環境変数

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

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - env | grep -e API_BASE_URL -e APP_ENV >> 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

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

- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production