Reactjs에서 정적 사이트맵(static sitemap)을 생성하는 방법

어느날 Reactjs 프로젝트에서 정적 사이트맵(static sitemap)을 만들어야 했습니다. 사이트맵을 만드는 과정을 간단히 정리하였습니다.

React에서 static file

react에서 static file을 제공하려면 project folder의 /public에 파일을 넣어주면 됩니다. 저는 sitemap.xml과 robots.txt파일을 만들었고, 실행하면 mydomain.com/sitemap.xml처럼 접근할 수 있습니다.

react-app$ tree -L 1
.
├── node_modules
├── package.json
├── public
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   └── sitemap.xml
├── README.md
└── src

정적 사이트맵(static sitemap) 생성

동적(dynamic)으로 sitemap을 생성하려면 서버에서 내 domain을 parsing을 하여 sitemap.xml에 write를 해야 할 것 같습니다. 저의 경우 동적으로 sitemap을 생성할 필요가 없어서 간단히 정적 sitemap을 생성하였습니다.

이제 어떻게 sitemap을 만드냐 인데, 모든 url에 대해서 하드코딩으로 sitemap.xml을 만든다는 것은 말이 안되죠. BotMap은 어떤 사이트를 파싱하여 sitemap을 자동으로 생성해줍니다. 그럼 저희가 할 일은 이 사이트에서 생성해준 sitemap을 react의 /public에 넣어주고 deploy하는 것이 전부입니다.

주의하실 점은 BotMap에서 sitemap 생성기를 이용할 때 아래와 같은 스크립트를 index.html의 body 또는 header에 넣어야 합니다. (스크립트는 사이트 본문에 나와있습니다.)

<!-- Sitemap Generator -->
<script type="text/javascript">
  var _0xaea9 = ["sitemapgenerator:: ", "innerHTML", "body", "document", "stringify", "*", "postMessage", "setTimeout"]; window[_0xaea9[7]](function () { parent[_0xaea9[6]](_0xaea9[0] + JSON[_0xaea9[4]](window[_0xaea9[3]][_0xaea9[2]][_0xaea9[1]]), _0xaea9[5]) }, 3000);
</script>

스크립트를 넣었다면, BotMap에서 URL과 robots.txt를 입력하고 GO를 누르면 파싱 후 자동 생성된 sitemap 파일을 다운받을 수 있습니다.

참고

• BotMap