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