はじめに
「このブログって、どんな技術でできているの？」
......と、聞かれたことはまだ無いですが、このブログはいわゆる「モダンな技術」を使って構築されています。せっかくのモダンな技術、聞かれたことはありませんが...どのように使っているのか、ナゼその技術を選んだのかついてお話ししたい！
そこで今回は、CMS Hiveというブログサイトがどのような技術で構築されているのか、その裏側をご紹介したいと思います！
技術スタックの概要
さっそくですが、このブログでは主に以下の技術スタックを使用しています。
- microCMS
- Astro
- Cloudflare Pages
これらはCMS、開発環境/フレームワーク、デプロイ環境と...それぞれ別の領域の技術なのですが、まずはこれらについて簡単にご紹介します！
microCMS は、ヘッドレスなCMSです。詳しい説明は、こちらのmicroCMS紹介記事をご確認いただければと思いますが、 簡単に説明すると、従来のCMSは「コンテンツを管理するためのシステム」と「コンテンツを表示するためのシステム」が一体化しているのに対し、ヘッドレスCMSはそれらを分離しているのが特徴で、その分柔軟にWebサイトを構築できるのが魅力のCMSです。
Astro は、静的サイトジェネレーターの一種で、特に「HTMLベース」で軽量なサイトを生成することが得意なフレームワークです。JavaScriptの実行量を最小限に抑える構造を持っており、ページの初回表示速度が非常に速くなるのが特長です。また、（本ブログでは使用していませんが）React・Vueといった凝ったWebサイト構築に適したフレームワークとも柔軟に共存さることもできるため、チームやプロジェクトごとに異なる技術選定にも対応しやすい点も魅力です。
Cloudflare Pages は、静的サイトをホスティングするためのサービスです。CloudflareはCDN（コンテンツ配信ネットワーク）としても知られていますが、その中でもCloudflare Pagesという静的ホスティングサービスを使用することで「静的なコンテンツ」をより高速で配信することができます。また、無料で利用できるプランも用意されており、個人や小規模なプロジェクトにとっても導入しやすい点が魅力です。コストを抑えつつ、十分なパフォーマンスと安定性を得ることができるため、開発・運用のハードルが下がる点が魅力となっています。
これらの技術を組み合わせCMS Hiveはモダンでパフォーマンスの高いブログとなっています。ちなみに色々な名前が出てきましたが、これらは下記の流れで使われています。
- Web担当者がmicroCMSの管理画面で記事を作成します。
- microCMSのサーバーからWebhookを通してCloudFlareへ通知されGitHubのコードを元にHTMLファイルを生成します。
- Cloudflare Pagesが生成されたHTMLファイルをCDNを通じて配信します。
このような流れで、記事の作成から公開までがスムーズに完結する仕組みが整えられています。
なぜこの技術スタックを選んだの？
この「CMS Hive」というサイトは、CMSについての情報を発信するサイトです。また私たちの技術力をアピールするための「ショーケース」的な存在でもあります。 そこで特に意識したのが「パフォーマンス」を高めることでした。と、同時に...身も蓋もない話ですが...このブログは直接的に利益を生むものではないので、会社として運営していくにあたりなるべく運用コストを抑える必要がありました。
以上を踏まえて検討した結果、採用したのが先程ご紹介した技術スタックだったのですが、簡単に他の選択肢との比較をしてみたいと思います。
CMS
ブログサイトのCMSといえば、WordPressが第１候補に挙がると思います。実際、WordPressは無料で使用することができ、カスタマイズも比較的容易なので有力な候補になります。しかし、WordPressは長期で利用することを考えると、CMS自体だけでなくサーバーの管理や各種アップデート対応などの負担が継続して発生することになります。
さきほど簡単に説明した通り、ヘッドレスCMSであるmicroCMSは、サイトと完全に分離された設計により、管理画面やデータベースへの直接アクセスが不要になり、セキュリティリスクを大幅に抑えることができます。さらに、SaaS型サービスとして提供されているため、サーバーの管理やOS、ミドルウェアのアップデート、セキュリティパッチの適用といった保守作業も不要です。これにより、日々のメンテナンス負荷を大きく軽減しながら、安全かつ安定した運用が可能となり、運用コストを抑えるというこのプロジェクトの要件にもマッチしていると考えて採用となりました！
開発環境
本サイトではAstroを採用しましたが、同じような領域の技術には、ReactやVue.jsなどがあります。これらもモダンで良いフレームワークですが、ReactやVue.jsはより動きのあるインタラクティブなコンテンツに採用するのに適していて本サイトでは多機能すぎました...。また、静的サイトジェネレータという観点ではGatsbyなどが候補にあがりますが、Astroの方がよりシンプルで学習コストが小さく、最終的なファイルのコードに余計なものが少ないため、SEO対策やパフォーマンスの観点からも優れていると考えて採用しました！
デプロイ環境
他の選択肢としてレンタルサーバーやVPSなどがあがりますが、これらは基本的に自分でサーバーの構築やメンテナンスを行う必要があり、セキュリティ対策やリソース管理などの負担が避けられません。例えばOSやWebサーバーの定期的なアップデート、脆弱性対応といった作業が必須となり、安定した運用には人的リソースが求められるため、運用コストの面でも無視できない懸念点となります。
また、本サイトではCMSを使用していますが、ユーザーのサクセス時に動的にページを作るのではなく、全ページを事前に静的ファイルとして出力しているため、静的ホスティングと非常に相性が良く、Cloudflare Pagesのような高速な静的ホスティングサービスを活用することで、ページの表示速度を大幅に向上させることができます。本サイトでは動的な処理をサーバー側で行う必要がないため、セキュリティ面やスケーラビリティの面でも安心して運用することが出来ると考え採用しました！
まとめ
CMS Hive では「ショーケース」でありつつ「現実的に運用しやすい」構成を目指し、各技術を選定しました。microCMSによる柔軟なコンテンツ管理、Astroによる軽量で拡張性の高い静的サイト生成、Cloudflare Pagesによる高速配信とスケーラビリティの確保。これらを組み合わせることで、モダンなブログを構築することができたと思います。
今後も技術スタックは進化していきますが、その時々の目的に応じて最適な選択をしていければと思います！
