Nuxt에서 @nuxjs/dotenv 없이 .env 파일 환경변수 셋팅하기

개요

@nuxtjs/dotenv 를 써도 .env 파일의 환경변수가 제대로 설정이 안되서 @nuxjs/dotenv 없이 .env파일을 읽어들여보자

 

같은 문제를 겪은듯한 분의 글 ↓

https://velog.io/@katanazero86/nuxt.js-nuxt-dotenv.env

[nuxt.js] nuxt dotenv(.env)

 

 

.env (.env_sample파일을 밑의 형태로 만들어 어떤 환경변수가 있는지 팀원들간에 공유한다.)

apiKey=
authDomain=
projectId=
storageBucket=
messagingSenderId=
appId=
measurementId=

 

nuxt.config.js

nuxt config의 env 속성을 이용해서 전역에서 이 nuxt.config.js의 env(환경변수)를 참조할 수 있게 만들수 있다.

require('dotenv').config()

export default {
  // ...생략

  env: {
    FIREBASE_APIKEY: process.env.apiKey,
    FIREBASE_AUTHDOMAIN: process.env.authDomain,
    FIREBASE_PROJECTID: process.env.projectId,
    FIREBASE_STORAGEBUCKET: process.env.storageBucket,
    FIREBASE_MESSAGINGSENDERID: process.env.messagingSenderId,
    FIREBASE_APPID: process.env.appId,
    FIREBASE_MEASURMENTID: process.env.measurementId,
  },
}

 

firebase.ts

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_APIKEY,
    authDomain: process.env.FIREBASE_AUTHDOMAIN,
    projectId: process.env.FIREBASE_PROJECTID,
    storageBucket: process.env.FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGINGSENDERID,
    appId: process.env.FIREBASE_APPID,
    measurementId: process.env.FIREBASE_MEASURMENTID,
  })
}

 

dev/prod 나누기

해보진 않았지만, 이런식으로 하면 읽어들이는 .env파일을 자유자재로 바꿀 수 있을꺼같다.

const envPath = `config/.env.${process.env.ENV || 'local'}`
require('dotenv').config({ path: envPath })