Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ!

2021.03.03

Cloudflareから、JamstackサイトがホストできるCloudflare Pages(Beta版)がリリースされました!

Cloudflare Pagesとは

Cloudflare Pages

CDNやセキュリティのSaaSで有名なCloudflareが提供する、静的サイトのホスティングサービスです。

NetlifyやVercel(過去に書いたVercelの記事はこちら)と競合する位置づけで、Githubのリポジトリからソースを引っ張ってきて、静的で高速なウェブサイトを簡単にビルド&デプロイできます。

前提

今回はGatsby + Contentfulで構築したアプリを、Cloudflare Pagesでホストしてみようと思います。

アプリの構築からやりたい方は、過去に書いた記事を参考にしてみてください。

CircleCI × Contentful × S3で作るJamstackなブログ環境。

また、Githubリポジトリを作成し、masterブランチにソースコードをプッシュしておきます。Cloudflare Pagesのチュートリアルでは丁寧に最初から説明してくれてますのでまだの方は参考にしてみてください。

早速使ってみるよ

基本的な使い方はひっじょうに簡単で、Githubリポジトリを選び、ビルドコマンドや環境変数を入力し、デプロイするだけです。

早速やってみます。Cloudflareにログインするとサイドバーに機能が追加されてますね。

Cloudflare Pages

[Create a Project]からGithubアカウントを連携し、ソースを取得するリポジトリを選択します。

ビルドとデプロイの設定画面です。

Cloudflare Pages

[Framework preset]でGatsbyを選択。本日時点で他にもReact, Vue, Nuxtなどなどほぼ網羅されてます。

もし自前のビルド処理を行いたい場合、[Build command]に、ビルド時に実行したいコマンドを入力します。

今回はバックエンドとしてContentfulと連携しているため、[Environment variables]にContentfulのスペースIDとシークレットトークンを入力しています。

これで[Save and Deploy]。

最初はイニシャライズでちょっと待ちましたが、[Deploying to Cloudflare's global network]までFinishしたら完了です。

Cloudflare Pages

リアルタイムでビルドとデプロイのログが見れますので、どこで処理がつまづいたか、またビルド時間のボトルネックの調査なども行いやすいです。

完了すると[Project Name].pages.devのようなURLが発行されるので、アクセスしてみます。

Cloudflare Pages

成功しました! やはり簡単すぎる・・・。

以降、Githubの連携ブランチにpushするたびにCloudflare Pagesでもビルド&デプロイ処理が走ります。

プレビューモードで本番デプロイ前に確認する

現在1つのプロジェクトは1つのリポジトリとの連携ですが、本番展開前に、新しいバージョンをデプロイなしにチェックできるプレビューモードがあります。

Githubでプルリクエストが作成されるたびに、Cloudflare側で、本番環境と切り離されたプレビュー環境に自動でデプロイを行い、aa28bb7b.sample-app.pages.devのようなランダムな文字列が付与されたURLを発行してくれます。

デフォルトではこのプレビューURLも公開されているのですが、Cloudflare Accessを使ってアクセス制限をかけることが可能です。

Cloudflare Pages

環境変数の使い分け

Cloudflare Pages

例えば本番とテストでバックエンドシステムを分けたい場合も、本番とプレビューモードそれぞれで環境変数を設定できます。

他サービスからの乗り換え

既存Jamstackホスティングサービスのユーザーに対する気遣いも抜かりなく、NetlifyやVercelから乗り換えたい人向けのチュートリアルがあります。

どのサービスを使っていても基本的にソースはリポジトリ管理しているだけのはずなので、主にビルドコマンドをCloudflareに移行するだけで使い始めることができますね。

料金体系

記事執筆時点で、無料プランでは下記をカバーしています(料金ページ)。

  • 月500回のデプロイ
  • 20,000ファイル
  • 10カスタムドメイン
  • 最大25MBのファイルサイズ
  • 無制限のユーザー数
  • 無制限のプレビューデプロイ

個人利用&業務用の検証では十分すぎると思います。

カスタムドメイン

Pagesで構築したJamstackサイトにSSL証明書ありの独自ドメインを当てることもできます。

Cloudflare Pages

独自ドメインを当てるには、Cloudflareにドメイン登録をすることが必要です。

ドメインをRoute53など外部で管理している場合、Cloudflareが発行するNSレコードを外部サービス側に登録してドメイン管理をCloudflareに移行し、Pagesアプリのcnameを登録します。もしくはcnameとtxtレコードを直接外部DNSサービス側で登録することも可能ですが、Cloudflareのプロキシ機能などを使いたい方はCloudflare側での管理が便利です。

完了すると、SSLが適用されたドメインでアクセスできるようになります。

SSL

さいごに

Jamstack界隈が最近盛り上がっていていい感じですね。Cloudflare Pagesは必要機能を盛り込みつつ、Cloudflare Accessによるアクセス制限やWorkersとの連携など、Jamstackホスティング決定版的な仕上がりになっています。

クラスメソッドはCloudflareのパートナーとして、Cloudflare利用のお手伝いが可能です。お問い合わせはこちらから。

参考URL

https://developers.cloudflare.com/pages/

https://developers.cloudflare.com/pages/how-to/deploy-a-gatsby-site