[NuxtJS] NuxtJS에서 .env 환경변수 사용하기

어떤 환경으로 프로젝트를 한다 해도 대부분의 프로젝트에서 .env 환경변수 파일을 사용할 것이라고 생각된다.

사실 나 역시 알고만 있었지 실제로는 처음 써보기 때문에 그냥 .env파일만 선언해서 사용하면 되는 줄 알았는데, NuxtJS는 좀 다른 환경이랑은 다르게 사용해야 하는 듯싶어 이렇게 기록해 둔다.

---

NuxtJS에서 .env 사용하기

당연히 구글링을 해봤다면 내가 작성한 글 말고도 다른 글을 보고 해결을 했을 수 있다.

하지만 대부분의 NuxtJS 관련 글을 보고 있자니 dotenv 플러그인을 설치하는 것부터 시작하더라.

 

여기서 첫 번째 의문이 들었다.

NuxtJS에서 dotenv플러그인을 사용해야만 .env를 사용할 수 있다면 이미 내장되어 있지 않을까?

라는 합리적 추론을 바탕으로 패키지를 뒤져본 결과 프로젝트를 생성하면 dotenv플러그인이 내장되어 있는 것을 확인했다.

(특정 버전 이상부터만 내장되어 있는 것일 수도 있어서 내장되어 있는지부터 확인하는 걸 추천한다.)

 

자 그럼 여기서 dotenv가 내장되어 있다면 다른 블로거들이 작성한 글을 토대로 사용하면 어떻게 될까?

우선 root 경로에 .env 파일을 만들어주고 다음과 같이 설정을 해보았다.

TEST = test입니다.

이렇게 테스트 용으로 .env파일을 만들어 두고 mouted()에서 값을 찍어보았다.

<template>
  <div>
  </div> 
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IndexPage',
  mounted() {
    // console.log(process)
    // console.log(process.server, process.client);
    console.log(process.env.TEST)
  },
})
</script>

결과는? 당황스럽게도 "undefined"가 발생하였다.

이유가 뭘까? 다른 블로그에서는 다들 잘만 사용하던데...

 

그러면 서버 사이드 렌더링에서도 한번 찍어볼까?

<template>
  <div>
  </div> 
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IndexPage',
  mounted() {
    // console.log(process)
    // console.log(process.server, process.client);
    console.log(`csr : ${process.env.TEST}`)
  },
  asyncData() {
    console.log(`asyncData ssr: ${process.env.TEST}`);
  }
})
</script>

아주 재미난 결과가 나왔다.

서버 사이드 렌더링에서는 잘 찍히고, 클라이언트 사이드 렌더링에서는 값이 안 나오는 것을 확인할 수 있었다.

그렇다 .env 파일은 보안상 서버 사이드 렌더링에서만 찍힌다고 한다.

 

그래서 공식문서에서는 클라이언트 사이드 렌더링에서도 사용하는 방법을 안내해주고 있다.

https://nuxtjs.org/docs/configuration-glossary/configuration-env/

The env property

 

바로 nuxt.config.js에서 다시 한번 선언해서 사용하는 것이다.

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

이런 식으로 nuxt.config.js에서 env 프로퍼티를 정의하게 되면 SSR/CSR 상관없이 사용이 가능하다.

 

하지만 만약 NuxtJS의 버전이 2.12 이상이라면 좀 더 나은 방법을 안내해주고 있다.

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/

Moving from @nuxtjs/dotenv to runtime config

 

이 방법은 아래와 같이 두 개의 프로퍼티로 정의해서 사용하는 방식이다.

export default {
  publicRuntimeConfig: {},
  privateRuntimeConfig: {}
}

• publicRuntimeConfig: 클라이언트나 서버나 어느 곳에서도 사용 가능한 값들을 선언해 두는 곳이다.
• privateRuntimeConfig: 서버에서만 사용 가능한 값들을 선언해 두는 곳이다.

공식문서를 살펴보면 공개되어도 상관없는 값들과 서버에서만 사용하는 값을 나뉘어서 사용하라는 것으로 보인다.

그리고 저렇게 nuxt.config.js에서 Config선언을 해둔다면 context객체에서 $config로 접근해 사용이 가능한 것으로 보인다.

export default {
  publicRuntimeConfig: {
    baseURL: process.env.NODE_ENV === 'production' ? 'https://nuxtjs.org' : 'https://dev.nuxtjs.org'
  },
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

 

▷ use this.config or context.$config

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>

▷ inside templates {{ $config.* }}

<template>
  <p>Our Url is: {{ $config.baseURL}}</p>
</template>

뭐 이런 식으로 사용하면 되는 것 같다.

 

그리고 또 재미난 점은 공식문서에서 만약 @nuxtjs/dotenv 플러그인에 설치되어 있다면 삭제하고 Nuxt 런타임 구성으로 마이그레이션 하라고 되어 있다는 점이다. 꼭 하라는 건 아니고 권장인 것 같다.

 

여기까지가 Nuxt 프로젝트 안에 내장되어 있는 dotenv를 가지고 사용하는 방법이고 좀 더 번외로 넘어가 보자.

---

@nuxtjs/dotenv

만약 내장되어 있지 않거나, 위에서 설명한 방법처럼 사용하기가 너~~~~무 귀찮다 하면 그냥 @nuxtjs/dotenv를 설치해서 사용하는 것도 한 방법이다.

npm install @nuxtjs/dotenv
yarn add @nuxtjs/dotenv

설치를 해주고 다음과 같이 설정만 해주면 된다.

 

▷ nuxt.config.js

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/dotenv'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // ['@nuxtjs/dotenv', { filename: `.env.${process.env.NODE_ENV}` }],
    '@nuxtjs/dotenv'
  ],

이렇게 설정만 해주면 그냥 .env 파일에 선언한 내용들 서버, 클라이언트 어느 곳에서나 사용이 가능해진다.

 

위 예제에서 주석으로 처리해 놓긴 했지만 NODE_ENV에 따라 .env.production 또는 .env.development로 바꿔 사용할 수 있다.

---

보통 .env 파일은 gitignore에서 제외시켜놓기 때문에 팀에서 별도 안내를 하던가 .env.example이라는 파일로 만들어 git에 넣어둔다. (나 같은 경우에는 .env.example 방법 사용 중이다.)

 

아 그리고 @nuxtjs/dotenv 에서는 .env.production 또는 .env.development로 분기해서 쓰는 법을 적어놨는데,

처음 설명했던 방식에서는 따로 방법을 적지 않은 이유는 별로 권장하지 않기 때문이다.

 

만약 굳이 분기해서 사용하고 싶다면 아래 흥미로운 글이 있으니 참고해 보길 바란다.

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

[nuxt.js] nuxt dotenv(.env)