[ vue3 / nuxt3 ] process.env 값 불러오기

    Node.js 애플리케이션을 배포할 때 환경변수를 사용하는데 운영서버, 개발서버, 로컬 등의 환경에 따라 값을 다르게 줘야 하는 것들을 환경변수로 사용한다.

    환경변수(environment variable)에는 DB나 서버의 비밀번호, 어떤 서비스의 인증 정보 등의 값을 담는다. 환경변수는 보통 .env라는 파일을 따로 만들어놓고 process.env.~~ 방식으로 호출하여 사용한다. .env 파일은 서버 애플리케이션 build, dev, generate time 시 로드되고 nuxt.config 파일에 public으로 지정하지 않은 이상 클라이언트 사이드에서는 값을 확인할 수 없다.

    이렇게 최상단 폴더(admin 디렉토리) 바로 밑에 .env 파일을 생성하고
파일 내부에 a = b 형식으로 전달하고자 하는 값을 적는다. 모드에 따라 다른 값을 쓰고 싶다면 .env.local, .env.dev 이런 식으로 따로따로 지정해 주면 된다.

    그냥 vue3, vite를 사용하였을 땐 딱 저 두 파일만 있어도 사용이 가능했는데 nuxt3에서는 config 파일에 runtime config를 따로 지정해주어야 한다.

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: '123',
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: '/api'
    }
  }
})

    이런 식으로 public이라고 따로 지정해 주면 클라이언트 사이드에서도 접근할 수 있다.

 

    내가 하려는 것은 개발모드, 운영모드 분기처리해서 axios 통신 주소를 로컬에서 테스트할 때와 서버에 올렸을 때 각각 다른 주소로 요청을 보내려는데
문제는 아래 코드와 같이 .env 파일의 값(${process.env.PMS_APP_REST_API_URL})을 어떻게 끌어와야 하는지이다. 위의 예시 코드처럼 직접 값을 입력하면 클라이언트 사이드에서 '/api'를 확인할 수 있다는 것까지는 했다. 그런데 .env 파일의 저장된 값은... 어떻게 사용해야 하는 것인가?!!!

runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: '123',
    // Keys within public, will be also exposed to the client-side
    public: {
      pmsAppRestApiUrl: 'http://localhost:8091',
      test: `${process.env.TEST__URL}`,
    },
  },

    아무리 유튜브, 구글 등 뒤져봐도 머르겠다... ㅠㅠㅠㅠㅠㅠㅠ ${process.env.~~}를

 

=> 삽질 완료

안 되던 이유 : local을 loval로 오타....

장난하니 ㅠㅠ 진짜..ㅠㅠ

 

1. .env.local, .env.dev 파일 생성하여 값 써주기 (보통 .env.production, .env.development 이런 식으로 생성)
2. nuxt.config.ts → runtimeConfig : { public : { 원하는 키값: process.env.~~} } 설정하기
3. npm install @nuxtjs/dotenv 설치하기
4. package.json → "scripts" : {} 부분에 "dev", "build" 등 적혀있을 텐데
   "local" : "nuxt dev --dotenv .env.local" 이런 식으로 작성하여 추가
5. 터미널에서 npm run local 실행하여 컴포넌트의 script 내에서 console.log(useRuntimeConfig().public) 찍어서 확인해 보기

 

1번 env 파일 생성

 

2번 nuxt.config.ts의 runtimeConfig 설정 (test, test2 둘 다 가능)