o-mitz サイトのシステムアーキテクチャについて

この記事の要約 (Key Takeaways)

本システムは、ヘッドレスCMSである Contentful、ソースコード管理の GitHub、そしてビルド・ホスティング基盤である Netlify を連携させた Jamstack (SSG: 静的サイト生成) アーキテクチャを採用しています。本記事では、このブログを裏側で支える構成と自動化の仕組みをご紹介します。全体システム構成以下のコードは、当サイトの全体的な連携フローをまとめ...

本システムは、ヘッドレスCMSである Contentful、ソースコード管理の GitHub、そしてビルド・ホスティング基盤である Netlify を連携させた Jamstack (SSG: 静的サイト生成) アーキテクチャを採用しています。本記事では、このブログを裏側で支える構成と自動化の仕組みをご紹介します。

全体システム構成

以下のコードは、当サイトの全体的な連携フローをまとめた Mermaid 構成図です。管理者の執筆から、開発者のコード反映までがシームレスに繋がっています。

デプロイ & 配信フロー

当サイトでは、記事の更新やソースコードの修正が行われると、自動的にビルドが走りユーザーに配信される仕組みになっています。

記事更新時の自動ビルド

執筆者が Contentful 上でお知らせ（News）または技術ブログ（TechBlog）を公開・更新します。
Contentful の Webhook が Netlify の Build Hook エンドポイントをトリガーします。
Netlify 上で
```
gatsby build
```
が実行され、Contentful GraphQL API から最新データをフェッチして静的ページを再生成します。
生成されたファイルが Netlify Edge CDN にデプロイされ、全世界のエッジノードに即時反映されます。

ソースコード変更時のデプロイ

開発者が GitHub の
```
main
```
ブランチにプッシュまたは PR をマージします。
Netlify が自動検知し、依存関係のキャッシュを活用しながら
```
gatsby build
```
を実行します。
ビルド成功後、アトミックデプロイによりダウンタイムゼロで最新バージョンが公開されます。

環境変数と秘匿情報の管理

ビルドおよび開発に必要な環境変数は、ローカル環境では .env.development や .env.production を使用し、Netlify 上では環境変数ダッシュボードにて安全に管理されています。

環境変数名	用途	参照元
CONTENTFUL_SPACE_ID	Contentful スペースの識別子	Contentful 管理画面
CONTENTFUL_ACCESS_TOKEN	Contentful CD API アクセストークン	Contentful API keys
GTM-KMNV65KD	Google Tag Manager コンテナID	gatsby-config.js

以上が o-mitz サイトを支えるアーキテクチャの全容です。静的サイト生成とCDN配信の組み合わせにより、高速でセキュアなブログ体験を提供しています。