ブログ開設

動機

• アウトプットの場所を作るため
• 備忘録
• Next.js を使用してブログを作ってみたい

ゴール

以下のフローでブログの開設、開始。

Github にブログの Repository を Push → Github Actions を通して Deploy。

記事の入稿は microCMS で行う。

やったこと

• Github 周りの設定
• microCMS のアカウントを作成
• お名前.com でドメインの取得
• Cloudflare 関連の設定
• Vercel 関連の設定

Github 周りの設定

アウトプットや備忘録のためであれば、既存のブログサービスを作るほうが早かった。

ただ、Cloudflare の Pages を使用して Next でブログを動かしてみたいという動機もあったので自作で作ってみた。

※) いちから作成するのも勉強になるかなと思ったが、テンプレートを使ったほうが早いのでベースには以下のものを使用。

microcmsio/nextjs-simple-blog-template

CI/CD には Github Actions を使用。

microCMS のアカウントを作成

さくっと作成してみた。

お名前.com でドメインの取得

さくっと取得してみた。

Cloudflare 関連の設定

Vercel を使用せず、Cloudflare Pages でブログを作成したいと思い以下を試した。

• Cloudflare を DNS サーバーとして使用するように お名前.com の設定を変更
  • せっかくなので terraform も使用して管理したかったので、ちょろっと手を出したが開設を優先したかったので Pending
• cloudflare/next-on-pages を使用して deploy
  • トップは見れるが、記事詳細面を見ると InternalServerError が発生
    • Astro + microCMS + Cloudflare PagesだとSSRモードが使えなかった問題とその解決策
    • Cloudflare PagesにNext.jsをデプロイするとSSRが動作するようになったのでどうやって実現されたのかを調べた
  • そもそも next-on-pages よりも opennextjs/cloudflare を使用するほうが良さげなのでそちらを使用する
• opennextjs/cloudflare を使用して deploy
  • Cloudflare Workers の Size 制限にひっかかり deploy できず
    • https://developers.cloudflare.com/workers/platform/limits/#worker-size
    • open-next/server-functions/default/handler.mjs が大きすぎる
  • 知見:
    • App Router の場合、Cloudflare Workers が使用される
    • Pages Router の場合、Cloudflare Functions が使用される
    • Next を使用すると
• Pages Router に書き換えるのはしんどいので DNSサーバー としてだけ使用するように決める

Vercel 関連の設定

Cloudflare だけで完結しなかったのでおとなしく Vercel を使用。

所感

Next の SSG のみを使用してブログを作成することも考えたが、さくっと SSG 化するのも大変そうだったので SSR で作成することになった。

Remix を使用すればサイズも小さくなるので App Router + Cloudflare Workers で動かせるのかもしれない。

技術選定は難しい。文章を書くのも難しい。

(自分への備忘録ということで稚拙な文章をお許しください)