Published on: 2023-01-10
HagaSpa Logs = .md + Astro + Cloudflare Pages + Cloudflare Register
年も新しくなったこともあり、個人ブログを作ってみた。 せっかくなので、このブログを作るために利用した技術と理由を書いていく。
markdownで書きたいし、余計な機能もいらないからAstroで良さそう。結局ページ遷移できればいいので。CMSもいらん。
— HagaSpa (@haga_spa) January 8, 2023
軽く調べたところ最近はJamStackというアーキテクチャにするのがトレンドらしい。
ビルド時にJavaScriptやAPIを用いてデータの取得を行い、そのデータを使って静的なhtmlを出力する。
htmlをCDNにデプロイしてCDNだけでコンテンツの配信をする形態のことだ。 サーバを用意しないためユーザからのアクセスは全てCDNに行く。よってキャッシュ戦略を考慮する必要はない。
しかしユーザ操作による動的な処理、例えば検索やECサイトの注文などはhtmlだけでは実現できない。
そこはWebブラウザが外部APIを叩いて処理を委譲する。 APIを作ってもいいが最近はサービスベンダが外部APIを提供している。これらを使って構成すればバックエンドやDBに対する面倒事1とはおさらばできる。 逆に言うと外部サービスの利用を増やせば増やすほど、外部サービスのメンテや障害でサービス停止を考慮する必要がある。
また似たような構成としてSPAがあるが、こちらは原則として空のbodyだけをWebブラウザへ渡して、コンテンツの描画はjsが頑張る。 そのため事前にコンテンツ含めたhtmlを渡すJamstackの方が、コンテンツの表示速度が速い。 またページのレンダリング時にコンテンツが存在するため、SEO対策としても有効である。
Jamstack構成でよく出てくるワードがCMSだ。Contents Management System.
Webサイトを作る上でコンテンツや画像などを管理できるシステムだ。 最近ではヘッドレスCMSといってCMSの機能をAPIで提供している。2
これらを上記のJamstack構成のビルド時に利用しようと言うわけだ。
個人的にはgithubでmdファイルを用いてコンテンツ管理をしたいので、今回は採用しなかった。
フレームワークとしてはAstroを採用することにした。 静的ファイルを出力をしてくれるのと、ファイルのパスルーティングなどもしてくれる軽量なフレームワーク。何よりチュートリアル が非常にわかりやすく、ある程度のblogはすぐに作れてしまう。 このブログもほとんどチュートリアル通りに作成したもの。
業務では基本的にNext.jsを使ってるが、個人的には薄くて軽量なフレームワークの方が好きだ。
ホスティング環境はCloudflare Pages を採用した。
当初は業務でも使っていて、割と好みなVercelを採用しようと思っていた。 ただpricingや無料でも広告を載せることが可能と言ったこともあり、Cloudflare Pagesにした。
Githubへ連携すればPR毎にpreview環境を自動で作ってくれるため、手触りはVercelと遜色ない。
これはどこでもよかったが、Cloudflare Pagesを使ったので同じくCloudflareに統一したというだけ。
特に良いも悪いもない。
当たり前すぎてあれかもだが、ブログを作るだけならもうバックエンドは全く必要ないらしい。 自分は今までブログの開発はしたことがなく、もっぱらQiitaなどの既存サービスを使って書いていた。
そのためブログ開発に対する知見を得られたのはよかった。
Jamstackについては思想も含めてかなり好きだ。 何より静的ファイルだけを配信することで、ページの表示が爆速になるのが気持ちいい。
これがWebページではなく、ある程度リッチなWebサービスだとこうはいかない気もするが。。。
実装自体のカロリーは大分低いので、興味がある方は三連休とかでやってみてもらいたい。
このブログもドメイン取得を含めて大体2日くらいで完了している。
1. サービスのスケールアウトやdbインスタンスのスケールアップ。それに伴うダウンタイムの発生など。
2. microCMSとかContentfulとか