概要
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の中身を以下のものにする
<template>
<div>
<h1>index.vueのページです</h1>
</div>
</template>
app.vueファイルのNuxtWelcomeコンポーネントをNuxtPageに変更
<template>
<div>
<NuxtPage />
</div>
</template>
以下の画面となればOK
Nuxt最新バージョン(3.6.1)だとHMRが効かないことありますが、一度サーバー立て直すと上手くいきます
これらをGitHubにあげて事前準備は終わりです！
次、Cloudflareのアカウントが必要になるので登録がまだの人は済ませておいてください
Cloudflare Pages
Cloudflareにアクセスし、ログインします
左サイドバーのWorkers & Pagesの概要に移動します
アプリケーションの作成をクリック
PagesをクリックしGitに接続をクリック
アカウント接続が完了したら、今回作成したリポジトリを選択しセットアップの開始をクリック
続いてビルドとデプロイの設定ですが、公式ドキュメントにフレームワーク毎のセットアップ方法が記載されており、以下リンクを参照し
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npm run build |
| Build directory | dist |
| Environment Variables | NODE_VERSION: 17 |
またフレームワーク プリセットをNuxtで選択すると自動入力してくれます
次に進んで、CI/CDが完了すると、URLが発行されます
発行されたURLに遷移すると、作成したファイルが確認できます
そして本題のブランチを切った運用ですが、
まずNuxt側でブランチを切って、変更を加えてみます(ブランチ名はsampleにします)
git checkout -b sample
次にindex.vueファイルに変更を加えます
<template>
<div>
<h1>index.vueのページです</h1>
<p>sampleブランチで変更を加えました</p>
</div>
</template>
この変更をpushすると、Cloudflare Pagesで自動でCI/CDが走ります
これは、デプロイの設定で自動デプロイがデフォルトで有効になっているためです
自動デプロイの対象とするブランチを選択することもできます
CI/CDが通ると、sampleブランチ用にURLを発行してくれます
以下の画面が確認できれば完了です
おわり
見ていただきありがとうございます。今回は、Cloudflare Pagesを使って、レビュアーの負担を削減する方法というテーマでした。
ホスティングサービスはこれまでvercelしか使ったことがなく、この機能が一般的なのかはわからないですが、開発現場でレビュアーが「PRをローカルに落としてサーバー立ち上げて、、」ってちょっとめんどくさい作業でしたので、ブランチ毎にURLを発行してくれるのはとても便利だなと思いました。
ただvercelの方がGitHubアカウントの連携からURL発行まではシームレスにできる印象を感じました。
とはいえ、mainブランチとsampleブランチを同時に見ながら変更点の確認が行えるので、ローカルサーバー起動時にポートが干渉したりすることもなく実用性も感じました。
今回行ったことは無料プランで全部できるので、ぜひ一度試してみてもらえればと思います。月500ビルドまでが無料だった気がします。