Jamstackで使用する主なホスティングサービスとヘッドレスCMSの特徴を解説

ノベルティの高宮です。

今回はJamstackでよく使われるホスティングサービスとヘッドレスCMSの特徴について解説します。

WordPressからヘッドレスCMSへの転換を検討している方やこれからJamstackでサイトを制作しようと検討している方はぜひ参考にしてください。

ホスティングサービスの一般的な特徴

フロントエンド開発やJamstackアーキテクチャに特化したホスティングサービスでは、以下のような機能が一般的に提供されています。

1. Gitリポジトリ（GitHub、GitLab、Bitbucketなど）しており、コードの変更がリポジトリにプッシュされると、自動的にサイトがビルドおよびデプロイする。
2. HTTPS接続のためのSSL証明書を自動的に発行および更新。
3. 基本的な機能にアクセスできる無料プランを提供しており、小規模なサイトや個人的な開発において、コストをかけずに利用可能。
4. CDNを使用することで、世界中のユーザーに対して高速なコンテンツ配信を実現。

これらの機能は、開発者が効率的かつ安全にサイトやアプリケーションを管理することを可能にします。

各ホスティングサービスはこれらの基本的な機能に加えて、独自の追加機能を提供することで、さまざまなニーズに対応しています。

Jamstackでよく使用されているホスティングサービスとしてはVercel、Cloudflare Pages、AWS Amplify.Netlifyなどが挙げられますが、今回はVercelとCloudflare Pagesを比較します。

Vercel

Vercelは、Vercel社が提供するフロントエンド開発に特化したホスティングサービスです。Next.jsの開発元として知られており、Next.jsアプリケーションのデプロイに最適化されています。

他のホスティングサービスより優れているところとしては、特別手を加えなくてもNext.jsの機能であるSSRやISRを使用できる状態でデプロイすることができます。

また、On demand ISRを使用できるのでSGのサイトでありながらほぼリアルタイムにサイトを更新することができます。

以下は無料プランの主な特徴です。

• Gitをインポートすれば設定無しでデプロイ可能
• CI/CD環境の構築不要
• 自動HTTPS/SSL
• mainブランチ以外にプッシュすればプレビューモードを提供
• プロジェクト数200個
• 帯域幅100GB
• 1日あたりのデプロイ数100回
• 商用利用不可
• チーム開発不可

Vercelのメリット

• Next.jsを開発している会社が運営しているため、ISRやOn demand ISRなどNext.jsの機能を特に設定をしなくても活用できる。

Vercelのデメリット

• Hobbyプランでの商用利用ができない。
• Hobbyプランでのチーム開発ができない。
• Next.jsに最適化されている

Vercelは特にNext.jsを利用する開発者やプロジェクトに適しており、Next.jsの様々な機能を簡単に活用することができます。

一方で、Hobbyプランは商用利用が禁止されており、チーム開発をすることができません。これらの要件を満たす場合は他のプランへのアップグレードを検討する必要があります。

通常の制作案件であれば、ほぼ確実にProプランへのアップデートが必要になることと、複数人での開発をする場合はメンバー全員がProプランに加入しなければなりません。

Cloudflare Pages

Cloudflare PagesはCloudflare 社が提供するホスティングサービスです。JamstackだけでなくWordPressなどのサイトでも利用可能です。

以下は無料プランの主な特徴です。

• Gitをインポートすれば設定無しでデプロイ可能
• CI/CD環境の構築不要
• 自動HTTPS/SSL
• mainブランチ以外にプッシュすればプレビューモードを提供
• プロジェクト数無制限
• 帯域幅無制限
• ビルド実行500回/月

Cloudflare Pagesのメリット

• 無料プランで商用利用できる
• 無料プランでチーム開発ができる
• 帯域幅が無制限
• プロジェクト数が無制限

Cloudflare Pagesのデメリット

• ISRやOn demand ISRなどNext.jsの機能が活用できない（※ISRについては似たような機能はできる）

これらの特徴を踏まえると、Cloudflare Pagesは特に商用利用やチーム開発を無料プランで行いたい場合や静的サイトをデプロイしたい場合、Next.js以外のフレームワークを使用する場合などに適しています。

VercelとCloudflare Pagesの無料プランの比較

個人的には静的なWebサイトであれば商用利用もチーム開発も無料でできるCloudflare Pagesがベストではないかと考えています。

Next.jsの機能をストレスなくフルで使いたい場合はVercelを選択するのが良いかと思います。

ヘッドレスCMSの一般的な特徴

ヘッドレスCMS（Content Management System）は、WordPressなどの通常のCMSと異なり、フロントエンドを持たないため、コンテンツを任意のフロントエンドにAPI経由で提供することができます。

以下は一般的な特徴です。

1. APIを通じてコンテンツを提供するため、ウェブサイト、アプリ、IoTデバイスなど、あらゆるプラットフォームでコンテンツを利用できる。
2. フロントエンドが別で構築されるため、技術スタックを自由に選択できる。
3. コンテンツはヘッドレスCMS内で一元管理され、複数のフロントエンドに跨って利用することが可能。
4. フロントエンドとバックエンドが分離されているため、サイトのパフォーマンスと拡張性の向上。
5. フロントエンドとバックエンドの分離により、セキュリティリスクが減少。

今回は日本製のCMSであるmicroCMSとNewtについて比較します。

microCMS

microCMSとは、株式会社microCMSによって2019年9月にリリースされたヘッドレスCMSです。microCMSは国内製であるため、管理画面はもちろん、マニュアルも日本語に完全対応しています。

microCMSのHobbyプラン（無料プラン）の主な特徴は以下の通り

• 月額料金0円
• APIリクエスト無制限
• データ送信量20GB/月
• メンバー数3人
• API数3個
• コンテンツ数1,000件
• メディアのストレージ容量無制限
• 1メディアあたりの容量上限40MB

Newt

NewtはNewt株式会社によって2022年3月にリリースされたヘッドレスCMSです。microCMSと同様に国内製であるため、管理画面、マニュアルは日本語に完全対応しています。

NewtのFreeプラン（無料プラン）の主な特徴は以下の通り

• メンバー数1人
• モデル数10
• APIリクエスト数100万回/月
• データ送信料100GB/月
• コンテンツ数10,000
• 1メディアあたりの容量上限50MB

microCMSとNewtの無料プランの比較

両方とも国産のCMSであるため、日本人に使いやすいUIとなっています。

大きな差があるのはAPIの数です。※API数というのはWordPressでいうカスタム投稿やカテゴリーのことを指します。

microCMSは無料プランの場合、3個しか使えないため、大体の制作案件では足りなくなり、アップグレードが必要となります。

Newtの場合は無料で10個使用できるので、もし価格を抑えて制作したい場合はNewtを選択するのがよいでしょう。

ただし、microCMSのほうGoogle検索やZennなどの情報量が多いため、技術者としてはmicroCMSの方が安心して使用できる印象です。

また、どちらのCMSも無料で商用利用できるのでホスティングサービスをCloudflare Pagesに選定すればカスタムドメインの料金だけでサイトを運用することができます。

まとめ

今回は主なホスティングサービスとヘッドレスCMSについての特徴を紹介しました。

紹介したもの以外にも様々なサービスが有ります。ノベルティでは要件に応じて適切な組み合わせをご提案させていただきます。

興味のある方はお問い合わせを！

↓ この記事をご覧の方へおすすめの記事はこちら ↓

【Node.js使ってみたい！】Jamstackにも欠かせない、Web制作の現場でも愛されるNode.jsとは

ブラウザレンダリングの仕組みを理解し、Webサイトのパフォーマンス向上を目指す

新しいブラウザ「Arc」｜便利機能の基本的な使い方をご紹介