本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 讓伺服器端執行時間可存取環境變數
<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` 檔案。Amplify Hosting 可讓您的應用程式在應用程式接收流量時存取這些變數。

上述範例中建置命令區段的下列行示範如何從建置環境取得特定變數，並將其新增至 `.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
```

## monorepos 的 SSR 環境變數
<a name="ssr-environment-variables-monorepo"></a>

如果您要在單一儲存庫中部署 SSR 應用程式，並想要讓 Next.js 可存取特定環境變數，則必須在`.env.production`檔案前面加上應用程式根目錄。下列範例建置規格適用於 Nx monorepo 中的 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
```

上述範例中建置命令區段的下列幾行示範如何從建置環境取得特定變數，並將其新增至具有應用程式根 之單一儲存庫中應用程式的 `.env.production` 檔案`apps/app`。

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