Next.js를 now에 배포 전 환경변수 설정하기 (.env)

서버리스 시크릿과 빌드 시크릿 두종류가 존재한다. 서버리스는 런타임에 클라이언트 코드에서 실행되는 시크릿이고 빌드 시크릿은 빌드타임에 웹팩에 의해 실행되는 시크릿이다.

로컬에서 개발할때

.env: 서버리스 환경변수

.env.build: 빌드 환경 변수

를 설정해준다.

나의 경우엔 웹팩으로 환경 변수를 사용할것이기 때문에 .env.build 파일을 만들어줬다.

DEMO_KEY="ABCD"

그 파일안에 위와 같이 환경 변수를 넣어준다. 여기 까지만 하면 로컬에서 환경변수를 사용하는데는 문제가 없다.

이제 now를 통해 next를 배포할때 추가 설정을 해줘야한다. now-cli의 secrets명령어를 통해 환경 변수를 직접 추가해줘야한다.

now secrets add demo-key ABCD

demo-key라는 이름의 시크릿에 ABCD라는 값을 넣어줬다.

그리고나서 패키지 루트에 now.json파일을 만들어준다.

"build": {
  "env": {
    "DEMO_KEY": "@demo-key"
  }
}

이부분을 추가해주면 되는데, @demo-key는 방금 전에 추가해준 시크릿의 이름을 넣어주면 된다. ABCD 값을 넣는게 아니라 시크릿의 이름인 demo-key를 넣어야 한다.

마지막으로, next.config.js를 수정해줘야한다.

정리

1. now-cli로 “시크릿명" : “시크릿값" 을 추가해준다.
2. 그 시크릿을 now.json파일에 “환경변수명” : “시크릿명" 형식으로 가져오고,
3. next.config.js에서 “환경변수명”에 넣어주면 된다.

next.js를 now에 배포하면 클라우드 상에서 빌드를 해주는데 그때 시크릿을 가져와서 환경변수에 추가해주는것같다. 이 추가된 환경변수는 노드 환경에서만 사용 가능한 환경 변수이기 때문에 이걸 리액트에서 사용하려면 next.config.js에서 env에 한번더 넣어줘야한다.

Next.js의 아쉬운점

개발모드, 프로덕션모드에 따라 분기처리하는 방법은 넥스트의 공식문서에 나와있지도 않다.

next는 문서가 굉장히 빈약하여 사용하기가 매우 까다롭다..

출처

https://www.leighhalliday.com/secrets-env-vars-nextjs-now