Vite 설정 가이드

server.middlewareMode : true

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

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]`;
},

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

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

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,
},