nextjs env setting & test 환경 설정해보기

nextjs env setting

개념

• Next.js 프레임워크에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다.
• 일반적으로 .env 파일 내부에는 API 키, OAuth 토큰, 데이터베이스 연결 등 민감한 정보가 포함되어 있습니다. 중요한 정보를 .gitignore 파일에 넣어서 모든개발자와 공유하지 않도록 해주는 것이 좋습니다.

우선순위

1. process.env
2. .env.${NODE_ENV}.local
3. .env.local
4. .env.${NODE_ENV}
5. .env

• ${NODE_ENV}에 올 수 있는 값

dev, devlopment, prod, production, test, qa, staging 등

작성예시

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

• 브라우저에서 읽어야 하는 경우 NEXT_PUBLIC 접두어를 붙여야 한다.

NEXT_PUBLIC_TEST=test-var 

• 출력 방법

console.log(process.env.DB_HOST);

테스트 파일 셋팅

• pages > envtest.tsx

export default function EnvTest() {
  console.log('----------------브라우저----------------')
  console.log('process.env.NODE_ENV : ', process.env.NODE_ENV)
  console.log('process.env.TEST : ', process.env.TEST)
  console.log('process.env.NEXT_PUBLIC_TEST : ', process.env.NEXT_PUBLIC_TEST)
  console.log('process.env.NEXT_PUBLIC_HAPPY : ', process.env.NEXT_PUBLIC_HAPPY)
  console.log('process.env.STAGING : ', process.env.STAGING)

  return (
    <h1>ENV TEST</h1>
  );
}

export async function getServerSideProps() {
  console.log('----------------서버----------------')
  console.log('process.env.NODE_ENV : ', process.env.NODE_ENV)
  console.log('process.env.TEST : ', process.env.TEST)
  console.log('process.env.NEXT_PUBLIC_TEST : ', process.env.NEXT_PUBLIC_TEST)
  console.log('process.env.NEXT_PUBLIC_HAPPY : ', process.env.NEXT_PUBLIC_HAPPY)
  console.log('process.env.STAGING : ', process.env.STAGING)
  return { props: {} }
}

• .env.devlopment

TEST=개발환경변수(.env.development)
NEXT_PUBLIC_TEST=브라우저에서인식하기위한개발환경변수(.env.development)

• .env.devlopment.local

TEST=로컬개발환경변수(.env.development.local)
NEXT_PUBLIC_TEST=브라우저에서인식하기위한로컬개발환경변수(.env.development.local)

• .env.test

TEST=테스트환경변수(.env.test)
NEXT_PUBLIC_TEST=브라우저에서인식하기위한테스트환경변수(.env.test)

• .env.test.local

TEST=로컬테스트환경변수(.env.test.local)
NEXT_PUBLIC_TEST=브라우저에서인식하기위한로컬테스트환경변수(.env.test.local)

특정 .env 파일 적용한 script 실행하기

• npm install env-cmd 실행
• package.json

"scripts": {
    "dev:local": "env-cmd -f .env.development.local next dev -p 2020",
    "dev:build": "env-cmd -f .env.development next build",
    "dev:start": "env-cmd -f .env.development next start -p 3030",

    "test:local": "env-cmd -f .env.test.local next -p 4040",
    "test:build": "env-cmd -f .env.test next build",
    "test:start": "env-cmd -f .env.test next start -p 5050",

    "lint": "next lint"
  },

• env-cmd -f 명령어는 뒤에 나오는 .env 파일을 사용하겠다는 예시이다.
• npm run dev:local 을 실행하면, next dev 명령어가 .env.development.local 파일을 적용하여 2020 포트에서 열리게 된다.
• 서버쪽에서 실행되는 log는 NEXT_PUBILC이 붙던 안붙던 인식할 수 있고, 브라우저에서 찍히는 log는 NEXT_PUBILC 접두어가 붙지 않으면 인식하지 못한다.
• 실행결과 (.env.development.local 이 적용됨)

----------------서버----------------
process.env.NODE_ENV :  development
process.env.TEST :  로컬개발환경변수(.env.development.local)
process.env.NEXT_PUBLIC_TEST :  브라우저에서인식하기위한로컬개발환경변수(.env.development.local)
----------------브라우저----------------
process.env.NODE_ENV :  development
process.env.TEST : undefined
process.env.NEXT_PUBLIC_TEST :  브라우저에서인식하기위한로컬개발환경변수(.env.development.local)

• npm run dev:build ⇒ npm run dev:start 실행 시

----------------서버----------------
process.env.NODE_ENV :  production
process.env.TEST : 개발환경변수(.env.development)
process.env.NEXT_PUBLIC_TEST :  브라우저에서인식하기위한개발환경변수(.env.development)
----------------브라우저----------------
process.env.NODE_ENV :  production
process.env.TEST : undefined
process.env.NEXT_PUBLIC_TEST :  브라우저에서인식하기위한개발환경변수(.env.development)

• npm run test:local 이나 test:build 등을 실행해보면 각각 다른 .env 파일이 적용된 모습을 볼 수 있다.

script 실행 시 환경변수 지정하기

• npm install cross-env 실행

// "스크립트 명령어" : cross-env 환경변수1=값 환경변수2=값 ... 실행명령어

"scripts": {
    "staging:build": "cross-env STAGING=staging-var next build",
    "staging:start": "cross-env STAGING=staging-var next start -p 6060",

    "dev": "cross-env NEXT_PUBLIC_HAPPY=happy-dev! next dev",
    "build": "cross-env NEXT_PUBLIC_HAPPY=happy-build! next build",
    "start": "cross-env NEXT_PUBLIC_HAPPY=happy-prod! next start -p 7070",

    "lint": "next lint"
  },

• npm run staging:build ⇒ npm run staging:start 하면 6060 포트에서 배포환경모드로 실행된다.
• 결과확인

----------------서버----------------
process.env.NODE_ENV :  production
process.env.STAGING :  staging-var
----------------브라우저----------------
process.env.NODE_ENV :  production
process.env.STAGING :  undefined

• npm run dev, npm run build, npm run start 명령어도 실행해보면서 확인해 보시면 좋을 것 같습니다.