aws amplify에서 환경변수 로드하는 법(with nextjs)

nextjs 프로젝트를 aws amplify에 배포를 했다.
db 연결 정보를 .env 파일에서 로드하여 가져오고 있다.

amplify는 깃헙 레포지터리를 기준으로 하여 빌드하여 배포하는데 env파일은 깃헙에 올리지 않았기 때문에 amplify 에서 환경변수를 따로 설정해줘야한다.

하지만 위 화면에서 환경변수를 설정만 한다고 해서 프로젝트에서 바로 인식되는 것이 아니라 빌드 설정에서 추가로 설정해줘야한다.

aws 문서에서는 다음과 같이 말하고 있다.

Amplify Hosting은 Amplify 콘솔의 프로젝트 구성에 환경 변수를 설정하여 애플리케이션 빌드에 환경 변수를 추가할 수 있도록 지원합니다. 하지만 Next.js 서버 구성 요소는 기본적으로 이러한 환경 변수에 액세스할 수 없습니다. 이는 애플리케이션이 빌드 단계에서 사용하는 환경 변수에 저장된 모든 암호를 보호하기 위한 것입니다.

따라서 문서에 따르면

특정 환경 변수가 Next.js에 액세스할 수 있도록 하려면 Next.js가 인식하는 환경 파일에 해당 변수를 설정하도록 Amplify 빌드 사양 파일을 수정하면 됩니다. 이를 통해 Amplify는 애플리케이션을 빌드하기 전에 이러한 환경 변수를 로드할 수 있습니다.

빌드 설정에서 빌드 사양 파일을 수정해주면 된다고 한다.

예시는 다음과 같다.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

commands 아래에 - env | grep -e DB_HOST >> .env.production 이 부분을 확인하면 된다.

• - env | grep -e 와 >> 은 고정 명령어이고 DB_HOST,env.production만 환경변수, 환경변수 파일 이름으로 변경해주면 된다. 나의 경우에는 MYSQL_PRISMA , .env 이렇게 변경하였다. 이해를 돕기 위해
  나의 빌드 사양 파일은 다음과 같다.

  version: 1
  frontend:
   phases:
     preBuild:
       commands:
         - npm ci
     build:
       commands:
         - env | grep -e MYSQL_PRISMA >> .env
         - yarn build
   artifacts:
     baseDirectory: .next
     files:
       - '**/*'
   cache:
     paths:
       - node_modules/**/*
       - .next/cache/**/*

위와 같이 변경해주고 다시 빌드 및 배포를 해보니 정상적으로 환경변수가 인식되었다.

참조

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