Nuxt3 에서 "sitemap.xml" 과 "robots.txt" 설정하기

안녕하세요 Lovefield입니다.

sitemap과 robots은 사이트를 만든다면 거의 필수적으로 제작한다고 봐야합니다. 아무래도 온라인 세계에서는 고객들이 검색을 통해 유입되기 때문입니다. Nuxt3에서 robots를 만드는 방법은 간단합니다. 단순하게 "public" 폴더에 "robots.txt" 파일을 만들어서 넣어두기만 하면 됩니다. 하지만 저희는 그렇게 쓰지 않습니다. 사이트를 개발할 때는 항상 사용 환경(서버 환경)에 따른 모드가 존재합니다. 크게 "prod" , "stage" , "dev" 로 나뉘어 사용하게 됩니다. "prod"에서 robots 정보는 봇들이 잘 가져갈 수 있도록 설정하고, "stage"의 경우는 봇들이 사이트 정보를 가져가지 못하도록 설정해야 합니다. 이렇듯 단순히 파일 하나로 설정할 수 있는 값이 아닙니다. 이번 글에서는 Nuxt3에서 "sitemap.xml" 과 "robots.txt"를 설정하는 법을 서술하겠습니다.

설정하기 위해 알아야 하는 기술은 Server Routes입니다. Nuxt3에서는 server 폴더에 다양한 기능을 제공하고 있습니다. 그중 Server Routes 기능을 사용할 것입니다. ~/server/routes/hello.ts와 같은 파일을 만든다면 사이트에서 "https://userdomain.com/hello"에 접근이 가능해집니다. 파일 내부는 다음과 같습니다.

export default defineEventHandler(()=> ‘Hello World!’);

1. robots.txt 설정하기

server/routes/robots.txt.ts 파일을 생성합니다.

export default defineEventHandler((event) => {
    const config = useRuntimeConfig();

    setResponseHeader(event, "content-type", "text/plain");

    if (config.public.mode === "prod") {
        return `User-agent: *\nAllow: /\nSitemap:${config.public.domain}/sitemap.xml`;
    } else {
        return "User-agent: *\nDisallow: /";
    }
});

먼저 setResponseHeader 함수를 사용해 페이지의 content-type을 지정합니다. robots.txt는 "text/plain" 타입을 사용합니다. 저는 runtimeConfig에 사이트의 모드 정보를 넣어두었습니다. 사이트가 "prod" 상태일 때만 "User-agent: *\nAllow: /\nSitemap: ${config.public.domain}/sitemap.xml" 정보를 노출하며 그 외의 경우에는 "User-agent: *\nDisallow: /"을 노출하도록 설정했습니다. 생각보다 쉽죠?

2. sitemap.xml 설정하기

server/routes/sitemap.xml.ts 파일을 생성합니다.

export default defineEventHandler((event) => {
    const config = useRuntimeConfig();
    let document:string = “”;

    setResponseHeader(event, "content-type", "application/xml");

    document += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">`;
    document += `...`;
    document += `</urlset>`;


    return document;
});

기본 골자는 robots.txt를 만드는 방법과 크게 다르지 않습니다. 하지만 sitemap에서는 동적 url들도 설정을 해야합니다. 그러려면 서버와 통신을 해야 하는데 아쉽게도 defineEventHandler 에서는 Nuxt3에서 제공하는 composable을 사용할 수 없습니다. useFetch 나 useAsyncData 를 사용할 수 없다는 말입니다. 여기서는 fetch 함수를 사용해야 합니다.

export default defineEventHandler(async (event) => {
    const config = useRuntimeConfig();
    const data = await fetch(“url”).then((res)=>res.json()); // Request API
    let document:string = “”;

    setResponseHeader(event, "content-type", "application/xml");

    document += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">`;
    document += `...`;
    document += `</urlset>`;


    return document;
});

이제 https://www.sitemaps.org/protocol.html 에서 sitemap 포맷을 참조해 작성해 줍니다.

보너스. healthcheck 만들기

server/routes/healthcheck.ts파일을 생성합니다.

export default defineEventHandler(() => "OK");