Next.js 에서 local, development, production 환경 셋팅하기

안녕하세요! 루루개발자입니다.

이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다.

 

왜 local, development, production 환경을 셋팅해야 하나?

로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다.

 

 

.env 파일을 활용한 ts 파일로 config 셋팅 진행

사실 .env 파일만 사용해서 local, development, production 환경을 분리할 수는 있습니다. 하지만 클라이언트(브라우저)에서 .env 값을 참조하려면 파라미터명 앞에 "NEXT_PUBLIC_" 접두사를 붙여야 한다는 점과, 클라이언트에서 process.env.${파라미터명} 이렇게 접근할 때 타입추론이 안되는 점도 불편한 점으로 다가왔습니다. 그래서 .env 파일은 local, development, production 인지만 구분하는 용도로 활용하고 나머지 config 값들은 ts 파일로 작성하게 되면, 값을 참조할 때 타입추론이 가능하여 더 편리하게 사용할 수 있습니다.

 

 

.env 파일 생성

아래 3개 .env 파일을 생성합니다.

# .env.localhost
NEXT_PUBLIC_RUN_MODE=local

# .env.development
NEXT_PUBLIC_RUN_MODE=development

# .env.production
NEXT_PUBLIC_RUN_MODE=production

 

 

config 폴더 및 파일 셋팅

config 폴더를 생성하고 다음과 같이 파일을 생성합니다.

# config.local.ts
import getConfigs from "./config.common";

// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
const baseUrl = 'http://localhost:3000';
const mode = 'local';

// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
const configLocal = getConfigs({
  baseUrl,
  mode,
});

export default configLocal;

# config.development.ts
import getConfigs from "./config.common";

// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 development 환경에 맞는 값을 지정합니다.)
const baseUrl = 'http://localhost.dev:3000';
const mode = 'development';

// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
const configDevelopment = getConfigs({
  baseUrl,
  mode,
});

export default configDevelopment;

# config.production.ts
import getConfigs from "./config.common";

// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 production 환경에 맞는 값을 지정합니다.)
const baseUrl = 'http://localhost.prod:3000';
const mode = 'production';

// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
const configProduction = getConfigs({
  baseUrl,
  mode,
});

export default configProduction;

# config.common.ts
export declare namespace ICommonConfig {
  export type Mode = 'local' | 'development' | 'production';

  export interface Params {
    baseUrl: string;
    mode: Mode;
  }
}  

// local, development, production 과 관계없이 동일한 값으로 반환되는 부분은 해당 함수의 return 되는 부분만 수정하면 됩니다. (달라져야 하는 값이 아닌, 같은 값에 대해서는 local, development, production 파일을 모두 수정할 필요가 없어지게 됩니다.)
export default function getConfigs(params: ICommonConfig.Params) {
  // local, development, production 마다 달라지는 값
  const {
    baseUrl,
    mode,
  } = params;

  // 공통으로 반환되는 구조
  return {
    baseUrl,
    mode,

    api: {
      // ...
    },
  };
}

# config.export.ts
import configDevelopment from "./config.development";
import configLocal from "./config.local";
import configProduction from "./config.production";

// 클라이언트에서는 이 함수를 사용하여 config 값을 참조합니다.
const Config = () => {
  switch(process.env.NEXT_PUBLIC_RUN_MODE) {
    case 'local': return configLocal;
    case 'development': return configDevelopment;
    case 'production': return configProduction;
    default: return configLocal;
  }
};

export default Config;

 

 

필요 패키지 설치

환경 분리를 위해 env-cmd 패키지가 필요합니다. env-cmd 패키지를 설치합니다.

npm i env-cmd

 

 

package.json 스크립트 수정

"scripts": {
    "local": "env-cmd -f .env.localhost next dev -p 6600",
    "build": "next build",
    "build:dev": "env-cmd -f .env.development next build",
    "start": "next start -p 6600",
    "start:dev": "env-cmd -f .env.development next start -p 6600",
},

스크립트 부분을 위와 같이 적절히 수정합니다. (listen 포트는 예시로 6600 으로 설정합니다.)

 

 

인덱스 페이지에서 Config 값 확인

루트 컴포넌트에서 다음과 같이 Config().mode 값을 출력하는 코드를 작성합니다.

 

1. local 환경 확인

1) npm run local 

npn run local

 

2) http://localhost:6600 에 접속하여 local 이 뜨는지 확인합니다.

 

2. development 환경 확인

1) npm run build:dev

npm run build:dev

2) npm run start:dev

npm run start:dev

3) http://localhost:6600 에 접속하여 development 가 뜨는지 확인합니다.

 

3. production 환경 확인

1) npm run build

npm run build

2) npm run start

npm run start

3) http://localhost:6600 에 접속하여 production 이 뜨는지 확인합니다.

 

 

마무리하며

이렇게 .env 파일을 활용하여 .ts 파일로 config 값들을 local, development, production 환경을 분리하는 방법에 대해 공유드렸습니다. 필요하신 분들께 이 글이 도움이 되면 좋겠습니다. 감사합니다.