Nuxt 베이스 프로젝트(5) - 환경변수로 개발/배포 환경 분리하기

vue에서는 보통 axios 를 이용해 api를 호출합니다. 이번 포스팅에서는 nuxt 프로젝트에 axios를 repository 패턴으로 적용해보기 전에, 환경변수를 통해 환경에 따라 api 요청 URL을 분리하는 등의 작업을 해보겠습니다.

step1. 환경변수 개발계/운영계 분리하기

실제 프로젝트를 진행하다 보면 개발계/운영계를 분리하거나, 써드파티 서비스에서 api를 호출하는 등 다양한 환경에 부딪힐 수 있습니다. 이를 위해 먼저 환경변수를 개발계/ 운영계로 분리해보겠습니다.

기존에 존재하는 .env 파일은 다음과 같이 수정해줍니다.

BASE_URL=http://localhost:3000
SAMPLE_URL=https://daum.net

새로 만드는 .env.development 파일은 다음과 같이 작성해 줍니다.

BASE_URL=http://localhost:3000
SAMPLE_URL=https://google.com

이렇게 .env 파일을 두개로 나눔으로써 제가 하려는 일은, process.env.SAMPLE_URL 이라는 같은 환경변수를 호출하였을 때 어떤 환경으로 호출했느냐에 따라서 다르게 동작하도록 하는 것입니다. 여기서는 운영계에서는 SAMPLE_URL 이 다음 사이트로 이동하고, 개발계에서는 구글 사이트로 이동하겠죠.

위의 두 파일 중에서 환경에 적합한 파일을 호출하도록, nuxt.config.js 파일에 다음과 같이 추가해 줍니다.

// nuxt.config.js 
module.exports = { 
  // ... 
  dotenv: {
    filename:
      process.env.NODE_ENV === 'production'
        ? '.env'
        : '.env.' + process.env.NODE_ENV
  },
  // ... 
}

이제 package.json에서 npm run dev 스크립트는 NODE_ENV=development 로 호출하므로, nuxt.config.js의 dotenv 설정에 따라서 .env.development 파일의 환경변수를 따를 것입니다. SAMPLE_URL을 사용하면 구글 URL을 이용하게 됩니다.