개발환경

Nuxt, PrimeVue3 사용

---

문제점

• 기존 local 환경에서 개발하기위해서 하드코딩으로 기입해 놓은 BackEnd IP와 Port를
  따로 환경변수로 사용해야하는 문제
• local 환경의 NODE_ENV는 development

---

해결방법

• Nuxt3의 nuxt.config.ts는 dotenv를 기본적으로 포함하고 있기 때문에 .env 파일을 작성
• NODE_ENV는 Docker Image 생성 시 production 모드로 바뀐다.

.env 파일

BACKEND_BASE_URL = BackEnd IP or Domain
BACKEND_BASE_PORT = BackEnd Port

nuxt.config.ts 파일

publicRuntimeConfig:{
	nodeEnv: process.env.NODE_ENV, // nodejs 환경
	backendUrl: process.env.BACKEND_BASE_URL, // backend url
	backendPort: process.env.BACKEND_BASE_PORT, // backend port
}

Nuxt 내부 사용

• .env로 바꾼 후에는 하드코딩을 사용하지 않는다.
• development 환경은 config 변수들을 사용하면되지만 production 모드는 SPA이기 때문에 따로 reverse proxy를 사용해야한다.

const config = useRuntimeConfig();

console.log(config.nodeEnv);
console.log(config.backendUrl);
console.log(config.backendPort);