Cloudflare Pages で自動デプロイ、アクセス解析付きの Web サイトを公開しよう

## はじめに

2/10 のイベントに先駆けて、社内で開催する Cloudflare 勉強会のための資料です

https://cfm-cts.connpass.com/event/307368/

前回の記事で Cloudflare のアカウントを作りました

https://qiita.com/RyoWakabayashi/items/bd9a96290758e11883e8

今回の記事では Cloudflare Pages で Web サイトを公開します

## Cloudflare Pages とは

https://www.cloudflare.com/ja-jp/developer-platform/pages/

> フロントエンド開発者のためのフルスタックプラットフォーム

Cloudflare Pages では、 GitHub のリポジトリーを指定することで Web サイトを自動デプロイできます

実装から公開、運用まで、細かいことを考えずにフロントエンドが作れてしまうプラットフォームになっています

アジリティー（機敏性）が求められる昨今、アイデアを思いついてから公開するまでの速さが命と言っても過言ではありません

また、フィードバックを受けてからの対応速度も必要です

フロントエンドに必要な全てをすぐに用意できる Cloudflare Pages は、まさに今求められるプラットフォームと言えるでしょう

## 事前準備

公開する Web サイトのコードを準備します

今回は簡便のため、既存の Git リポジトリーを Fork （コピー）して使います

以下のリンクを開いてください

https://github.com/RyoWakabayashi/hello_web

右上の方にある「Fork」をクリックします

![スクリーンショット 2024-02-01 22.56.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9d0ab021-d0d7-2ac3-630b-a1505cc8f023.png)

「Owner」に自分の GitHub リポジトリーを選択し、右下「Create fork」をクリックします

![スクリーンショット 2024-02-01 22.57.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/825e997d-672d-ffb1-09cf-9bce518094ca.png)

自分の GitHub アカウント内にリポジトリーのコピーが作成されました

リポジトリー内の index.html を開いてみましょう

![スクリーンショット 2024-02-02 16.11.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/00a7036b-b94a-bdad-3c60-6e591e4d1909.png)

単純に「Hello, World」と表示するだけのページになっています

## Pages を始めましょう

### ログイン

前回の記事にも書いた通り、 Cloudflare Pages はクレジットカード登録不要の Free プランで無料から使えます

Cloudflare にログインして、 Pages を始めましょう

https://dash.cloudflare.com/

ログインしたら、ホーム画面（ダッシュボード）が表示されます

![スクリーンショット 2024-02-01 22.46.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/13590e86-d49b-3410-470e-2d72a5491a30.png)

:::note info
英語表示になっている場合、右上で言語を日本語に設定しましょう
:::

### セットアップ

左メニューから「Workers & Pages」をクリックして「Workers & Pages を始めましょう」というページに遷移します
「Workers」「Pages」と並んでいるタブのうち、「Pages」をクリックします
「Git に接続」をクリックしてください

![スクリーンショット 2024-01-26 17.14.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/89663195-c92b-0a28-96f5-facd873e388f.png)

「アカウントからサイトをデプロイする」という画面に遷移します
「GitHUb に接続」をクリックします

![スクリーンショット 2024-01-26 17.15.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/26253446-c1a6-1ff3-20bf-dd73769a0f6b.png)

GitHub の認証後、権限設定の画面が表示されます
「All repositories」もしくは「Only select repositories」を選択し、「Save」をクリックします

:::note warn
「Save」が非活性でクリックできない場合、ラジオボタンを選択し直すと活性化されます
:::

![スクリーンショット 2024-01-26 17.17.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f8ab3c19-e018-c93c-558a-ba3da68ae294.png)

GitHub リポジトリーの選択画面に遷移するので、 Fork しておいたリポジトリーを選択し、「セットアップの開始」をクリックします

![スクリーンショット 2024-01-26 17.19.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9bbd7412-e7a7-298b-919a-b42a87337a72.png)

「ビルドとデプロイのセットアップ」画面が開きます
プロジェクト名には他の人と重複しないような名前を入力してください
ブランチやフレームワーク、ビルドコマンド、環境変数等、より詳細な設定も可能です

今回は素の HTML なので、何も変更せず「保存してデプロイする」をクリックします

![スクリーンショット 2024-01-26 17.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/8ebebb74-6055-1478-95e6-a1c55a577f26.png)

初回のビルドが開始され、ビルド状況、デプロイ状況がログに表示されます

デプロイが完了したら「プロジェクトに進む」をクリックします

![スクリーンショット 2024-01-26 17.22.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a760309c-2132-66c3-80f2-59334edd9aa4.png)

プロジェクトのページに「最初の展開が完了しました。」と表示されています
中段にある「ドメイン」の右にリンクがあるので、クリックして開きます

![スクリーンショット 2024-01-26 17.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/74c46f7b-3044-bf9a-9c8a-e02daba4b0e5.png)

GitHub リポジトリーに用意しておいた index.html がそのまま表示されました

![スクリーンショット 2024-01-26 17.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/39605521-1185-cebb-9f7e-61854add66d6.png)

### リポジトリーの更新

GitHub のリポジトリーで index.html を開き、右上の鉛筆アイコンをクリックします

![スクリーンショット 2024-02-02 16.14.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/22b43e06-624b-4947-8cc0-640be0834449.png)

編集モードになるので、適当に一部を変更してから「Commit changes...」をクリックします

![スクリーンショット 2024-02-02 16.15.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0aca5685-e3cf-a673-6864-1640e1d02007.png)

コミットメッセージを適当に入力して「Commit changes」をクリックします

![スクリーンショット 2024-02-02 16.16.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/fd29c58a-0ce7-f886-25ae-f3379ca5f36e.png)

この状態で Cloudflare のプロジェクトページを開くと、デプロイが1件増えています

![スクリーンショット 2024-02-02 16.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/1c156747-4422-ec90-a2b4-3a7a6c1bf390.png)

デプロイしたページを開くと、変更が反映されたことを確認できます

![スクリーンショット 2024-02-02 16.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c9916357-8abc-9705-e978-e638596e5945.png)

各デプロイの「詳細を表示」をクリックすると、デプロイのログを確認できます

![スクリーンショット 2024-02-02 16.22.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/e386012e-6040-e264-8378-b0aa51caf297.png)

## アクセス解析の追加

Cloudflare では無料でアクセス解析ができるようになっています

https://www.cloudflare.com/ja-jp/web-analytics/

プロジェクトページの「設定」タブを開きます
下の方にある「Web Analitics を有効にする」をクリックしてください

![スクリーンショット 2024-01-26 17.40.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2e81ce70-a725-9ab9-b1ee-013de3044288.png)

デプロイした Web サイトのアクセス状況が確認できるようになります

![スクリーンショット 2024-02-02 16.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/42dd298d-838c-6324-4fce-beec77e736ec.png)

## ドメインの設定

Cloudflare ではドメインを登録することもできます

:::note info
有料なのでクレジットカードの登録が必要です
:::

https://www.cloudflare.com/ja-jp/products/registrar/

プロジェクトにカスタムドメインを指定することも可能です

## Vue を使った Web サイトのデプロイ

公式ドキュメントに従って、 Vue を使った Web サイトをデプロイしてみましょう

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

### Vue プロジェクトの作成

:::note warn
Node.js と Git CLI が必要です

必要な環境がローカルにない場合、ここは見るだけにしてください
:::

任意のディレクトリー内で以下のコマンドを実行します

```sh
npm create cloudflare@latest my-vue-app -- --framework=vue
```

以下のように訊かれるので、そのまま Enter を押します

```sh
Need to install the following packages:
create-cloudflare@2.11.0
Ok to proceed? (y)
```

こちらの質問もそのまま Enter を押します

```sh
Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y)
```

以降の質問は適当に答えてください

```sh
Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
```

Git の質問は Yes にしてください

```sh
├ Do you want to use git for version control?
│ yes git
```

デプロイするか聞かれるので No を選択します

```sh
├ Do you want to deploy your application?
│ no deploy via `npm run pages:deploy`
```

プロジェクトの作成が完了します

```sh
├  APPLICATION CREATED  Deploy your application with npm run pages:deploy
│
│ Navigate to the new directory cd my-vue-app
│ Run the development server npm run pages:dev
│ Deploy your application npm run pages:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!
```

起動してみましょう

```sh
cd my-vue-app
npm run dev
```

ローカルホストで Vue のサンプルページが起動しました

![スクリーンショット 2024-02-02 17.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/29e2ae0b-4aa3-61bc-6b0c-c293e2529e63.png)

### GitHub 連携

以下のリンクから GitHub に新しいリポジトリーを作成します

https://repo.new

Repository name に任意を名前を入力して「Create repository」をクリックしてください

![スクリーンショット 2024-02-02 17.03.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/996eb9c2-7605-691f-72b0-7a4a0c6fc758.png)

空のリポジトリーが作成されます

![スクリーンショット 2024-02-02 17.04.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/52dc6fc0-f602-1dd3-96bf-24a2a3f09c53.png)

ローカルの Vue プロジェクトを GitHub のリポジトリーにプッシュします

```sh
git remote add origin https://github.com/<GitHubユーザー名>/<リポジトリー名>
git branch -M main
git push -u origin main
```

プッシュ完了後、 GitHub のリポジトリーを再読込すると、 Vue プロジェクトのソースが入っています

![スクリーンショット 2024-02-02 17.05.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/92478ecf-8186-008f-f81d-6da016510172.png)

Cloudflare の Workers & Pages のページから「アプリケーションの作成」をクリックします

![スクリーンショット 2024-02-02 17.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/bb235390-58b4-0af6-f476-01a7025b1200.png)

最初の Web サイトと同じように GitHub のリポジトリーを選択します

「ビルドとデプロイのセットアップ」画面でプロジェクト名を入力し、フレームワークに「Vue」を選択してください

![スクリーンショット 2024-02-02 17.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/14d98cdb-8998-fd41-1c2a-e5baa82852bd.png)

デプロイしてしばらくすると、指定したプロジェクト名のドメインに Web サイトが表示されます

![スクリーンショット 2024-02-02 17.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/23c7bda8-8a37-aac5-260a-a684d0fbdd8a.png)

## まとめ

Cloudflare Pages を使うことで、簡単に無料で Web サイトを公開できました

自動デプロイも付いてくるので、その後の運用も非常に楽になります