翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 環境変数をサーバーサイドランタイムからアクセスできるようにします。
<a name="ssr-environment-variables"></a>

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

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

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

**重要**  
 デプロイアーティファクトにアクセスできるユーザーは読み取ることができるため、認証情報、シークレット、または機密情報を環境変数に保存しないことを強くお勧めします。  
SSR コンピューティング関数に AWS リソースへのアクセスを許可するには、[IAM ロールを使用する](amplify-SSR-compute-role.md)ことをお勧めします。

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

```
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 環境変数
<a name="ssr-environment-variables-monorepo"></a>

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
```