[Next.js 14] .env 파일 생성 및 환경변수 설정 [AWS Amplify]

코드를 작성하다보면,

• API Key나 Client Token과 같이 소스코드에 포함시키기 민감한 정보를 다뤄야 하거나
• 개발 환경마다 다른 변수를 사용해야 할 때

가 존재한다. 이럴 때 사용하는 것이 환경변수이다.

기존에 Node.js에서 이 환경변수를 이용하기 위해서는 dotenv 패키지를 사용해야 했는데,

Next.js에서는 별도의 패키지 없이 환경변수를 사용할 수 있다. (React도 마찬가지)

살짝 주제엔 벗어나지만 혹시나 싶어, 환경변수는 빌드 파일에 포함되므로 누구나 볼 수 있다는 사실을 한번 짚고 넘어가겠다.

 

암튼 이번 포스팅에서는 Next.js 프로젝트에서 환경변수를 생성하고,

이를 AWS Amplify로 배포할 때 적용하는 방법을 정리해보고자 한다.

---

.evn 파일 생성 및 환경변수 할당

프로젝트의 바로 아래(루트 디렉토리)에 .env 파일을 하나 생성한 후, 간단하게 key=value 형식으로 작성하면 된다.

환경변수는 string 또는 undefined 타입이며, value 값에 공백이 포함되어 있을 경우 큰 따옴표나 작은 따옴표로 묶어주어야 한다.

⚠️ 환경변수가 undefined라고 뜨는 경우

브라우저에서 사용하는 환경변수의 경우, 특별한 접두사를 붙여야 한다.

앞서 첨부한 사진과 같이 환경변수의 key에 NEXT_PUBLIC_을 접두사(prefix)로 붙여주면 해결된다.

(리액트의 경우 REACT_APP_)

 

---

AWS Amplify 배포 시 환경변수 설정

Amplify 서비스의 호스팅 > 환경 변수 메뉴로 가면 환경 변수를 설정할 수 있다.

우측 상단의 변수 관리 버튼을 누르면 환경 변수를 추가 / 수정할 수 있다.

Amplify 호스팅 환경 변수 설정

 

추가로 빌드 설정에서 환경 변수를 설정해줄 수 있는데,

이 경우 환경 변수가 달라지는 상황이 생겼을 때 새로 빌드해주어야 변경사항이 반영된다.

 

끗~