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

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

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

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

# やってみた

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

プロジェクト作成
```zsh:zsh
npx nuxi@latest init {作りたいアプリケーション名}
```

作成したディレクトリに移動し`npm i`
```zsh:zsh
cd {作りたいアプリケーション名}/ && npm i
```

git追跡
```zsh:zsh
git init
```

サーバー起動
```zsh:zsh
npm run dev -- -o
```
以下の画面が出てくればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/4253328f-4742-f176-e6d1-d5ed8fd5e087.png)

pagesディレクトリ作成し、`index.vue`を作成
```zsh:zsh
mkdir pages && touch pages/index.vue
```

`index.vue`の中身を以下のものにする
```vue:index.vue
<template>
    <div>
        <h1>index.vueのページです</h1>
    </div>
</template>
```

`app.vue`ファイルの`NuxtWelcome`コンポーネントを`NuxtPage`に変更
```vue:app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>
```

以下の画面となればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/dff4cbaf-030d-80fa-4d4e-640c527776ef.png)

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

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

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

## Cloudflare Pages


Cloudflareにアクセスし、ログインします
左サイドバーの`Workers & Pages`の`概要`に移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/ec76f40d-3e92-72dc-5648-0e2b3e182210.png)

`アプリケーションの作成`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/efa61a3e-bcce-aec8-d011-5daf06f01230.png)

`Pages`をクリックし`Gitに接続`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/771cde9b-75dc-7779-1f7f-645f38d2e7e3.png)

アカウント接続が完了したら、今回作成したリポジトリを選択し`セットアップの開始`をクリック
![515C5215-F56B-42BE-BE4D-683AFA970066_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/d0cf6e68-c67b-afe2-b2e4-f825f2c44a32.jpeg)

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


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で選択すると自動入力してくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/61be320f-66f5-1c55-da44-e62735978c76.png)


次に進んで、CI/CDが完了すると、URLが発行されます
![E6AEC8FA-41F2-4CE6-BA2C-212E37B5FAAD_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/b36595d2-7c36-ed4a-7bc1-158ab9d439d4.jpeg)

発行されたURLに遷移すると、作成したファイルが確認できます
![2BF9D124-151E-46C9-9F65-6677B69D6E8B_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/e2d68513-fd82-2e44-d0e9-a6e285a6d506.jpeg)


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

次に`index.vue`ファイルに変更を加えます
```vue:index.vue
<template>
  <div>
    <h1>index.vueのページです</h1>
    <p>sampleブランチで変更を加えました</p>
  </div>
</template>
```

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

![AAA541E1-61EC-4E2D-BA7D-5019819F1B37_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/676a6101-e9ca-073b-dcb1-31a444c6a14f.jpeg)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/115e34f9-f6b1-113d-d922-e8752e45a835.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/cf78b3ef-2854-f1cc-7882-db93a561727b.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779963/b0156c3a-ad06-5df5-f468-c2918200a302.png)



# おわり

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

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

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