env로 NextJs 환경변수 설정하기

환경변수

배포환경이 prod서버와 dev서버가 구분되어 있을 때, 사용 하는 환경변수들을 다르게 설정해야 되는 경우가 있다.

env-cmd

env-cmd 패키지를 설치한다.
env-cmd 패키지를 이용해서 스크립트에 따라 따로 환경파일이 로드되도록 설정할 수 있다.
npm i env-cmd

env 파일 설정

루트 폴더에 아래의 파일을 생성한다.
.env.development
.env.production

파일을 생성한 후 다음과 같이 코드를 작성한다.

`.env.production`
NEXT_PUBLIC_BASE_URL=https://project-sns-app-backend.herokuapp.com

`.env.development`
NEXT_PUBLIC_BASE_URL=https://localhost:3060

NextJs 환경의 경우 정확히 NEXT_PUBLIC 로 시작되도록 작성해야 제대로 된 결과를 확인할 수 있다.

script 변경

  "scripts": {
    "dev": "next dev",
    "build:dev": "env-cmd -f .env.development next build",
    "build:prod": "env-cmd -f .env.production next build",
    "start:dev": "env-cmd -f .env.development next start",
    "start:prod": "env-cmd -f .env.production next start",
    "lint": "next lint"
  },

_app에서 설정

function MyApp({ Component, pageProps }) {
  axios.defaults.baseURL = process.env.NEXT_PUBLIC_BASE_URL;
  console.log(process.env.NEXT_PUBLIC_BASE_URL);
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

npm run start:prod를 실행해본 결과 URL이 콘솔에 찍혔다.
참고로 위의 명령어를 실행하기 전 npm run build:prod로 빌드를 시켜줘야 한다.

pm2 사용

에러로 인한 서버 다운시 바로 재실행 및
로컬 서버를 끄거나 터미널을 끄면 서버가 다운되는 것을 방지하기 위해 pm2를 사용해야 한다.

ecosystem.config.js 파일 생성

module.exports = {
  apps: [
    {
      name: "project-sns-app-frontend",
      script: "npm run start:prod",
    },
  ],
};