nextjs - Amplify 환경변수 설정 (feat. NextAuth)

들어가기에 앞서

이 포스트는 Amplify에 배포하는 법을 소개하지 않습니다.

nextjs 프로젝트를 Amplify에 배포할 때 겪은 환경변수 설정에 대해서 설명합니다.

 

Amplify에서 환경 변수 설정 흐름

Amplify에서 아래 이미지의 Next.js 환경변수는 빌드 프로세스 중에 주입되지 않고, 빌드가 완료된 후에 클라이언트 사이드에만 사용할 수 있게 주입됩니다.

주의할점
클라이언트 사이드에서 사용할 필요가 있는 환경변수들은 반드시 NEXT_PUBLIC_ 접두사를 붙여야 합니다

 

이유는 빌드 단계에서 애플리케이션이 사용하는 환경 변수에 저장된 모든 비밀을 보호하기 위한 의도적인 것입니다.

Amplify Hosting supports adding environment variables to your application's builds by setting them in the project's configuration in the Amplify console. However, a Next.js server component doesn't have access to those environment variables by default. This behavior is intentional to protect any secrets stored in environment variables that your application uses during the build phase.

(https://docs.aws.amazon.com/amplify/latest/userguide/ssr-environment-variables.html)

 

빌드 시 필요한(서버사이드) 환경변수

NextAuth에선 빌드 시에 AUTH_SECRET, AUTH_URL과 같은 환경변수가 필요할텐데 어떻게 설정할 수 있을까요?

방법은 Amplify에서 앱이 빌드될 때 환경변수를 인식할 수 있도록 빌드 스크립트를 수정해주는 것입니다.

Amplify에서 빌드 설정으로 들어가게 되면 빌드 스크립트를 수정할 수 있습니다.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - env | grep -e AUTH_SECRET -e NEXTAUTH_URL >> .env
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*

위처럼 스크립트의 빌드 부분에 직접 환경변수 설정에서 저장한 환경변수를 .env 에 직접 주입해 준다면 앱이 빌드시에 설정한 환경변수를 사용할 수 있게 됩니다.

(https://docs.aws.amazon.com/amplify/latest/userguide/access-env-vars.html)

 

정리하자면

• 클라이언트에서 필요한 환경변수들은 NEXT_PUBLIC_ 붙여서 Amplify에 환경변수 설정을 하면 사용할 수 있습니다.
• 서버사이드에서 필요한 환경변수(API_KEY, AUTH_SECRET 등)는 Amplify에 환경변수 설정만 가지고 사용할 순 없고, 빌드 스크립트에서 직접 주입해줘야 빌드시 사용할 수 있습니다.
• 위처럼 각 사이드별로 동작이 다른 이유는 빌드 시점에 서버사이드 환경변수를 클라이언트에게 자동으로 전달하지 않음으로써, 애플리케이션의 빌드 단계에서부터 보안을 강화하기 때문입니다.