Vite 설정 가이드

브라우저 요청: /dashboard
↓
Vite 미들웨어:
1. /dashboard 실제 파일 확인 → 없음
2. index.html 반환
↓
브라우저:
1. index.html 로드
2. JavaScript 실행
3. 라우터가 /dashboard URL 확인
4. 해당 컴포넌트 렌더링

project/
├── src/
│   ├── components/
│   ├── assets/
│   └── App.vue
├── public/
├── package.json
└── vite.config.js

dist/
├── index.html      (최적화된 HTML)
└── assets/
    ├── js/        (번들링된 JavaScript)
    ├── css/       (최적화된 CSS)
    └── images/    (최적화된 이미지)

app-bundle-[hash].js (5MB)
- React (2MB)
- Redux (1MB)
- 비즈니스 로직 (2MB)

vendor-react-[hash1].js (2MB)
vendor-redux-[hash2].js (1MB)
business-logic-[hash3].js (2MB)

app-bundle-[hash].js (5MB)
- React (2MB)
- Redux (1MB)
- 비즈니스 로직 (2MB)

ETag : [hash]

vendor-react-[hash1].js (2MB)
vendor-redux-[hash2].js (1MB)
business-logic-[hash3].js (2MB)

# Nginx 설정 예시
location /assets/images/ {
    expires 10d;
    add_header Cache-Control "public, no-transform";
}

location /assets/fonts/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

브라우저(localhost:3000) → API 서버(api.example.com)
1. 브라우저가 요청을 보내기 전에 Same-Origin Policy 검사
2. 출처가 다르면 브라우저가 preflight 요청(OPTIONS)을 보냄
3. 서버의 CORS 헤더를 확인하고 허용된 경우에만 실제 요청 진행

브라우저(localhost:3000) → 프록시 서버(localhost:3000) → API 서버(api.example.com)
1. 브라우저는 같은 출처의 프록시 서버와 통신
2. 프록시 서버는 브라우저가 아닌 일반 HTTP 클라이언트로서 API 서버와 통신

브라우저가 http://localhost:3000/api/users로 요청
↓
Vite 개발 서버가 이 요청을 가로챔
↓
프록시 설정을 확인하고 '/api'로 시작하는 요청임을 인식
↓
요청을 env.SOCKET_URL + '/api/users'로 변환
↓
프록시 서버가 실제 API 서버로 요청을 전달
↓
changeOrigin: true로 인해 Host 헤더가 대상 서버에 맞게 변경됨
↓
API 서버는 마치 직접적인 요청처럼 받아들이고 처리
↓
API 서버가 응답을 프록시 서버로 전송
↓
프록시 서버가 응답 헤더를 수정 (cache-control 등)
↓
최종적으로 브라우저로 응답 전달

server.middlewareMode : true

app.use(express.static("public"));
app.use(express.static("uploads"));
app.use(express.static("files"));

manualChunks(id) {
  if (id.includes("node_modules")) {
    if (id.includes("@tanstack")) return "vendor-tanstack";
    if (id.includes("react")) return "vendor-react";
    if (id.includes("@socket")) return "vendor-socket";
    return "vendor";
  }

  if (id.includes("/features/")) {
    const feature = id.split("/features/")[1].split("/")[0];
    return `feature-${feature}`;
  }
}

assetFileNames: (assetInfo) => {
  const fileName = assetInfo.name || "unknown";
  const extType = fileName.split(".").pop()?.toLowerCase() || "";
 
  if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
    return `assets/images/[name]-[hash][extname]`;
  }

  if (/glb|hdr/i.test(extType)) {
    return `assets/models/[name]-[hash][extname]`;
  }

  if (/woff2?|ttf|eot|otf/i.test(extType)) {
    return `assets/fonts/[name]-[hash][extname]`;
  }

  return `assets/[name]-[hash][extname]`;
},

server: {
  port: 3000,
  proxy: {
    "/api": {
      target: env.SOCKET_URL,
      changeOrigin: true,
      secure: false,
      ws: true,
      configure: (proxy) => {
        proxy.on("proxyRes", (proxyRes) => {
          proxyRes.headers["cache-control"] = "public, max-age=31536000";
        });
      },
    },
  },
  middlewareMode: env.NODE_ENV === "development" ? false : true,
},