nato243 weblog.n-jitter brand iconweblog.n-jitter
テクノロジー

本Remixブログをデプロイしました!

2024.09.08
microCMSRemix
本Remixブログをデプロイしました! アイキャッチ

とりあえず、本ウェブサイトをデプロイするとこまでこぎつけました。

以前の記事で宣言した通り、AWS Lambdaと独自のDockerイメージでホスティングしています。

その上で、昔作ったけど使っていなかったサブドメインとCloudfront,ACMを見つけたので、AWS Lambdaの関数URLをオリジンとして動作させています。

とくに困ったとこがsitemap.xml作るとこでした。

app/routes/sitemap[.]xml.ts
// app/routes/sitemap[.]xml.ts

import type { LoaderFunction } from "@remix-run/node";
import { client } from "~/libs/client.server";
import type { BlogPost } from "~/routes/types";

export const loader: LoaderFunction = async () => {
  console.log(`sitemap.xml.ts`);

  const baseUrl = "https://weblog.n-jitter.com";

  const generateUrlList = async (): Promise<Array<XmlMap>> => {
    const staticPages = [
      { url: "/", priority: "1.0", changefreq: "daily" },
      { url: "/about", priority: "0.8", changefreq: "monthly" },
      { url: "/content", priority: "0.8", changefreq: "weekly" },
    ];

    const recentPosts = await client.getList({ endpoint: "blogs_api" });
    const contentList = recentPosts.contents as Array<BlogPost>;

    const postUrls: Array<XmlMap> = contentList.map((post) => ({
      url: `/content/${post.id}`,
      priority: "0.6",
      changefreq: "weekly",
      lastmod: post.publishedAt,
    }));

    return [...staticPages, ...postUrls];
  };

  const urls = await generateUrlList();

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

  return new Response(sitemap, {
    headers: {
      "Content-Type": "application/xml",
      "xml-version": "1.0",
      encoding: "UTF-8",
    },
  });
};

type XmlMap = {
  url: string;
  priority: string;
  changefreq: string;
  lastmod?: string;
};

これでHTMLでなくXML返すモードになってくれるらしい。

まあとりあえずは動いていそうですね。

この調子でどんどん記事を書きつつ、デザインやSEOなどを改善していく実験を行っていこうかと思います。