Astro 5.0 + Strapi v5 + AWS Lightsail で構築する、JAMstackのブログシステム

個人ブログをリニューアルするにあたり、パフォーマンス、コスト、そして開発体験のすべてを妥協しない「最強の構成」を目指してシステムを構築しました。本記事では、このブログがどのような技術スタックで動いているのか、そのアーキテクチャの全貌を解説します。

🚀 技術スタックの概要

今回のシステムは、「フロントエンドは爆速な静的サイト」「バックエンドは柔軟なHeadless CMS」「インフラはコスパ最強」 の3点をテーマに選定しました。

Frontend: Astro 5.0
- 現在最速クラスの静的サイトジェネレーター (SSG)。
- 必要な部分だけ React を使う "Islands Architecture" が魅力。
Backend (Headless CMS): Strapi v5
- APIベースでコンテンツを管理できる Headless CMS のデファクトスタンダード。
- 今回は Docker コンテナ化して運用。
Infrastructure: AWS Lightsail + Cloudflare
- VPS (Ubuntu) + Docker で Strapi をホスト。
- 静的ファイルは Cloudflare Pages で配信。
- 画像は Cloudflare R2 (S3互換) に逃がしてコスト削減。

🏗️ アーキテクチャ図

全体の構成は以下のようになっています。

💡 こだわりポイント

1. Astro による圧倒的なパフォーマンス

フロントエンドには Astro を採用しました。 Astro はビルド時に HTML を完全に生成するため、ランタイムの JavaScript を極限まで減らすことができます。また、React や Tailwind CSS との親和性も高く、モダンな開発体験を維持しながら爆速サイトを作ることができます。

2. AWS Lightsail + Docker による高コスパ運用

Headless CMS のホスティングには、AWS の VPSサービスである Lightsail を使用しています。月額数ドル〜という低価格ながら、固定IPが使えて自由度が高いのが特徴です。サーバー内は Docker Compose で管理しており、Strapi (CMS) と PostgreSQL (DB) をコードベースで定義しているため、環境の再現や移行も簡単です。

3. Cloudflare R2 による画像配信

ブログで容量を食う「画像データ」は、サーバー内には保存せず、オブジェクトストレージである Cloudflare R2 に保存しています。 AWS S3 と互換性がありながら、帯域幅料金（Outbound Transfer）が無料 という驚異的なサービスです。これにより、アクセスが増えてもサーバーのディスク容量や転送量を気にする必要がありません。

4. Zero Trust による鉄壁のセキュリティ

CMS の管理画面 (/admin) はインターネットに公開されていますが、セキュリティが心配です。そこで Cloudflare Zero Trust を導入しました。管理画面にアクセスしようとすると、Cloudflare の認証画面が挟まり、許可されたメールアドレスに届くワンタイムパスワードを入力しないとアクセスできない仕組みになっています。これにより、VPNなどを構築することなく、VPN並みのセキュリティをブラウザだけで実現しています。

5. 完全自動化された CI/CD パイプライン

日々の更新作業に手間はかけたくありません。

ローカルでコードを書く → GitHub に Push → Cloudflare Pages が自動ビルド＆デプロイ
Strapi で記事を書く → Publish ボタンを押す → Webhook が飛び、自動ビルド＆デプロイ

この2つの自動化により、インフラを意識することなく、「記事を書くこと」や「デザイン調整」に集中できる環境が整いました。

🛠️ まとめ

「WordPress もいいけれど、もう少しモダンで自由な構成でブログを作りたい」「Next.js もいいけれど、もっとシンプルに静的サイトを作りたい」

そんな思いから辿り着いたのが、この Astro + Strapi + Cloudflare という構成です。初期構築には多少の知識が必要ですが、一度作ってしまえば、爆速・安価・セキュアな最高のブログ環境が手に入ります。