このブログの技術スタックとざっくりしたシステム構成
今回はこのブログが何で動いているのか、ざっくり紹介してみます。
全体構成
このブログは大きく分けると、記事を表示する静的サイトと、コメントを処理するAPIの2つでできています。
ブラウザ
├─ 記事・画像を見る ── 静的サイト
└─ コメントを送る ─── コメントAPI ── データベース
記事を読むだけなら静的サイト側で完結します。コメントを表示したり投稿したりするときだけ、ブラウザから別のAPIへ通信する仕組みです。
構成としてはとてもシンプル。ドメイン以外はすべて無料で運用できています。
ブログ本体はHugo
ブログ本体にはHugoという静的サイトジェネレーターを使っています。
記事はMarkdownで書き、HugoがHTMLへ変換します。トップページ、カテゴリー、タグ、RSS、サイトマップなどもビルド時にまとめて生成されます。
WordPressのようにアクセスされるたびデータベースから記事を取り出してページを作るのではなく、完成済みのHTMLを配信する方式です。WordPressとかだとホスティングサービス使わないといけなかったりセキュリティの管理とかもめんどくさいので、それなりにコード書けるよってひとにはお勧めだと思います。ほかにもいろいろと選択肢はありますが、似たようなものの中では一番将来性というか今後使いづけられる可能性が一番高いと思います。
テーマは既製品をそのまま使わず、HTMLのテンプレートとCSSを自作しています(自作というかCodex君が頑張って作ってくれた)。ライト・ダークモードやスマートフォン表示にも一応対応しています。一応です。。
ちなみに世界中の開発者が作ったテンプレートから作ったりすることもできます。Hugo テンプレート一覧
ブラウザ側はTypeScript
画面上で動く機能にはTypeScriptを使っています。ビルド時にJavascriptに変換されます。
主な役割はダークモードの切り替え、サイト内検索、コメント欄の操作などです。ブログ本体だけなら大がかりなフロントエンド環境は必要ありません。動的に管理する箇所はたかが知れています。
サイト内検索も検索サーバーへ問い合わせる方式ではなく、ビルド時に作った検索用データをブラウザで読み込んで検索しています。今ぐらいの記事数ならこれで十分です。記事が何万件にも増えたら考え直しますが、そこまで書ける気がしないので当分は大丈夫でしょう。
配信はCloudflare Pages
Hugoが生成したサイトはCloudflare Pagesから配信しています。
静的ファイルの配信を任せられるので、自分でWebサーバーを管理する必要がありません。記事やデザインを更新したら、Hugoで再生成した内容を反映するだけです。 httpsの証明書管理などこまかい管理などもCloudflareにお任せです。
コメント欄だけ別構成
静的サイトはそのままだと、投稿されたコメントを保存できません。そこでコメント欄だけはCloudflare Workers上のAPIとして分離しています。
APIはTypeScriptとHonoで作り、コメントの保存先にはCloudflare D1を使っています。ざっくり言うと、コメント投稿時だけ小さなプログラムが動き、内容を確認してからデータベースへ保存する形です。
まぁコメント機能はつけようかどうしようか迷ったのですが、なんか作りたかったので作りました。あんまりセキュリティホールになるようなものを実装したくはないのですがなんというかあったほうがいいよね？(笑)
Githubと連携して動くやつ(Giscus)等もあるのですが、訪問者にGithubログインやアカウント作成を強制するのはビミョーというか自分のポリシーに反するので候補から外しました。 参考サイト：Hugoにコメント機能をつける
セキュリティについて
公開サイトなので、コメント欄には迷惑投稿や機械的な大量アクセスへの対策など最低限の対策は入れてあります。
この記事では構成を紹介することが目的なので、APIの細かい仕様、制限の数値、管理方法、個別の防御ルールなどは省略します。見えないから安全という話ではありませんが、攻撃するための手掛かりをわざわざ増やす必要もないので。。
GitHubとCI/CD
サイトのソースコードと記事はGitHubで管理し、更新時のチェックと公開はCI/CDで自動化しています。
GitHubへ変更を反映すると、HugoのビルドやコメントAPIの型チェックなどが実行され、問題がなければCloudflare側へ公開されます。
普段の更新の流れ
記事の更新はだいたい次のような流れです。
- Markdownで記事を書く
- 手元で表示を確認する
- GitHubへ変更を反映する
- CI/CDがチェック、ビルド、公開を行う
まとめ
使っている主な技術をまとめると以下の通りです。
| 役割 | 使用しているもの |
|---|---|
| 記事の作成・サイト生成 | Markdown / Hugo |
| デザイン | HTMLテンプレート / CSS |
| ブラウザ側の機能 | TypeScript |
| 静的サイトの配信 | Cloudflare Pages |
| コメントAPI | Cloudflare Workers / Hono |
| コメントの保存 | Cloudflare D1 |
| 迷惑投稿対策 | Cloudflare Turnstileなど |
| ソースコード管理・CI/CD | GitHub |
なるべく管理するサーバーを減らしつつ、必要なところだけ動的にする構成です。個人ブログとしては少し作り込みすぎた気もしますが、自分で仕組みを考えるのもブログを作る楽しみのひとつということで。。
コメント