概要
Cloudflare Pagesがブランチ毎にURLを発行してくれる機能について紹介
Cloudflare Pagesとは?
Cloudflare Pagesはウェブサイトやアプリケーションを展開するためのホスティングおよびデプロイメントプラットフォームです。Cloudflare Pagesは、Cloudflareのグローバルなエッジネットワークを利用して、ウェブコンテンツを高速かつセキュアに配信します。
何が便利なの?
Cloudflare Pagesではブランチ毎にURLを発行してくれる機能があり、開発現場でのレビュアーが動作確認する際にローカルに落としてきてサーバーを立ち上げるという手間を削減することができます。
やってみた
事前準備(Nuxt)
今回は、Nuxt.jsでpages配下のファイルに簡単な変更を加えてみるケースで行ってみます
簡単に説明していきます
プロジェクト作成
1 | npx nuxi@latest init {作りたいアプリケーション名} |
作成したディレクトリに移動しnpm i
1 | cd {作りたいアプリケーション名}/ && npm i |
git追跡
1 | git init |
サーバー起動
1 | npm run dev -- -o |
以下の画面が出てくればOK
pagesディレクトリ作成し、index.vue
を作成
1 | mkdir pages && touch pages/index.vue |
index.vue
の中身を以下のものにする
1 2 3 | <div> <h1>index.vueのページです</h1> </div> |
app.vue
ファイルのNuxtWelcome
コンポーネントをNuxtPage
に変更
1 | <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/
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にします)
1 | git checkout -b sample |
次にindex.vue
ファイルに変更を加えます
1 2 3 4 5 | <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ビルドまでが無料だった気がします。