nuxt3 환경변수

환경변수 사용하기

서버 환경이 바뀌거나, 특히 개발환경과 배포 환경의 특정 변수를 한번에 지정하기 위해서 환경변수를 사용하면 편한 경우가 있다. 이를 위한 방법 정리.

nuxt config

nuxt3 공식 페이지에는 .env 파일에 대한 설명이 없어서 nuxt2의 configuration 설명에서 참고했다.

config file 설정

nuxt의 환경변수에 관한 설정은 nuxt.config.js 혹은 .ts 파일에서 지정할 수 있다. js이건 ts이건 상관은 없는 것 같다.

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: "변수입력",
    },
  },
});

.vue 파일에서 호출 시 (setup에서 호출해야함) 아래 설정 참고

const runtimeConfig = useRuntimeConfig();
const apiBase = runtimeConfig.public.apiBase;

.env 파일 사용

환경변수를 정리한 .env(dotenv)파일은 nuxt에 내장된 모듈로 불러올 수 있다. 이전(nuxt2)에선 @nuxtjs/dotenv를 추가로 설치했던 기억이 있는데, 암튼 nuxt3에선 별도의 패키지 설치 없이 된다.

.env에서 변수 불러오기

.env는 이렇게 작성하면 된다.

API_BASE_URL: "APIURL";

그리고 위에서 설정한 nuxt.config.js 파일을 아래와 같이 변경하면 .env파일에서 지정한 변수를 불러오게 된다.

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE_URL,
    },
  },
});

개발환경에 맞는 변수파일 지정하기

별도의 파일 지정이 없다면 .env 파일을 로드하게 되고, 개발환경에서 별도의 변수를 지정해서 사용하고 싶다면 --dotenv '파일이름' 형태로 지정할 수 있다. 편의를 위해 package.json 파일에서 수정하면 된다. 아래는 dev 페이지에서 .env.dev를 호출하는 예시

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --dotenv .env.dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },