GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。
今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。
Gatsby Cloud とは？
Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。
GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、インクリメンタルビルドとリアルタイムプレビュー環境の作成を自動で行ってくれるというものです。
主な特徴として以下のようなものがあります。
スターターキットが用意されており、登録していくつか設定を行うだけで Headless CMS + GatsbyJS 構成のサイトが公開できる
Contentful や DatoCMS などの Headless CMS と連携して使い始められるスターターキットが用意されており、Gatsby Cloud 単体でいくつかの設定を行うだけで何もない状態から Headless CMS + GatsbyJS という構成のサイトを公開し、運用し始めることができます。
もちろん、既に GatsbyJS を使用しているサイトに接続して使い始めることもできます。Gaji-Labo のコーポレートサイトもまだ試している段階ですが、 Gatsby Cloud 上でビルドの管理を行うことを検討しています。
サイトのホスティングも容易に行うことができる
設定画面から Netlify, Firebase などと連携してサイトのホスティングを行うことができます。
Gatsby Cloud 単体でもサイトの公開をすることはできますが、カスタムドメインの使用はできないようなので、他のサービスでホスティングするのが主な使い方になるかと思います。
インクリメンタルビルドを標準で行える
インクリメンタルビルド（前回のサイトの状態をキャッシュしておき、差分のみをビルドする）に標準で対応しています。これにより、通常 GatsbyJS のみでビルドを行うよりも早くビルドとデプロイを行うことができます。
Netlify などを使っているとプランによってビルド時間の制限があるため、ビルド時間は出来れば短く抑えたいものです。
インクリメンタルビルドを行えるようにする方法はいくつかありますが、Gatsby Cloud は使うだけでインクリメンタルビルドが行えるようになるため、最も手っ取り早い方法の一つになるのではないかと感じました。
使い始める方法
スターターキットを使ってサイトのセットアップを行い、実際に更新し始められるようになるまでの手順をまとめました。
最初に GatsbyJS の Get started for free よりアカウント作成を行います。作成は GitHub アカウントを使って行います。
登録後、 Create new site より新しいサイトの作成を行います。
今回は新しくサイトを作成するため、 I don't have a Gatsby site yet を選択しました。
Next を選択後、スターターキットの選択画面に移ります。
スターターキットを選択した後、リポジトリ名を入力し、選択したスターターキットの Headless CMS に接続します。
この時、Headless CMSに登録が必要な場合は登録も同時に行います。
接続し、セットアップが完了すると、作成されたサイトの Github リポジトリと、 CMS の管理画面へのリンクが表示されます。
これでサイトのセットアップは完了です。もちろん、ここで作成された GatsbyJS や Headless CMS の中身や設定などは GitHub リポジトリなどから後で自由にカスタマイズすることができます。
ビルドについて
CMS から更新を行うとビルドが走り、デプロイが行われます。
また、リポジトリに直接 push を行ってもビルドが走り、 Production Branch (デフォルトでは master) への push の場合はそのままデプロイが行われます。
Trigger Build ボタンから手動でビルドとデプロイを行うこともできます。
まとめ
今回は静的サイトジェネレーターの GatsbyJS のローンチを容易にする Gatsby Cloud というプラットフォームについてまとめました。
スターターキットを使用して容易に GatsbyJS を使用したサイトの作成を行うことができるため、これから GatsbyJS を使い始めるという場合には一つの大きな選択肢になるかと思います。
既存サイトにも簡単に接続が出来る上、インクリメンタルビルドに標準対応しているため、試してみてこれから GatsbyJS を使う上で欠かせないプラットフォームになるのではないかと感じました。
Gaji-Labo は Jamstack 開発の知見があります
高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。
フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応します。
「Jamstack にしたいが、社内調整ができるか不安」
「Jamstack 開発がわかるエンジニアがいない」
Jamstack に関わるお困りごとに対して、メリット／デメリットの判断からお手伝いできます。
まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！
