# ホスティングサービス機能・料金比較

[Cloudflare Pages・Vercel ・Netlify の違いをまとめた記事](https://zenn.dev/catnose99/scraps/6780379210136f) を読むと、国内向けなら Vercel がパフォーマンスが良く、form 等の機能を自分たちで全て用意するのであれば Cloudflare Pages がお得。

その他にもいくつか調べたところ、 **Cloudflare Pages の Pro プラン** もしくは **Amplify** を使い、追加で form や analytics など必要な機能を自分たちで作るのが良さそう。

| サービス | 金額 | 帯域 | form | function | analytics | CMS と連携した preview | 人数制限 | その他 |
| -------------------------------------------------- | ----------------------- | -------- | ---- | -------- | -------------------------------- | ----------------------------------------------------------- | ---------------------- | ------------------------------ |
| Netlify (Pro プラン) | $19 per member/month | 400GB | ✅ | ✅ | ✅ ($9/mounth で追加可能) | ❌ | 1 人毎に追加料金 ($19) | audit ログが取れる |
| Vercel (Pro プラン) | $19 /month | GB | - | ✅ | ✅ | ✅ (next を使えば可能) | 10 | パスワード認証機能がかなり高い |
| Amplify | $10 /month ぐらい？ | 従量課金 | ❌ | ❌ | ❌ (アクセスログぐらいなら取れる) | ❌ | ∞ | 安い |
| Cloudflare Pages (Pro プラン) | $20 /month | ∞ | ❌ | ❌ | ✅ (おそらく) | ❌ (production と preview で違う URL を参照することは可能。) | ∞ | Bot 検知などの機能が豊富、 GitHub のみ対応 |
| Gatsby Cloud (Builds: Standard, Hosting: Standard) | $34 /month (年間契約時) | 30 GB | ❌ | ❌ | ❌ | ✅ | 10 | CMS |

## Netlify

### function (FaaS) が使える

125k/month 回呼び出し可能な js の関数をホスティングできる機能がついてくる。
要するに実質無料で利用できる lambda。

簡単なバックエンド処理が必要になっても、毎度 API Gateway とかの設定をしなくてよいので良さそう。

### preview リンクが消えない

ブランチや PR ごとのプレビュー生成も可能だが、 **プレビュー用のリンクは消すことができない** らしいので basic 認証をかけるのがほぼ必須 ([参考](https://kikunantoka.com/2019/05/31--netlify-preview-environment-with-basic-auth/))。
とはいえ、 pro プラン以上なら preview ページに認証をかけることはできるみたいなのでそんなに問題にならない？

### netlify analytics が便利そう

netlify analytics というアクセス解析機能を自前で持っており、 $9/month で追加利用可能。

[ドキュメント](https://docs.netlify.com/monitor-sites/analytics/?_ga=2.140384886.419871171.1617118767-1440970245.1616092821) を見た感じ、基本的な統計値は取れる模様。

サーバーサイドで統計が取れるのでパフォーマンスに影響しない & tracking を無効化している人の統計も取れるのが強みではあるが、ボットからのアクセスもカウントしてしまうようなので GA と比べて一長一短といったところ。

### form や audit ログを利用できる

form 機能や audit ログ(login 履歴、token の発行・失効など)の保持機能など色々使えて嬉しい。
特に form は function との連携もできるので slack 通知などの仕組みを作りやすい。

ただ、どちらも保存できる量が少ない (form -> 100 件、 audit ログ -> 7 日間) ので、長期間保管したいなら自分たちでデータを永続化しないといけない。
(audit ログは API で取る方法がないかも？)

## Vercel

### next.js を使うと CMS preview ができる

gatsby から next に移行すれば実現可能

### analytics や function, 各種サービスとの連携機能など欲しい機能が色々揃っている

[analytics](https://vercel.com/analytics) や、ダッシュボードから slack などの各種サービスと連携設定が行える [integrations](https://vercel.com/integrations) などの機能がある。

ただ form 機能だけはない。function で代用できそうではある。
元々リッチな動的コンテンツを作るために作られているので、このあたりは仕方がないかもしれない。

### 認証機能などが高い

プレビューページに認証をかけると $150 かかる。
他にもいくつかの機能が $100~ ぐらいになっている。

## Amplify

### 安い

従量課金なので決まった額はわからないが、 [料金ページのサンプル](https://aws.amazon.com/jp/amplify/pricing/) を見た感じ、 NFL のコーポレートサイトなら $10 ぐらいで済ませられそう

> 開発者 5 人で構成されるスタートアップチームが、1 日あたり 300 のアクティブユーザーを持つアプリケーションを取り扱っている。チームはコードを 1 日あたり 2 回コミットする。
>
> ...
>
> 料金合計 = ビルド & デプロイ料金 + ホスティング料金 = 6USD + 2.08USD = 8.08USD/月

### Cloudflare Pages

### 通信帯域 + チームメンバー数無制限

とってもお得。

### form や function など便利な機能はない

CDN での配信に特化したサービスっぽいので、このあたりの機能は付いていない。自分たちで用意する必要がある。

### WAF とか DDoS 検知 (+ analytics?) など色々使える

[Pro プランの機能](https://www.cloudflare.com/plans/) を見るといろんな機能が盛り沢山になっている。

### GitHub のみ対応

GitLab や BitBucket は未対応

## Gatsby Cloud

### CMS のコンテンツ使ったプレビューに対応

デフォルトで [CMS のプレビューデータを使ったビルドに対応](https://qiita.com/onkbear/items/86ed1ae02a3c2865a07c)。
仕組みとしてはプロダクション用とプレビュー用とで API を別々に設定することで実現している。

斜め読みだが、対応している CMS はそんなに多くない？

### form や analytics などの機能はない

使いたい場合は別サービスを利用 or 自作する必要あり。

### 料金プランをカスタマイズできる + 人数制限が緩め

チーム規模やビルド環境を選択できる Builds プラン と、データ配信の容量を決める Hosting プランのそれぞれで違うグレードのプランを選択できる。

例えば、 10 人以下のチームだが人気のサービスなので配信容量はたくさん確保したいというケースなら

Builds -> standard, Hosting -> performance

といった感じにニーズに合わせて選択できる。

また、 Builds プランの人数制限は standard (年間契約の場合 $17/mouth) で 10 人、 performance (年間契約の場合 $85/mouth) で 25 人まで利用できるので、他のサービスを使うよりもお得。

# Headless CMS 比較

| サービス | 料金 | 記事の書きやすさ | 特徴 |
| -------- | -------- | -------- | -------- |
| Contentful | $489 / month or Free | 基本機能がしっかりしていて使いやすいが英語 | Headless CMS 界の王様らしい |
| MicroCMS | 4,900 円 / 月 程度 | 機能が十分充実していて日本語対応なので誰でも扱いやすい | 唯一(?)の日本語対応。REST API ベースなのでGraphQLよりも親しみやすい人が多いかも |
| Prismic .io | $15 / month or $100 / month | Markdown非対応なので何人かは不便かも | $15 / month でほぼ全てのサービスは使える |
| CosmicJS | $99 /month | 普通かな? | 使用例の提供素材が多いのでビジュアルのイメージがわきやすいかも。 |
| GraphCMS | $299 / year or Free | 不明。動画やWebの記事を見た感じ普通に使えそう | GraphQL 特化 |
| Netlify CMS | Netlify の料金体系と同じ (Pro なら $19 per member/month or free) | リアルタイムにレンダリング結果を見ながら記事が書ける | Nelify とセットなら絶対使うべき |
| WordPress | free (self-host) / year or Free | WordPress そのままなので書きやすい | GraphQL 特化 |
| Strapi | free (self-host) / year or Free | 日本語化できてリッチエディタや markdown, html に対応してるので書きやすそう | 機能が多い分運用は大変らしい |

参考になりそうな比較記事

- [4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS）](https://qiita.com/to4-yanagi/items/4e431b99b78401ef65ca)

## Contentful

### 英語だけど使いやすい

アカウント作ってログインするとすでにいくつかモデルが用意されていてどんな感じで使うのかなんとなくイメージできるようになってる。
ただ機能が多い分、最初は混乱するかもしれない。
英語に抵抗があるととっつきにくいかも？

### お高い

無料でも 5 人まで記事編集ができるが、ひとつ上の有料プランにすると $489 になる
機能が多すぎるがおそらくほとんど使わなさそう

## microCMS

### ホスティングサービスによっては下書きを使った preview ができそう

下書き画面でプレビューボタンを押したときにリダイレクトされる URL を自由に設定できるので、それをトリガーにプレビュー用のデータを取りに行く設定ができる機能をもったホスティングサービスなら下書きを使った preview が可能

### 日本語やリッチエディタが使える

コンテンツを書く人はエンジニアだけではないので、かなり大きなメリット

### お高い？

3 人まで編集可能な Standard プランが 4900 円。
1 人追加する毎に +1200 円なので、 数人ぐらいなら追加しても大丈夫？

もう一つ上の Business プランは 20 人使えるが 53000 円なのでかなり高い。
権限設定ができるので事故は防げるかも？

全てのプランで記事の投稿数などは無制限なので、編集者を絞れるなら良さそう。

## Prismic .io

Features をみるとデモで見せてくれた micro CMS とだいたい同じことができそうかなぁという感じで、目立った特徴とかはわからなかった

値段は安いか高いかの両極端
7 User で $15/month (small plan)、25 User で $100/month (medium plan).
Weekly backup とかを求めると $500 のplanになるので流石になしかなぁ

small planでも大体の機能は使えるので安めでいくならアリだけど、markdown記法とかは対応していないのでちょっと不便かも

## CosmicJS

Webサイトを見ると Ecommerce やら Company Webサイトやらの導入事例が見れるので、外面でできることのイメージは湧くかも。
Docments, Extension なんかの情報もきちんと掲載されているので、Developper の人にも優しい。

記事の書きやすさとかはパッと見た感じ他と変わらないかなぁ?

most popluar と書かれている Starter plan で 5 Users $99 /month なので、CosmicJSにするとなるとこれくらいの値段かな。

## GraphCMS
GraphQL の機能が充実しているらしいですが、自分はRESTの方が理解しやすいのであまり良さがわかりませんでした(偏見)

一応無料でも5 Userでsこそこの機能が使えるらしいです。もう一個上にすると $299 /year なので、他と比べるとかなり安めだとは思います。

## WordPress

プラグインを入れると headless 化できる。
WordPress の編集機能をそのまま使えるメリットが大きいが、結構 WordPress 自体に手を加えなければいけないらしく辛そう。。
新規で CMS を用意するなら他の選択肢のほうがいいかもしれない。

- [WordCamp Osaka 2019にてJAMstackとWordPressの話をしてきました](https://remoneko.life/wordcamp-osaka-2019%e3%81%ab%e3%81%a6jamstack%e3%81%a8wordpress%e3%81%ae%e8%a9%b1%e3%82%92%e3%81%97%e3%81%a6%e3%81%8d%e3%81%be%e3%81%97%e3%81%9f/)

## Netlify CMS

Netlify とセットで使えるようになっている CMS。
設定ファイルをリポジトリにおいておくと、 /admin にアクセスすることで CMS が使えるようになる (wp-admin みたいな感じ)

リアルタイムにレンダリング結果をプレビューしながら記事がかけるのが大きなメリット。
Netlify 自体には CMS のプレビューができそうな機能がなかったが、 Netlify CMS を使ってもらう前提だったのかもしれない。

以下の記事に使ったイメージが載っている。
カンバン方式 (trello みたいなやつ) で投稿記事のレビュー・デプロイを管理することができるのも便利。

- [Netlify CMSを試してみた](https://dev.classmethod.jp/articles/try-netlify-cms/)
- [Netlify CMS に「下書き→レビュー中→公開状態」のワークフローを導入する](https://qiita.com/Kento75/items/6582be38767ff1ba5eb5)

少し触った感じ UI がとてもシンプルで使いやすい。
料金は Netlify の料金体系と同じになるらしいので、ホスティングと CMS をセットで使えるのも利点。

Netlify を使うなら絶対これ。
一応 Netlify CMS 単体でも使えるっぽい？

[Netlify Hosting を使わずに Netlify CMS を立てた話](https://ceblog.mediba.jp/post/637037256258060288/netlify-hosting-%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%9A%E3%81%AB-netlify-cms-%E3%82%92%E7%AB%8B%E3%81%A6%E3%81%9F%E8%A9%B1)

## Strapi(self-host)

基本機能は充実していて、日本語化や認証周りも結構しっかりしているらしい。
立ち上げるだけならすぐに可能なのもメリットで、インフラ代を除けばタダで利用できるのは大きな魅力。

ただちゃんと運用しようとすると機能や権限設定しっかりしている分大変らしく、小規模案件では向かないと書いている記事が多いので、結構しっかり腰を据えて取り組まないといけない感じがする。

トラブルが起きるたびに毎度自分たちで対応しなければならないことを考えると個人的には安めの SaaS の方が良い気がする。

- [Strapiを試す](https://qiita.com/hbsnow/items/0d28c48480d69999fc29)
- [本当にすぐに始められる！strapiはエンジニアに優しいCMS](https://qiita.com/nakazonor/items/bd952f0a5324819061ac)
-