Cloudflare Pagesを使ってPRのレビューをもっと簡単にする

概要

Cloudflare Pagesがブランチ毎にURLを発行してくれる機能について紹介

Cloudflare Pagesとは？

Cloudflare Pagesはウェブサイトやアプリケーションを展開するためのホスティングおよびデプロイメントプラットフォームです。Cloudflare Pagesは、Cloudflareのグローバルなエッジネットワークを利用して、ウェブコンテンツを高速かつセキュアに配信します。

何が便利なの？

Cloudflare Pagesではブランチ毎にURLを発行してくれる機能があり、開発現場でのレビュアーが動作確認する際にローカルに落としてきてサーバーを立ち上げるという手間を削減することができます。

やってみた

事前準備(Nuxt)

今回は、Nuxt.jsでpages配下のファイルに簡単な変更を加えてみるケースで行ってみます
簡単に説明していきます

プロジェクト作成

npx nuxi@latest init {作りたいアプリケーション名}

作成したディレクトリに移動しnpm i

cd {作りたいアプリケーション名}/ && npm i

git追跡

git init

サーバー起動

npm run dev -- -o

以下の画面が出てくればOK

pagesディレクトリ作成し、index.vueを作成

mkdir pages && touch pages/index.vue

index.vueの中身を以下のものにする

<div>
<h1>index.vueのページです</h1>
</div>

app.vueファイルのNuxtWelcomeコンポーネントをNuxtPageに変更

<div></div>

以下の画面となればOK

Nuxt最新バージョン(3.6.1)だとHMRが効かないことありますが、一度サーバー立て直すと上手くいきます

これらをGitHubにあげて事前準備は終わりです！

次、Cloudflareのアカウントが必要になるので登録がまだの人は済ませておいてください

Cloudflare Pages

Cloudflareにアクセスし、ログインします
左サイドバーのWorkers & Pagesの概要に移動します

アプリケーションの作成をクリック

PagesをクリックしGitに接続をクリック

アカウント接続が完了したら、今回作成したリポジトリを選択しセットアップの開始をクリック

続いてビルドとデプロイの設定ですが、公式ドキュメントにフレームワーク毎のセットアップ方法が記載されているので、以下リンクを参照してください。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/

またフレームワーク プリセットをNuxtで選択すると自動入力してくれます

次に進んで、CI/CDが完了すると、URLが発行されます

発行されたURLに遷移すると、作成したファイルが確認できます

そして本題のブランチを切った運用ですが、
まずNuxt側でブランチを切って、変更を加えてみます(ブランチ名はsampleにします)

git checkout -b sample

次にindex.vueファイルに変更を加えます

<div>
<h1>index.vueのページです</h1>
sampleブランチで変更を加えました

</div>

この変更をpushすると、Cloudflare Pagesで自動でCI/CDが走ります

これは、デプロイの設定で自動デプロイがデフォルトで有効になっているためです

自動デプロイの対象とするブランチを選択することもできます

CI/CDが通ると、sampleブランチ用にURLを発行してくれます

以下の画面が確認できれば完了です

おわり

見ていただきありがとうございます。今回は、Cloudflare Pagesを使って、レビュアーの負担を削減する方法というテーマでした。
ホスティングサービスはこれまでvercelしか使ったことがなく、この機能が一般的なのかはわからないですが、開発現場でレビュアーが「PRをローカルに落としてサーバー立ち上げて、、」ってちょっとめんどくさい作業でしたので、ブランチ毎にURLを発行してくれるのはとても便利だなと思いました。
ただvercelの方がGitHubアカウントの連携からURL発行まではシームレスにできる印象を感じました。

とはいえ、mainブランチとsampleブランチを同時に見ながら変更点の確認が行えるので、ローカルサーバー起動時にポートが干渉したりすることもなく実用性も感じました。

今回行ったことは無料プランで全部できるので、ぜひ一度試してみてもらえればと思います。月500ビルドまでが無料だった気がします。