本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。
讓伺服器端執行階段可存取環境變數
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
檔案。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 monorepos 的環境變數
如果您要在 monorepo 中部署SSR應用程式,並想要讓 Next.js 可存取特定環境變數,則必須在.env.production
檔案前面加上應用程式根。下列範例在 Nx 單憑中建置 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