ここ数年、Netlify に大変お世話になってきました。とても便利で助かっているのですが、実はスループットがとても悪いということに気が付きました。
これに気づいたのは Storybook のサイトを構築したときでした。Storybook は JavaScript のバンドルサイズがどうしても 2MB 程度になってしまうのですが、これをダウンロードするのに十数秒かかっていることが分かったのです。
調べてみると、Netlify の無料プランの場合、CDN は世界で 8 箇所しかなく、日本は含まれていないそうです。サポートに問い合わせたところ、日本での CDN を有効にする場合は月額 3000 ドルから（！！！）のエンタープライズ契約が必須との回答でした。ありがとう Alejandra さん、ブッ飛んだぜ！
代替手段を検討してみた結果をまとめたものが下記です。測定にはfastorslow.comなどを使いました。
(20201225 追記：この時は知らなかったのですが、今なら Vercel を選ぶかもしれません）
service | price | スループット | RTT |
Netlify | 200GB まで無料以降従量制 | 約 100KB/s | 約 50ms |
Github pages | 100GB まで無料超えたら追い出される(!) | 数 MB/s | 約 5ms |
Firebase hosting | 10GB まで無料以降従量制 | 数 MB/s | 約 5ms |
Firebase と Github pages で悩みましたが、下記の理由から今回は github pages を利用することにしました。
- スループットやレイテンシにほぼ差がないこと
- デプロイの手間はどちらでもさして変わらかったこと(github actions 利用)
- 無料枠が github pages のほうが大きいこと
ちなみに、github actions は以下のようにしています。
上記を走らせるとgh-pagesブランチに、指定したフォルダの内容がプッシュされます（上記では./storybook-staticに生成されたファイル）。あとは github のコンソールから、pages として公開するブランチをポチッと選べば完了です。
なお、独自ドメインを使用する場合は、DNS 設定において、<あなたのユーザ名>.github.ioを値とするCNAMEレコードを作成しておく必要があります。