Rendre les variables d'environnement accessibles aux environnements d'exécution côté serveur

Amplify Hosting prend en charge l'ajout de variables d'environnement aux versions de votre application en les définissant dans la configuration du projet dans la console Amplify. Cependant, un composant serveur Next.js n'a pas accès à ces variables d'environnement par défaut. Ce comportement est intentionnel pour protéger les secrets stockés dans les variables d'environnement que votre application utilise pendant la phase de génération.

Pour rendre des variables d'environnement spécifiques accessibles à Next.js, vous pouvez modifier le fichier de spécification de build Amplify afin de les définir dans les fichiers d'environnement reconnus par Next.js. Cela permet à Amplify de charger ces variables d'environnement avant de créer l'application. L'exemple de spécification de construction suivant montre comment ajouter des variables d'environnement dans la section des commandes de construction.

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/**/*

Dans cet exemple, la section des commandes de génération inclut deux commandes qui écrivent des variables d'environnement dans le .env.production fichier avant l'exécution de la compilation de l'application. Amplify Hosting permet à votre application d'accéder à ces variables lorsque l'application reçoit du trafic.

La ligne suivante, tirée de la section des commandes de génération de l'exemple précédent, montre comment prendre une variable spécifique de l'environnement de génération et l'ajouter au .env.production fichier.

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

Si les variables existent dans votre environnement de génération, le .env.production fichier contiendra les variables d'environnement suivantes.

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

La ligne suivante, tirée de la section des commandes de construction de l'exemple précédent, montre comment ajouter une variable d'environnement avec un préfixe spécifique au .env.production fichier. Dans cet exemple, toutes les variables avec le préfixe NEXT_PUBLIC_ sont ajoutées.

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

Si plusieurs variables avec le NEXT_PUBLIC_ préfixe existent dans l'environnement de construction, le .env.production fichier ressemblera à ce qui suit.

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

Variables d'environnement SSR pour monorepos

Si vous déployez une application SSR dans un monorepo et que vous souhaitez rendre des variables d'environnement spécifiques accessibles à Next.js, vous devez préfixer le .env.production fichier avec la racine de votre application. L'exemple de spécification de construction suivant pour une application Next.js dans un monorepo Nx montre comment ajouter des variables d'environnement dans la section des commandes de génération.

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

Les lignes suivantes de la section des commandes de génération de l'exemple précédent montrent comment prendre des variables spécifiques de l'environnement de génération et les ajouter au .env.production fichier d'une application dans un monorepo avec la racine de l'application. 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