로컬 호스트 프론트와 백 서버 동시 실행 설정

**Concurrently를 통한 동시 실행
// package.json
{
  "scripts": {
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "server": "node server.cjs",
    "client": "vite"
  }
}

concurrently: 여러 명령어를 동시에 실행하게 해주는 도구
npm run dev 하나로 서버와 클라이언트를 동시에 실행

 

**실행 프로세스
npm run dev
  ├─> npm run server (3001 포트)
  └─> npm run client (5173 포트)

**서버 (server.cjs)
const express = require('express');
const app = express();

app.listen(3001, () => {
  console.log('서버가 3001 포트에서 실행중입니다');
});

**클라이언트 (Vite)
// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173
  }
})

**전체 작동 흐름
[실행] npm run dev
  │
  ├─[서버] localhost:3001
  │   └─> API 요청 처리
  │
  └─[클라이언트] localhost:5173
      └─> React 애플리케이션 제공
통신 구조
[브라우저] → localhost:5173 (React 앱)
    ↓
[API 요청] → localhost:3001 (Express 서버)
    ↓
[데이터베이스]

이것이 가능한 이유:

• concurrently가 두 프로세스를 병렬로 실행
• 각각 다른 포트를 사용하여 충돌 방지
• Vite의 host: true로 외부 접근 허용
• 서버와 클라이언트가 독립적으로 작동

장점:

• 개발 환경에서 한 번에 모든 것을 실행
• 서버와 클라이언트 코드 동시 수정 가능
• 실시간 변경 사항 확인 가능
• Docker에서도 동일하게 작동

---

**기본 Vite 설정 (이전)
export default defineConfig({
  plugins: [react()]
})

• 기본적으로 localhost에서만 접근 가능
• 외부 접속 차단
• 개발 서버는 localhost에서만 실행

**새로운 서버 설정의 각 옵션 설명
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,     // ⭐ 핵심 설정
    port: 5173,     
    watch: {
      usePolling: true
    }
  }
})

각 설정의 역할:

• host: true
  • 외부 IP에서의 접근을 허용
  • 네트워크의 다른 기기에서도 접속 가능
  • Docker 컨테이너 외부에서도 접속 가능
  • localhost 제한을 해제
• port: 5173
  
  • Vite 개발 서버의 포트 지정
  • 명시적으로 포트 설정
  • Docker와 로컬 환경에서 동일한 포트 사용
• watch.usePolling: true
  • Docker에서 파일 변경 감지를 위한 설정
  • 로컬 환경에서는 큰 영향 없음

각 설정의 역할:

host: true

외부 IP에서의 접근을 허용
네트워크의 다른 기기에서도 접속 가능
Docker 컨테이너 외부에서도 접속 가능
localhost 제한을 해제
port: 5173

Vite 개발 서버의 포트 지정
명시적으로 포트 설정
Docker와 로컬 환경에서 동일한 포트 사용
watch.usePolling: true

Docker에서 파일 변경 감지를 위한 설정
로컬 환경에서는 큰 영향 없음