hanghae-plus · realstone2 · Aug 26, 2025 · Sep 1, 2025 · Sep 3, 2025 · Sep 3, 2025
diff --git a/packages/vanilla/index.html b/packages/vanilla/index.html
@@ -5,19 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com"></script>
     <!--app-head-->
-    <link rel="stylesheet" href="/src/styles.css">
+    <link rel="stylesheet" href="/src/styles.css" />
     <script>
       tailwind.config = {
         theme: {
           extend: {
             colors: {
-              primary: '#3b82f6',
-              secondary: '#6b7280'
-            }
-          }
-        }
-      }
+              primary: "#3b82f6",
+              secondary: "#6b7280",
+            },
+          },
+        },
+      };
     </script>
+
+    <!--ssr-data-->
   </head>
   <body class="bg-gray-50">
     <div id="root"><!--app-html--></div>

diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json
@@ -9,7 +9,7 @@
     "build:client": "rm -rf ./dist/vanilla && vite build --outDir ./dist/vanilla && cp ./dist/vanilla/index.html ./dist/vanilla/404.html",
     "build:client-for-ssg": "rm -rf ../../dist/vanilla && vite build --outDir ../../dist/vanilla",
     "build:server": "vite build --outDir ./dist/vanilla-ssr --ssr src/main-server.js",
-    "build:ssg": "pnpm run build:client-for-ssg && node static-site-generate.js",
+    "build:ssg": "pnpm run build:client-for-ssg && pnpm run build:server && node ./prerender.js",
     "build:without-ssg": "pnpm run build:client && pnpm run build:server",
     "build": "pnpm run build:client && pnpm run build:server && pnpm run build:ssg",
     "lint:fix": "eslint --fix ./src",

diff --git a/packages/vanilla/prerender.js b/packages/vanilla/prerender.js
@@ -0,0 +1,223 @@
+import { setupServer } from "msw/node";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { handlers } from "./src/mocks/handlers.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const ssgMswServer = setupServer(...handlers);
+
+async function prerender() {
+  console.log("🚀 Starting Static Site Generation...");
+
+  // MSW 서버 시작
+  console.log("🔧 MSW 서버 시작 중...");
+  try {
+    ssgMswServer.listen({
+      onUnhandledRequest: "bypass",
+    });
+    console.log("✅ MSW 서버 시작 완료");
+  } catch (error) {
+    console.error("❌ MSW 서버 시작 실패:", error);
+    process.exit(1);
+  }
+
+  try {
+    // 빌드된 파일들이 있는지 확인
+    const distPath = path.join(__dirname, "dist", "vanilla-ssr");
+    const mainServerPath = path.join(distPath, "main-server.js");
+
+    // 빌드된 파일들 확인
+    try {
+      await fs.access(mainServerPath);
+    } catch (error) {
+      console.error("❌ 빌드된 파일을 찾을 수 없습니다. 먼저 'npm run build'를 실행해주세요.", error);
+      process.exit(1);
+    }
+
+    // items.json 파일 읽기
+    const itemsPath = path.join(__dirname, "src", "mocks", "items.json");
+    const itemsData = await fs.readFile(itemsPath, "utf-8");
+    const items = JSON.parse(itemsData);
+
+    console.log(`📦 총 ${items.length}개의 상품을 발견했습니다.`);
+
+    // 템플릿 HTML 읽기
+    const templatePath = path.join(__dirname, "dist", "vanilla", "index.html");
+    const template = await fs.readFile(templatePath, "utf-8");
+
+    // 렌더링 함수 가져오기
+    const { render } = await import("./dist/vanilla-ssr/main-server.js");
+
+    // 출력 디렉토리 생성
+    const outputDir = path.join(__dirname, "dist", "vanilla-ssg");
+    await fs.mkdir(outputDir, { recursive: true });
+
+    // 홈페이지 생성
+    console.log("🏠 홈페이지 생성 중...");
+    const homeRendered = await render("/", {});
+    const homeHtml = template
+      .replace(`<!--app-head-->`, homeRendered.head ?? "")
+      .replace(`<!--app-html-->`, homeRendered.html ?? "")
+      .replace(
+        `<!--ssr-data-->`,
+        `<script>window.__INITIAL_MODEL__ = ${JSON.stringify(homeRendered.serverData)}</script>`,
+      );
+
+    await fs.writeFile(path.join(outputDir, "index.html"), homeHtml);
+    console.log("✅ 홈페이지 생성 완료");
+
+    // 각 상품 페이지 생성
+    console.log("🛍️ 상품 페이지들 생성 중...");
+    let completed = 0;
+    const total = items.length;
+
+    // 배치 처리를 위한 함수
+    const processInBatches = async (items, batchSize = 10) => {
+      for (let i = 0; i < items.length; i += batchSize) {
+        const batch = items.slice(i, i + batchSize);
+        const promises = batch.map(async (item) => {
+          const productId = item.productId;
+          const url = `/product/${productId}/`;
+
+          try {
+            const rendered = await render(url, {});
+            const html = template
+              .replace(`<!--app-head-->`, rendered.head ?? "")
+              .replace(`<!--app-html-->`, rendered.html ?? "")
+              .replace(
+                `<!--ssr-data-->`,
+                `<script>window.__INITIAL_MODEL__ = ${JSON.stringify(rendered.serverData)}</script>`,
+              );
+
+            // 상품 디렉토리 생성
+            const productDir = path.join(outputDir, "product", productId);
+            await fs.mkdir(productDir, { recursive: true });
+
+            // HTML 파일 저장
+            await fs.writeFile(path.join(productDir, "index.html"), html);
+
+            completed++;
+            if (completed % 50 === 0 || completed === total) {
+              console.log(`📄 진행률: ${completed}/${total} (${Math.round((completed / total) * 100)}%)`);
+            }
+          } catch (error) {
+            console.error(`❌ 상품 ${productId} 처리 중 오류:`, error.message);
+          }
+        });
+
+        await Promise.all(promises);
+      }
+    };
+
+    await processInBatches(items, 10);
+
+    // 404 페이지 생성
+    console.log("📄 404 페이지 생성 중...");
+    const notFoundRendered = await render("/not-found", {});
+    const notFoundHtml = template
+      .replace(`<!--app-head-->`, notFoundRendered.head ?? "")
+      .replace(`<!--app-html-->`, notFoundRendered.html ?? "")
+      .replace(
+        `<!--ssr-data-->`,
+        `<script>window.__INITIAL_MODEL__ = ${JSON.stringify(notFoundRendered.serverData)}</script>`,
+      );
+
+    await fs.writeFile(path.join(outputDir, "404.html"), notFoundHtml);
+    console.log("✅ 404 페이지 생성 완료");
+
+    // 정적 자산 복사
+    console.log("📁 정적 자산 복사 중...");
+    const staticAssetsDir = path.join(__dirname, "dist", "vanilla", "assets");
+    const outputAssetsDir = path.join(outputDir, "assets");
+
+    try {
+      await fs.access(staticAssetsDir);
+      await fs.cp(staticAssetsDir, outputAssetsDir, { recursive: true });
+      console.log("✅ 정적 자산 복사 완료");
+    } catch (error) {
+      console.log("⚠️ 정적 자산을 찾을 수 없습니다.", error);
+    }
+
+    // 아이콘 및 기타 파일들 복사
+    const publicFiles = [
+      "404.svg",
+      "back-icon.svg",
+      "cart-header-icon.svg",
+      "cart-icon.svg",
+      "chevron-right-icon.svg",
+      "close-icon-white.svg",
+      "close-icon.svg",
+      "empty-cart-icon.svg",
+      "error-icon.svg",
+      "error-large-icon.svg",
+      "info-icon.svg",
+      "loading-icon.svg",
+      "minus-icon.svg",
+      "plus-icon.svg",
+      "quantity-minus-icon.svg",
+      "quantity-plus-icon.svg",
+      "search-icon.svg",
+      "search-large-icon.svg",
+      "star-icon.svg",
+      "success-icon.svg",
+      "warning-icon.svg",
+      "mockServiceWorker.js",
+    ];
+
+    for (const file of publicFiles) {
+      try {
+        // mockServiceWorker.js는 public 폴더에서 복사
+        if (file === "mockServiceWorker.js") {
+          const sourcePath = path.join(__dirname, "public", file);
+          const targetPath = path.join(outputDir, file);
+          await fs.copyFile(sourcePath, targetPath);
+        } else {
+          const sourcePath = path.join(__dirname, "dist", "vanilla-ssg", file);
+          const targetPath = path.join(outputDir, file);
+          await fs.copyFile(sourcePath, targetPath);
+        }
+      } catch (error) {
+        console.warn("⚠️ 정적 자산 복사 중 오류:", error.message);
+      }
+    }
+
+    // SSG 결과물을 루트 dist 폴더로 복사
+    console.log("📁 SSG 결과물을 루트 dist 폴더로 복사 중...");
+    const rootDistDir = path.join(__dirname, "../../dist/vanilla");
+    await fs.rm(rootDistDir, { recursive: true, force: true });
+    await fs.cp(outputDir, rootDistDir, { recursive: true });
+    console.log("✅ 루트 dist 폴더로 복사 완료");
+
+    console.log(`🎉 Static Site Generation 완료!`);
+    console.log(`📊 총 ${completed + 2}개의 페이지가 생성되었습니다:`);
+    console.log(`   - 홈페이지: 1개`);
+    console.log(`   - 상품 페이지: ${completed}개`);
+    console.log(`   - 404 페이지: 1개`);
+    console.log(`📂 출력 디렉토리: ${outputDir}`);
+    console.log(`📂 배포용 디렉토리: ${rootDistDir}`);
+
+    // MSW 서버 정리
+    try {
+      ssgMswServer.close();
+      console.log("🔧 MSW 서버 정리 완료");
+    } catch (error) {
+      console.warn("⚠️ MSW 서버 정리 중 오류:", error.message);
+    }
+  } catch (error) {
+    console.error("❌ SSG 처리 중 오류 발생:", error);
+
+    // 오류 발생 시에도 MSW 서버 정리
+    try {
+      ssgMswServer.close();
+    } catch (cleanupError) {
+      console.warn("⚠️ MSW 서버 정리 중 오류:", cleanupError.message);
+    }
+
+    process.exit(1);
+  }
+}
+
+// 스크립트 실행
+prerender().catch(console.error);
diff --git a/packages/vanilla/server.js b/packages/vanilla/server.js
@@ -1,34 +1,79 @@
 import express from "express";
+import fs from "node:fs/promises";
+import { mswServer } from "./src/mocks/node.js";
 
-const prod = process.env.NODE_ENV === "production";
+const isProduction = process.env.NODE_ENV === "production";
 const port = process.env.PORT || 5173;
-const base = process.env.BASE || (prod ? "/front_6th_chapter4-1/vanilla/" : "/");
+const base = process.env.BASE || (isProduction ? "/front_6th_chapter4-1/vanilla/" : "/");
+
+const templateHtml = isProduction ? await fs.readFile("dist/vanilla/index.html", "utf-8") : "";
 
 const app = express();
 
-const render = () => {
-  return `<div>안녕하세요</div>`;
-};
-
-app.get("*all", (req, res) => {
-  res.send(
-    `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vanilla Javascript SSR</title>
-</head>
-<body>
-<div id="app">${render()}</div>
-</body>
-</html>
-  `.trim(),
-  );
+mswServer.listen({
+  onUnhandledRequest: "bypass",
+});
+
+// Add Vite or respective production middlewares
+/** @type {import('vite').ViteDevServer | undefined} */
+let vite;
+if (!isProduction) {
+  const { createServer } = await import("vite");
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import("compression")).default;
+  const sirv = (await import("sirv")).default;
+  app.use(compression());
+  app.use(base, sirv("./dist/vanilla", { extensions: [] }));
+}
+
+//모든 url을 핸들링하고 라우팅 작업을 진행함
+
+app.use("/src", express.static(`${base}src`));
+
+app.get("*all", async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, "");
+
+    /** @type {string} */
+    let template;
+    /** @type {import('./src/entry-server.js').render} */
+    let render;
+    if (!isProduction) {
+      // Always read fresh template in development
+      template = await fs.readFile("./index.html", "utf-8");
+      template = await vite.transformIndexHtml(url, template);
+      render = (await vite.ssrLoadModule("/src/main-server.js")).render;
+    } else {
+      template = templateHtml;
+      render = (await import("./dist/vanilla-ssr/main-server.js")).render;
+    }
+
+    const rendered = await render(url, req.query);
+
+    if (!rendered) {
+      return;
+    }
+
+    const html = template
+      .replace(`<!--app-head-->`, rendered.head ?? "")
+      .replace(`<!--app-html-->`, rendered.html ?? "")
+      .replace(`<!--ssr-data-->`, `<script>window.__INITIAL_MODEL__ = ${JSON.stringify(rendered.serverData)}</script>`);
+
+    res.status(200).set({ "Content-Type": "text/html" }).send(html);
+  } catch (e) {
+    vite?.ssrFixStacktrace(e);
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
 });
 
 // Start http server
 app.listen(port, () => {
-  console.log(`React Server started at http://localhost:${port}`);
+  console.log(`Vanilla Server started at http://localhost:${port}`);
 });