Nuxt 프로젝트에서 환경변수 관리하기 (feat. dotenv)

nuxt · 2021년 4월 7일 · 11 min read

2026년 기준 안내

이 글은 Nuxt 2 프로젝트에서 dotenv 패키지를 직접 불러와 환경변수를 주입하던 시기의 예제입니다.
Nuxt 3와 Nuxt 4에서는 runtimeConfig와 NUXT_ 환경변수 매핑을 사용하는 방식이 기본입니다.

최신 방식은 Nuxt 3와 4에서 runtimeConfig로 환경변수 관리하기에 따로 정리했습니다.

들어가며

안녕하세요.
오늘은 dotenv를 활용하여 Nuxt 프로젝트에서 환경변수를 관리하는 법을 소개해드리고자 합니다.

서비스를 배포하실 때 환경별로 포트번호 등이 달라서 소스코드를 직접 수정하셨던 경험이 있으신가요 ?

포트번호와 같이 환경별로 다른 값이나 DB 접속 정보 등 소스코드에 포함되면 안될 중요한 값을
dotenv 패키지를 통해서 환경변수로 관리한다면, 별도의 추가 작업을 할 일이 없으실 겁니다.

설치하기

npm i dotenv

terminal에서 프로젝트 root디렉토리로 이동한 후 위 명령어를 실행합니다.

설정하기

설치가 완료되었다면, nuxt config 파일(nuxt.config.js)에서 작업이 필요합니다.

1. dotenv 패키지와 환경변수 파일 불러오기

const dotenv = require('dotenv')
const envPath = process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development'

dotenv.config({ path: envPath })

라인 2와 같이 NODE_ENV에 따라 env파일 path를 다르게 설정해주면,
production과 development 환경에서 자연스레 알맞는 환경변수가 적용됩니다.

2. env파일을 생성하고 값 지정하기

NAME=개발 블로그

SERVER_HOST=localhost
SERVER_PORT=9001

HEADER_TITLE=개발 블로그
HEADER_DESCRIPTION=개발 블로그입니다.

API_URL=http://localhost:9002

KAKAO_SDK_KEY=replace-with-kakao-sdk-key

설정하신 경로상에 위 예시와 같이 env파일을 만들고 저장합니다.
SDK API키와 같이 소스코드에 포함되면 안될 값이 있다면 적극적으로 세팅해주세요.

3. Nuxt Config에서 env 매핑하기

어느 변수를 만들지 정하셨다면, 다시 nuxt config 파일로 돌아와서,
export object 내에 아래와 같이 용도에 따라 활용하고,

프로젝트 서비스 내에서도 필요할 경우 env property에 추가해주세요.

export default {
  server: {
    host: process.env.SERVER_HOST || 'localhost',
    port: process.env.SERVER_PORT || 80,
  },
  env: {
    NAME: process.env.NAME,

    HEADER_TITLE: process.env.HEADER_TITLE,
    HEADER_DESCRIPTION: process.env.HEADER_DESCRIPTION,

    API_URL: process.env.API_URL,

    KAKAO_SDK_KEY: process.env.KAKAO_SDK_KEY,
  },
  head: {
    titleTemplate: '%s - ' + process.env.HEADER_TITLE,
    title: process.env.HEADER_TITLE || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.HEADER_DESCRIPTION || '' },

      { hid: 'og-title', property: 'og:title', content: process.env.HEADER_TITLE },
      { hid: 'og-description', property: 'og:description', content: process.env.HEADER_DESCRIPTION || '' },
    ],
  },
}

4. 서비스에서 env 활용하기

성공적으로 설정을 완료하셨다면, store나 page component 등 서비스 전역에서 환경변수를 활용하실 수 있습니다.

// Store에서 API 함수 관리 시 활용 예
export const actions = {
  getPress(context, payload = {}) {
    const url = `${process.env.API_URL}/press`

    return this.$axios.$get(url, { params: payload.query })
  },
}