nextjs env 환경 변수(Environment Variables)를 다루는 방법

nextjs는 최근 프론트엔드 생태계에서 큰 인기를 끌고 있는 웹 프레임워크 중 하나입니다.

nextjs를 사용하면서 환경변수를 사용하는 방법을 알아보겠습니다.

환경변수란 영어로는 Environment Variables로 표현하며 통상적으로 환경에 따라 다르게 적용되어야하는 값들을 의미합니다.

nextjs 에서는 이러한 환경 변수에 대한 지원이 내장되어 있으나 제공하는 규칙에 맞는 형태로 환경변수를 작성하고 관리해야 효과를 적절히 얻을 수 있습니다.

환경 변수를 잘 설정해야하는 3가지 이유

1. 보안

환경 변수는 민감한 정보를 안전하게 관리하는 데에 큰 역할을 합니다.

데이터베이스의 비밀번호, 과금과 관련된 API KEY, 암호화를 하는데 사용하는 KEY 등

환경변수를 이용하면 이러한 보안과 직결된 정보들을 숨길 수 있습니다.

2. 유연성

환경 변수를 이용하면 애플리케이션의 동작을 환경에 따라 유연하게 변경할 수 있습니다.

환경 변수는 개발, 테스트, 프로덕션, CI 등 다양한 환경에서 다른 설정 값을 사용해야 할 때 각각의 환경에 맞는 설정을 쉽게 적용할 수 있도록 도와줍니다.

코드의 수정 없이 환경 변수만 변경하면 되므로 배포 과정이 간소화 되고 유연하게 테스트를 수행할 수 있습니다.

3. 이식성

환경 변수는 애플리케이션을 다양한 시스템에서 쉽게 실행할 수 있도록 도와줍니다.

예를 들면 로컬 개발 환경, Docker 컨테이너, 테스트 환경 등 서로 다른 환경에서 동일한 코드를 실행해야 할 때

환경 변수로 시스템의 설정을 관리하면 코드 변경 없이 애플리케이션을 실행할 수 있어집니다.

이렇듯 환경 변수를 올바르게 설정하는 것은 매우 중요한 일 중 하나입니다.

특히 보안 관련한 문제가 치명적인데요 사용량에 비례하여 과금이 되는 API 서비스 혹은 SaaS 서비스의 비밀번호, KEY가 유출되는 경우

수천만원에 달하는 요금 폭탄을 맞을수도 있으니 주의가 필요하겠습니다.

이제 nextjs에서 환경변수를 설정하는 방법을 알아보겠습니다.

Nextjs 환경변수 설정 방법

환경변수는 통상적으로 다음과 같은 파일 명명규칙을 사용하여 프로젝트의 Root(최상위)에 정의하는 것이 일반적입니다.

.env

또한 환경변수의 경우 통상적으로 개발 환경, 테스트 환경, 프로덕션 환경에서 각기 다른 설정을 가지게 되는 경우가 매우 흔한데요

nextjs의 경우에는 이러한 부분을 고려하여 환경 변수의 로드 순서를 다음과 같이 정해두고 우선순위가 높은 순서대로 조회하며 해당 변수가 발견되면 중지됩니다.

process.env
.env.$(NODE_ENV).local
.env.local
.env.$(NODE_ENV)
.env

이제 .env 파일을 작성하는 방법을 알아보겠습니다.

.env 파일 내부

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

다음 예시와 같이 KEY 값=밸류 의 형태로 작성한다는것을 알 수 있습니다.

통상적으로 환경변수는 위 예시와 같이 모두 대문자인 스네이크케이스를 통해 정의하는 것이 일반적입니다.

이처럼 정의해둔 우리의 환경변수를 애플리케이션에서 사용하기 위해서는 process.env.변수명의 형태로 조회를 수행하면 되는데요

다음과 같이 접근할 수 있습니다.

const myDbHost = process.env.DB_HOST

또한 환경변수는 소스코드에서 드러나면 안되는 민감한 정보를 담기 때문에 다른 사람들이 볼 수 있는 형태로 업로드해선 안됩니다.

따라서 git을 이용하는 경우 .gitignore 파일을 통하여 환경변수 파일이 github 등과 같은 형상관리 사이트에 올라가지 않도록 적절히 처리해주는 것이 중요합니다.

.gitignore

.env
.env.local

이렇게 환경변수 파일들이 git에 올라가지 않도록 처리해주시면 되겠습니다.

nextjs 환경변수 브라우저에서도 사용하기

기본적으로 nextjs에서 환경 변수는 node.js 환경에서만 사용할 수 있도록 설정되어있습니다.

즉 브라우저에서는 환경변수에 대하여 접근할 수 없다라는 의미로 볼 수 있는데요

브라우저에서도 환경변수에 접근해야만 하는 경우에는 환경변수의 명명 과정에서 NEXT_PUBLIC_접두사를 붙이는 것을 통해 해결할 수 있습니다.

예시로 보면 다음과 같아요

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

이렇듯 브라우저에서도 사용 가능한 공개 환경 변수를 설정하기 위해서는 NEXT_PUBLIC_ 접두사를 붙여주면 됩니다.

해당 경우에도 사용 예시는 변하지 않습니다.

어떻게 NEXT_PUBLIC_ 환경변수에 접근하는 지 예제코드를 보겠습니다.

const myPublicAnalyticsId = process.env.NEXT_PUBLIC_ANALYTICS_ID

브라우저에서도 사용하기 위하여 NEXT_PUBLIC_ 접두사가 생겼다는 차이점 외에는 모든 사용방법이 같다는 것을 알 수 있습니다.

마치며

이번에는 환경변수가 무엇인지와 왜 중요한지 그리고 어떻게 환경변수를 설정하고 사용할 수 있는지를 다루었습니다.

환경변수를 잘 이용하여 보안 문제에서 자유로운 프로그래밍을 하시길 바라며 글을 마치도록 하겠습니다.

감사합니다.