ヘッドレスCMS制作 ~ コスト削減の実現方法について
こんにちは、あとべです！
3児の父になろうとしてる事もあり、プライベートはバタバタです。。
今回は弊社のビジネスパートナーである
microCMSを用いたウェブ制作のコスト削減方法についてお話します。
はじめに
サイト制作においてwordpressなどを採用していた場面では、
ヘッドレスCMSに置き換えた提案が増えています。
その背景には、wordpress制作・運用で抱えていた問題の解消があります。
しかし、ヘッドレスCMSを利用する上で、全体的なコストが割高になることが注意点としてあります。。。。
ヘッドレスCMSとは
ヘッドレスCMSとは、コンテンツの管理画面のみを提供しているサービス。APIを介してコンテンツを提供し、任意のフロントエンド技術で表示できるため、柔軟性とパフォーマンスが向上します。これにより、様々なデバイスやプラットフォームに対応した一貫性のあるコンテンツ配信が可能となります。
microCMSとは
ヘッドレスCMSを提供している国産のサービス。
非常に多くの企業様が採用していたり、最近はQiitaなどで有名なエイチーム社にM&Aされたことで話題にも成ました
非常に勢いがあるサービスになっています。
これまでのmicroCMS開発の選定
フロントエンドフレームワーク： Next.js / Astro
ホスティングサービス： Vercel
CMS： microCMS チームプラン * 2
よくあるヘッドレスCMSを用いた
ウェブサイト制作の構成だと思っています。
さて、この場合だと毎月の固定コストは下記になります。
Vercel： $20 / 月
microCMS： 4,900円 * 2 / 月
microCMSのチームプランを2つ契約してるのはSTG・商用環境の用途でそれぞれ契約していますが、ここは制作会社さんによって異なると思います。
さらに、上記に加えてコンテンツ転送量による従量課金が発生します。
テレビ特集、SNSでのバズなど重なった月があったお客様の場合、
Vercelで3万、microCMSには4万なんていう恐ろしい請求もありました。
これじゃwordpressのほうが安いしええやんって言う声が聞こえてきます…（幻聴）
コンテンツ転送量
画像やPDFがユーザーに転送された量のことを指している。
ヘッドレスCMSでの制作でコスト計算を行う際に、一番考えなくてはいけない箇所
改善点
VercelからCloudflare Pagesへの移行
ホスティングサービスはVercelを使用していましたが、月々の費用が$20 + コンテンツ転送量による従量課金がかかっていました。これを削減するため
に、新規開発の際はCloudflare Pagesを採用することにしました。
Cloudflare Pagesの特徴
■転送量無料（すご…）
■WAFなどのセキュリティ要件がついている（すご…）
■大体の制作案件は無料プランで大体OK（すご…）
すごいですよねー、知った時どうやってサービス成り立ってるのか気になって仕方なかったです。
Cloudflare Pagesを採用するだけで $20/月 が削減、加えてVercelの従量課金の部分（転送量）も大体のケースで0円に収まります。
microCMSの従量課金要素の軽減
microCMSを利用する際、先にも触れていたコンテンツ転送量が従量課金要素として発生する点が課題となっていました。
しかし、Cloudflare WorkersとCloudflare R2を活用することで、この転送量に対するコストも削減することができました。
Cloudflare Workers
Cloudflare Workersは、JavaScriptで書かれたスクリプトをエッジで実行するサービスです。弊社では、これを活用してmicroCMSにある画像などを転送するAPIエンドポイントをここに設置してます。
Cloudflare R2
Cloudflare R2は、オブジェクトストレージサービスであり、Amazon S3互換のAPIを提供しています。
microCMSの画像などをこちらにコピーし、ユーザーがサイトを見るときはR2のURLから配信するようにすることでmicroCMSからのコンテンツ転送量はほとんどなくなります。
これも従量課金を減らせる大きな要素になります。
つまりこういう事
>> 従量課金の部分だけでVercelで3万、microCMSには4万なんていう恐ろしい請求もありました。
この話が発生する可能性を、ほぼ0に出来たわけですね。
（誰か褒めてくれーーーーーーー）
結果
・アクセスの急増にも強く、サイトが落ちたりしない
・サイトの表示速度めっちゃ早い
・セキュリティめっちゃ強い
・セキュリティの脆弱診断などwordpressサイトでは発生してたコストは0
・コストは固定コストのみで大体乗り切れる
Cloudflareと連携させるだけでこんな感じのサイトが作れるわけですね！
Cloudflareすごすぎるし、制作案件との相性が良すぎる…！
microCMSを用いた制作の相談などお待ちしてます！