[Next Auth.js] 구글 로그인 배포 시, Server error (feat. AWS Amplfiy)

시작하며...

Codeit Resource 프로젝트를 Next.js로 마이그레이션 하면서 구글 캘린더 기능을 사용하기 위해 구글 로그인을 도입하게 되었다.

 

그래서 Next Auth.js를 사용해서 구글 로그인을 구현하였고, 배포를 하고 로그인을 하려고 하니깐 아래와 같은 내용이 떴다.

Server error

(뭐지...)

분명 구글 클라우드에서 설정도 잘하고 환경변수도 잘 설정했는데... 오류가 발생하였다.

 

환경변수 설정

문제의 원인을 찾던 중 공식문서를 보니 배포할 때 필요한 환경변수 설정이 있었다.

Options | NextAuth.js

 

1. NEXTAUTH_URL

NEXTAUTH_URL에는 기본 경로를 설정해 주었다.

배포환경이랑 로컬환경에서는 다르기 때문에 환경 변수를 다르게 설정해 주었다.

// .env.development
NEXTAUTH_URL="http://localhost:3000"

// .env.production
NEXTAUTH_URL="https://배포주소.com"

 

2. NEXTAUTH_SECRET

NextAuth.js JWT를 암호화하고 이메일 확인 토큰을 해시하는 데 사용된다고 한다.

 

openssl rand -base64 32 를 터미널에 입력하면, SECRET 값으로 사용할 수 있는 랜덤 문자열이 생성된다.

그래서 생성된 값을 사용하여 NEXTAUTH_SECRET 값을 환경 변수로 설정하였다.

// .env
NEXTAUTH_SECRET="ao5zqAV2R8QyCachZRAywQXesdr2011f+ErTiVVKaik="

 

code: 'NO_SECRET'

AWS Amplify를 사용하여 배포하였기 때문에 배포한 후 실행했더니 여전히 Sever Error가 발생하였다.

 

그래서 AWS CloudWatch를 사용하여 로그를 보니깐 아래와 같은 에러가 있었다.

NextAuth가 production 환경에서 필요한 NEXTAUTH_SECRET 환경변수를 찾지 못했다는 의미이다.

log

분명 잘 설정했는데 왜 그럴까...?

환경변수

 

환경변수 처리 방식

찾아보니 Next.js에서 처리하는 환경변수와 AWS Amplify에서 처리하는 환경변수 방식이 달라서 발생하는 문제라고 한다.

 

• Next.js는 빌드를 할 때(빌드 타임), 환경변수를 처리한다. 
• Amplify는 서버가 실행될 때(런타임), 환경변수를 주입한다.

그래서 Next.js가 빌드될 때, 환경변수를 찾지 못해 빌드된 결과물에 환경변수가 포함되어 있지 않아 발생한 문제이다.

 

 

해결 방법

이를 해결하기 위해 빌드를 시작하기 전에 .env.production 파일을 생성하여 AWS Amplify 콘솔에서 설정한 환경변수 값을 .env.production 파일에 쓰면 된다.

 

그래서 amplify.yml 에서 Next.js가 빌드되기 전에 .env.production을 생성하고 환경변수를 작성하면 된다!

amplify.yml

그러면 Next.js에서는 .env.production 파일을 읽을 수 있게 되어 환경변수 값을 빌드에 포함시킬 수 있게 된다.

# 프론트엔드 설정
frontend:
 phases:
   # 빌드 단계
   build:
     commands:
       # 환경변수 파일 생성
       - touch .env.production
       # Amplify 콘솔의 환경변수를 .env.production에 추가
       - echo "NEXTAUTH_URL=\"${NEXTAUTH_URL}\"" >> .env.production
       - echo "NEXTAUTH_SECRET=\"${NEXTAUTH_SECRET}\"" >> .env.production
       - echo "GOOGLE_CLIENT_ID=\"${GOOGLE_CLIENT_ID}\"" >> .env.production
       - echo "GOOGLE_CLIENT_SECRET=\"${GOOGLE_CLIENT_SECRET}\"" >> .env.production
       # Next.js 빌드 실행
       - pnpm run build

 

결과

그러면 이제 배포환경에서도 구글 로그인이 잘 작동된다!

와 계정많다

 

마치며...

우선 프레임워크와 클라우드 서비스의 환경변수 처리 방식이 다르다는 것을 알게 되었다.

만약 Vercel을 사용했다면 해당 문제가 발생하지 않았을 텐데, Next.js는 빌드 타임에, AWS Amplify는 런타임에 환경변수를 처리한다는 차이점을 이해하게 되었다.

 

또한, AWS Amplify를 사용하면서 처음으로 CloudWatch 로그를 보게 되었다.

로그를 통해 문제의 원인을 파악할 수 있었고, 이를 해결하기 위해 공식 문서를 참고하고 구글링을 통해 문제를 해결하는 과정을 경험해보았다.

 

이러한 경험을 통해 배포 환경에서 발생할 수 있는 문제들을 예측하고 대응하는 방법을 배우게 되었다.

앞으로 새로운 기술을 도입할 때는 개발 환경에서의 동작만 아니라, 배포 환경에서의 동작 방식까지 꼼꼼히 확인해야 한다는 교훈을 얻었다.