Cloudflare PagesにGatsbyJS v3のサイトをとりあえずデプロイする
2021年3月に一般提供がはじまったCloudflare Pagesに、同月にリリースされたばかりのGatsbyJS v3.0をデプロイしてみます。
1. Gatsbyのサイトを準備する
Gatsby CLIを入れておくと開発がしやすいのでグローバルインストールしておきます。
$ npm install -g gatsby-cli
僕はNode.jsのバージョン管理にnodenvを使っているのでグローバルインストールした後はnodenv rehashを実行します。これでgatsbyコマンドが使えるようになりました。
1-1. Gatsby v3に対応したスターターを探す
Gatsby v3対応のスターターをチェックしてみます。今回は色んなところで見かけるgatsby-starter-blogを使うことにしました。
1-2. スターターをインストール
スターターページにインストールコマンドが書かれているのでそちらを実行します。
$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
# ダウンロード完了したらディレクトリに移動
$ cd gatsby-starter-blog
1-3. ローカルで動かす
gatsby newでスターターをダウンロードした場合、npmパッケージのインストールも完了しているので早速ローカルで動かしてみます。
$ npm run develop
# ...
# You can now view gatsby-starter-blog in the browser.
# http://localhost:8000/
# ...
http://localhost:8000にアクセスするとサイトが表示されました。
開発者さんのブログの内容そのままなので、ほんの少しだけアレンジしておきます。このスターターの場合gatsby-config.jsにプロフィールの情報を記載する形になっているので適当に書き換えます。
1-4. GitHubリポジトリにプッシュ
GitHubリポジトリを作って、ローカルのディレクトリをそのままプッシュします。リポジトリはこんな感じ。
2. Cloudflare Pagesからデプロイ
まずはCloudflareのダッシュボードにログインします。はじめてCloudflareを使う場合も無料でアカウントが作成できます。
2-1. GitHubリポジトリを接続
サイトバーから［Pages（ページ）］を選んで、プロジェクトを作成します。
リポジトリの選択画面が開くので、さきほど作成したリポジトリを選んで進みます。続く画面では該当するリポジトリが選ばれていることを確認してセットアップを開始します。
続いてビルドの設定が表示されます。［フレームワークプリセット］で［Gatsby］を選ぶと、ビルドコマンドとビルド出力ディレクトリが自動で入力されます。
2-2. セットアップを開始
Gatsbyの開発者がメンテしているテンプレートなのできっとこのままの設定でいけるだろうということで、他は特に変えずに［セットアップを開始］してみます。
3分弱待つとデプロイが完了しました。ほとんどいじっていない状態のプロジェクトなので、なんとも言えないのですがビルド時間は早い方ではないでしょうか。
表示されたURLにアクセスするとページが表示されました。簡単ですね。
👇 実際にデプロイされたサイトはこちら
本番環境のブランチ以外にプッシュされるとプレビューのデプロイが行われる
ダッシュボードの［設定］を見ると、本番環境のブランチの変更ができます。
本番環境ブランチ以外でプルリクエストが作られると、その時点でプレビューサイトのデプロイを行なってくれるようです。`
カスタムドメイン
今回は試しませんが、カスタムドメインの設定も簡単にできそうです。詳しくはこちらの記事が参考になると思います。
以上、Gatsby v3.0 と Cloudflare Pageを試してみた記事でした。ちなみにこの記事は👇 この検証を行うためについでに書いたものです。
Discussion