GatsbyJS サイトの高速なビルド&デプロイが行えるプラットフォーム Gatsby Cloud が便利

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。

今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。

Gatsby Cloud とは?

Gatsby Cloud のサイトのキャプチャ画像

Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。

GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、インクリメンタルビルドとリアルタイムプレビュー環境の作成を自動で行ってくれるというものです。

主な特徴として以下のようなものがあります。

スターターキットが用意されており、登録していくつか設定を行うだけで Headless CMS + GatsbyJS 構成のサイトが公開できる

ContentfulDatoCMS などの Headless CMS と連携して使い始められるスターターキットが用意されており、Gatsby Cloud 単体でいくつかの設定を行うだけで何もない状態から Headless CMS + GatsbyJS という構成のサイトを公開し、運用し始めることができます。

もちろん、既に GatsbyJS を使用しているサイトに接続して使い始めることもできます。Gaji-Labo のコーポレートサイトもまだ試している段階ですが、 Gatsby Cloud 上でビルドの管理を行うことを検討しています。

サイトのホスティングも容易に行うことができる

ホスティングとの連携を設定する画面

設定画面から Netlify, Firebase などと連携してサイトのホスティングを行うことができます。

Gatsby Cloud 単体でもサイトの公開をすることはできますが、カスタムドメインの使用はできないようなので、他のサービスでホスティングするのが主な使い方になるかと思います。

インクリメンタルビルドを標準で行える

インクリメンタルビルド(前回のサイトの状態をキャッシュしておき、差分のみをビルドする)に標準で対応しています。これにより、通常 GatsbyJS のみでビルドを行うよりも早くビルドとデプロイを行うことができます。

Netlify などを使っているとプランによってビルド時間の制限があるため、ビルド時間は出来れば短く抑えたいものです。

インクリメンタルビルドを行えるようにする方法はいくつかありますが、Gatsby Cloud は使うだけでインクリメンタルビルドが行えるようになるため、最も手っ取り早い方法の一つになるのではないかと感じました。

使い始める方法

スターターキットを使ってサイトのセットアップを行い、実際に更新し始められるようになるまでの手順をまとめました。

Gatsby Cloud の Sign up 画面のキャプチャ画像

最初に GatsbyJSGet started for free よりアカウント作成を行います。作成は GitHub アカウントを使って行います。

登録後、 Create new site より新しいサイトの作成を行います。

Gatsby Cloud のサイト作成画面のキャプチャ画像
Gatsby Cloud で新しくサイトを作成するか、既存の GatsbyJS を使用しているサイトと接続するかを選択できる

今回は新しくサイトを作成するため、 I don't have a Gatsby site yet を選択しました。

Next を選択後、スターターキットの選択画面に移ります。

Gatsby Cloud のスターターキット選択画面のキャプチャ画像
DatoCMS, Cosmic JS, Contentful などの Headless CMS を選択できる

スターターキットを選択した後、リポジトリ名を入力し、選択したスターターキットの Headless CMS に接続します。

この時、Headless CMSに登録が必要な場合は登録も同時に行います。

Gatsby Cloudのセットアップ完了画面のキャプチャ画像

接続し、セットアップが完了すると、作成されたサイトの Github リポジトリと、 CMS の管理画面へのリンクが表示されます。

これでサイトのセットアップは完了です。もちろん、ここで作成された GatsbyJS や Headless CMS の中身や設定などは GitHub リポジトリなどから後で自由にカスタマイズすることができます。

ビルドについて

CMSと接続している場合、CMSで更新を行うとそのままビルドが行われる

CMS から更新を行うとビルドが走り、デプロイが行われます。

また、リポジトリに直接 push を行ってもビルドが走り、 Production Branch (デフォルトでは master) への push の場合はそのままデプロイが行われます。

Trigger Build ボタンから手動でビルドとデプロイを行うこともできます。

まとめ

今回は静的サイトジェネレーターの GatsbyJS のローンチを容易にする Gatsby Cloud というプラットフォームについてまとめました。

スターターキットを使用して容易に GatsbyJS を使用したサイトの作成を行うことができるため、これから GatsbyJS を使い始めるという場合には一つの大きな選択肢になるかと思います。

既存サイトにも簡単に接続が出来る上、インクリメンタルビルドに標準対応しているため、試してみてこれから GatsbyJS を使う上で欠かせないプラットフォームになるのではないかと感じました。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。