env 파일 사용해서 서버 url 환경변수 설정(nuxt.js, node, dotenv)

 

nuxt.js에서 env 파일사용방법 두가지가 있다.

 

@nuxtjs/dotenv와 dotenv 패키지는 둘 다 환경 변수를 로드하는 역할을 한다.

 

 

dotenv

 

일반적인 Node.js 애플리케이션에서 사용.

Nuxt.js 설정 파일에서 직접 require('dotenv').config()를 호출해야 함.

Nuxt.js와 별도로 동작하며, 직접 통합해야 함.

 

@nuxtjs/dotenv

 

Nuxt.js 애플리케이션에서 환경 변수를 쉽게 관리하고 로드하는 데 특화됨.

Nuxt.js 모듈로서 간편하게 설정 파일에 추가하여 사용 가능.

Nuxt.js와 자연스럽게 통합되어 환경 변수를 Nuxt.js 설정에서 바로 사용할 수 있음.

 

난 nuxt.js 니깐 @nuxtjs/dotenv를 사용햇다.

 

 

 

1. 패키지 설치

npm install @nuxtjs/dotenv

 

 

2. 프로젝트 제일 상위에 .env 파일을 만든다.

 

 

3. API_URL = url 을 적는다.

API_URL=https://api.example.com

 

 

4. nuxt.config.js 에 다음 내용을 끼워 넣는다. 

modules: [
    '@nuxtjs/dotenv',
  ],

 publicRuntimeConfig: {
    apiUrl: process.env.API_URL
  },

 

 

5. js 파일에서 원하는 부분에서 process.env.API_URL 로 불러와 사용할 수 있다. 

 

난 axios를 사용하고 그 url 문자열 안에다가 다음과 같이 넣어 줬다. 

 

.get(`${process.env.API_URL}/myDining/reservations/${id}`)

 

 

오 데이터를 잘 불러오는구망