개발 시 환경 변수 적용

 

개발을 할 때, 서버 주소나 서비스 계정 정보를 환경변수로 설정해두고 진행한다.

환경변수를 .env 에 저장하면 관리도 편하고 스크립트 빌드 모드에 따라 다른 값을 사용할 수 있다.

이를 위한 여러가지 기능을 지원해준다.

 

next.js에서는 env.local, env.production, env.development 파일을 지원하며,

배포 환경과 개발 환경에 따로 적용하는 변수는 각각의 파일에 적용하고 배포, 개발 환경 공동으로 사용하는 변수는 env.local파일에 적용할 수 있다.

 

그리고 또한 서버 URL의 경우 아래와 같이 추후 확장성을 고려하여 api 버전 정보를 추가하는 경우가 있는데, 그런 경우에는 서버 도메인 주소 + 접두사 + API 버전 으로 구성하는데  next.js에서는 다음과 같이 .env 파일에서 조합도 가능하다.

 

NEXT_PUBLIC_SERVER_URL=http://192.168.44.136:4041
NEXT_PUBLIC_SERVER_API_VERSION=v1

NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_SERVER_URL/api/$NEXT_PUBLIC_SERVER_API_VERSION

 

환경변수를 사용할 때는 api 호출 구문을 설정하는 파일에서 서버 주소를 불러와서 사용한다.

아래 코드는 axios 라이브러리를 사용하여 객체를 생성하고 서버 주소를 사용하기 위해 환경변수를 사용하고 있다.

 

import axios from "axios";

export const API_URL = process.env.NEXT_PUBLIC_API_URL;

export const instance = axios.create({
  baseURL: API_URL,
});