개발자
류준열

sitemap 동적생성

한국어 받아쓰기는 url path에 videoId가 들어간다. 즉, DB에 있는 컨텐츠에 비례해서 페이지가 생성되는 구조이다.

컨텐츠가 추가될때마다 sitemap을 수정하는 것은 너무 귀찮기 때문에 build시에 모든 videoId를 불러오는 js를 실행시켜서 배포할때마다 sitemap이 업데이트 되게 하였다.

import { writeFileSync } from "fs";

const API_URL = "https://korean-dictation-server.onrender.com/classrooms";
const BASE_URL = "https://korean-dictation.wnsdufdl.com";

async function generate() {
  const today = new Date().toISOString();

  const res = await fetch(API_URL);
  if (!res.ok) {
    throw new Error(`Failed to fetch classrooms: ${res.status}`);
  }
  const classrooms = await res.json();

  const videoIds = classrooms.map((c) => c.videoId);

  const urls = ["/", "/lessons", ...videoIds.map((id) => `/classroom/${id}`)];

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n${urls
    .map(
      (url) =>
        `  <url>\n    <loc>${BASE_URL}${url}</loc>\n    <lastmod>${today}</lastmod>\n  </url>`
    )
    .join("\n")}\n</urlset>`;

  writeFileSync("public/sitemap.xml", sitemap);
  console.log("Sitemap generated with", urls.length, "urls");
}

generate().catch((err) => {
  console.error(err);
  process.exit(1);
});

node에 이미 fetch가 포함되어 있어서 node-fetch를 설치할 필요가 없었다.

package.json에 다음과 같이 작성하여 빌드할떄마다 sitemap을 업데이트하도록 함.

{
  ...
  "script":{
	  ...
    "update-sitemap": "node update-sitemap.mjs",
    "build": "npm run update-sitemap && tsc -b && vite build",
		...
  },
	...
}

이렇게 하면 새 컨텐츠 추가 후 별도 작업 없이 구글에 노출시킬수 있다.