Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Membuat variabel lingkungan dapat diakses oleh runtime sisi server

Amplify Hosting mendukung penambahan variabel lingkungan ke build aplikasi Anda dengan menyetelnya dalam konfigurasi project di konsol Amplify. Namun, komponen server Next.js tidak memiliki akses ke variabel lingkungan tersebut secara default. Perilaku ini disengaja untuk melindungi setiap rahasia yang disimpan dalam variabel lingkungan yang digunakan aplikasi Anda selama fase build.

Untuk membuat variabel lingkungan tertentu dapat diakses oleh Next.js, Anda dapat memodifikasi file spesifikasi build Amplify untuk mengaturnya dalam file lingkungan yang dikenali Next.js. Hal ini memungkinkan Amplify untuk memuat variabel lingkungan ini sebelum membangun aplikasi. Contoh spesifikasi build berikut menunjukkan cara menambahkan variabel lingkungan di bagian perintah build.

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

Dalam contoh ini, bagian perintah build menyertakan dua perintah yang menulis variabel lingkungan ke .env.production file sebelum build aplikasi berjalan. Amplify Hosting memungkinkan aplikasi Anda mengakses variabel-variabel ini saat aplikasi menerima lalu lintas.

Baris berikut dari bagian perintah build pada contoh sebelumnya menunjukkan cara mengambil variabel tertentu dari lingkungan build dan menambahkannya ke file. .env.production

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

Jika variabel ada di lingkungan build Anda, .env.production file akan berisi variabel lingkungan berikut.

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

Baris berikut dari bagian perintah build pada contoh sebelumnya menunjukkan cara menambahkan variabel lingkungan dengan awalan tertentu ke file. .env.production Dalam contoh ini, semua variabel dengan awalan NEXT_PUBLIC_ ditambahkan.

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

Jika beberapa variabel dengan NEXT_PUBLIC_ awalan ada di lingkungan build, .env.production file akan terlihat mirip dengan berikut ini.

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

Variabel lingkungan SSR untuk monorepos

Jika Anda menerapkan aplikasi SSR di monorepo dan ingin membuat variabel lingkungan tertentu dapat diakses oleh Next.js, Anda harus mengawali .env.production file dengan root aplikasi Anda. Contoh spesifikasi build berikut untuk aplikasi Next.js dalam monorepo Nx menunjukkan cara menambahkan variabel lingkungan di bagian perintah build.

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

Baris berikut dari bagian perintah build pada contoh sebelumnya menunjukkan cara mengambil variabel tertentu dari lingkungan build dan menambahkannya ke .env.production file untuk aplikasi dalam monorepo dengan root aplikasi. 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