[Nuxt] .env 사용하는 방법

vue 2.6을 사용할때는 .env를 사용하는 것은 그냥 파일을 만들고 프로젝트에 적용을 해서 build를 할때나 디버깅을 할때 
axios에서 사용하는 BASE_URL을 따로따로 설정해서 사용해서 정말 편했습니다. 

Nuxt라는 것을 시작하면서 처음부터 막히는 부분이 이 부분이더군요.. 

우선, dotenv를 설치하고 사용을 해줘야합니다. 
https://modules.nuxtjs.org/?q=dot
설치방법은 아래와 같습니다. 

 

Explore Nuxt Modules

위와 같이 nuxt 전용 dotenv를 설치를 해야합니다. 

저는 프로젝트에 아래와 같이 테스트를 위해서 env 파일을 하나 생성을 해주었답니다. 

project 폴더내 nuxt.config.js 내에 사용한다고 명시를 해주고 사용을 다음과 같이 해줬습니다.

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

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

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    retry: {
      retries: 4, // 최대 재전송 횟수 4회
      shouldResetTimeout: true, // 재전송 간 타임아웃을 리셋하기
      retryDelay: (retry) => {
        return retry * 100 // 재전송 횟수 * 0.1초만큼 재전송 시작 시간을 지연시키기
      },
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      retryCondition: (error) => err.response.status === 429 // 서버 혼잡이 일어났을 경우에만 재전송하기
    },
    progress: true, // 로딩바를 사용하도록 설정
    baseURL: process.env.API_URL // env 변수 값을 가져와서 사용한다.
  },

.env 에 설정되어있는 API_URL 을 가지고 사용할 수 있도록 해보았습니다. 
다음 포스팅에서는 nuxt/axios를 사용하는 방법을 포스팅하도록 하겠습니다. 

반응형