10分くらいかかってたビルドが3分になった、催眠術とか超スピードとかそんなチャチなもんでは（ｒｙ
激重サムネイル処理(<5000 images)ブログ、Vercelで10分以上かかってたビルドがGatsbyCloudだと3分かからない…！？ pic.twitter.com/AERB04Un7Q
— ゲン (@gen_sobunya) 2020年9月7日
超技術に感動したので、自分がホストしているGatsby Webサイトのビルドを全部任せることにしました。
なお、ファイル数多いリポジトリの場合、Vercel無料プランの5000アップロード/day 制限に引っかかります。（Vercel内でビルドする場合はビルド前ファイルが1万ファイル上限） このため画像の多いブログはVercelではなくFirebase hostingへ移行することになりましたが、サークルサイトは以下の方法でサクッとビルド環境のみを移行できました。
移行手順
Vercelでのリダイレクト設定やキャッシュ設定は維持したまま、5分でビルド環境のみをGatsby Cloudへ移行できます。
- VercelプロジェクトのGitHubリポジトリ連携を切る
- Gatsby Cloudでプロジェクトを作成して、使っていたGitHubプロジェクトを連携する
- Hosting先としてVercelを選択して連携する
- プロジェクトルートにあった
vercel.jsonを/static/以下に移動して、ビルド後のルート直下に配置されるようにしてPush
3の時点で1回ビルドが走り、プレビュー用URLが発行されるのでそこで動作確認できます。
メリット
Lighthouse CIを回せる
Gatsby Cloudはビルド後に自動的にLighthouseCIを回してスコア算出してくれます。せっかくGitHub Actionsで実装したのに…
ありえんくらいビルドが速い
Vercelのビルドは下記記事参照。これはサークルサイトなので2～3分で終わっていますが…
gensobunya-tech.hatenablog.com
Gatsby Cloudでは1分です。
※追記、10000以上のサムネイルを生成するブログをGatsby CloudでビルドしてFirebase Hostingにデプロイしました
ホスティング先を気軽に変更できる
NetlifyやVercelはビルド＋ホスティングでしたが、Gatsby Cloudを間に挟むことでビルドとホスティングを疎結合な構成になりました。
Gatsby Cloudでビルド先設定を変更することで、FirebaseでもS3でもGCSでも好きなホスティングさきにいつでも変更できます（DNSレコードの変更が必要ですが）
プレビュー環境にアクセス制限がかけられる！(無料
シンプルなパスワード制限やGatsby cloudのログイン状態などで制限がかけられます。 仕事で使うときによく出る要件なので、嬉しいですね
もちろんPRプレビューもあるぞ！
特定Branchを常にビルドするオプションは、個人プランでは無いみたいですね。VercelやNetlifyの方が一枚上手。
まとめ
これまで、ホスティングサービスはビルドとホスティングがセットになっていましたが、Gatsby Cloudはビルドのみを最適化するため、「リポジトリ」「ビルド」「ホスティング」全てを疎結合に構成することができるようになりました。 静的サイトで回すテストは、機能面以外だとLightHouseCIが鉄板だと思うので、そこがビルトインされているのも非常にうれしいですね。
