技術ブログを自作するときに考えたアーキテクチャの話
技術ブログを作るなら、既存のブログサービスを使うのが一番楽です。 それでも今回は、ブログを自作するという選択をしました。
この記事では、今回作ったブログについて、
全体をどう分け、どう組み立てたか
その構造を実現するために採用した技術構成
なぜその選択をしたのか
をまとめています。
「この構成が正解」という話ではなく、 自分で考えて形にした、その過程と判断の記録です。
先に言葉の整理：アーキテクチャとは何か
この記事で言うアーキテクチャは、
全体の構造と、それをそう設計した理由・判断の結果
を指しています。
構造だけであれば、単なる構成や配置の話になりますし、 思想だけでは、どうしても抽象的になりがちです。
どんな役割に分けたのか
なぜその分け方にしたのか
この「構造」と「設計判断」をセットにしたものを、 ここではアーキテクチャと呼んでいます。
全体のアーキテクチャ概要
今回はまず、 個人ブログは静的サイトとして作れるんじゃないか、 というところから考えました。
常時サーバーを動かす構成は、 コストや運用の手間を考えると、個人開発ではできるだけ避けたい。 ブログという性質を考えても、静的サイトで十分成立すると判断しました。
そうなると、次に整理する必要があったのは、
記事の中身をどう管理するか
その内容をもとに、どうやって画面を生成するか
生成された静的ファイルを、どう配信するか
という点です。
この流れで考えると、
コンテンツを管理する仕組み
表示を担当するフロントエンド
生成された静的ファイルを配信する仕組み
という役割分担になります。
個人ブログとして必要な要素を一つずつ分解していった結果、 この構造が一番自然だと感じました。
コンテンツ管理：Contentful
コンテンツ管理には Contentful を使っています。
ブログ記事の管理方法としては、 Markdown をリポジトリで管理する、という選択肢も普通に考えられました。
それでも今回は、
Headless CMS をちゃんと使ってみたかった
実装と「書く」という作業を分けたかった
という理由から、CMS を使うことにしました。
microCMS など他の選択肢も検討しましたが、 調べた範囲では世界的に使われていそうだったのが Contentful だったため、 今回はそちらを選んでいます。
実際に使ってみて、
コンテンツ管理に必要な機能が最初から揃っていること
Headless CMS がどんな体験を提供してくれるのか
がよく分かり、 使ってみてよかったなと感じています。
フロントエンド：Next.js（SSG 前提）
フロントエンドには Next.js を使っています。
Next.js は今や、SSR / ISR / SSG など用途に応じて さまざまな使い方ができるフレームワークです。 その中で今回は、SSG（Static Site Generation）前提の 静的サイトとして使う方針にしました。
もともと Astro で静的サイトを作った経験があって、 「Next.js でも同じように静的サイトとして作れるなら、 それを試してみたい」という気持ちがありました。
実際にやってみると、Next.js は静的サイト用途でも扱いやすかったです。
ファイルベースルーティングでページ構成が組みやすい
ビルド結果の分割などがデフォルトでいい感じになる
余計なことを考えなくても、配信しやすい形にまとまる
Next.js をフルスタック的に使うのではなく、 静的サイトとして使うという使い道を意図して選べたのが、 今回の自分にはちょうどよかったと思っています。
配信：S3 + CloudFront
配信には、S3 をオリジンにして CloudFront から配信する構成を採用しました。
AWS で静的サイトを配信しようとすると、 調べた限りではこの構成が一番よく出てきます。
構成がシンプル
何が起きているか分かりやすい
結果的にスケールする
といった点から、この形を選びました。
Cloudflare Pages などにも興味はありますが、 まずは AWS での静的ホスティングの 王道と言われている構成を一度きちんとやってみたかった、 というのが正直なところです。
これからやりたいこと
今後は、このブログを使い続けながら、少しずつ改善していきたいと思っています。
記事を更新したときのビルドやデプロイをもう少し楽にする
アクセス解析などを入れて、どう読まれているかを見てみる
デザインや UI / UX を少しずつ良くしていく
まずは最低限の形を作って公開できたので、 ここからは「使いながら育てていく」フェーズかなと思っています。
おわりに
今回のブログでは、
全体のアーキテクチャを考え
技術構成を選び
実際に動く形として公開する
ところまでを、一通り自分でやりました。
技術的に特別なことをしているわけではありませんが、 設計から実装、公開までを通してやってみたことで、 得られた学びはかなり大きかったです。
このブログは、これからも手を入れながら使い続けていくつもりなので、 その過程で考えたことや改善も、また書いていけたらと思っています。