Cloudflare Pages でサイト公開

こんにちはー！むちょこです。

「ちょっとしたサイトなら、Cloudflare Pages を使うと楽だよ」という噂を小耳に挟みまして、早速使ってみました。
結論、コーポレートサイトくらいなら大変楽です！🙌
特に Cloudflare で DNS 管理しているなら使わない手はないです。しかも無料。

公開までの手順は次のとおりです。

1. Git リポジトリにファイルを push する

GitHub のリポジトリに HTML, CSS, JavaScriptファイルを push しておきます。
リポジトリは private/public どちらでも大丈夫です。

また、今回はルートディレクトリの名称を public とします。

2. Cloudflare Pages に静的サイトをデプロイ

サイドメニューの Compute(Workers) > Workers & Pages を開き、 Pages タブを選択します。
先ほどの GitHub のリポジトリと連携したいので「Git に接続」ボタンをクリック。

認証が済んだら、対象のリポジトリを選択して「セットアップの開始」に進みます。

フレームワークやビルドコマンドは使っていなければそれぞれ空のままで OK です。

ルートディレクトリは、今回のようにサブディレクトリ以下である場合は設定しておきます。

「保存してデプロイする」ボタンをクリックすると、デプロイが開始されます。
完了後はプレビュー用 URL が発行され、デプロイ結果が確認できます🚀

3. コードの編集

「自動デプロイ」機能を有効にしておくと、今後はリポジトリのデフォルトブランチ（通常は main ）に変更があると自動でデプロイされます。

デプロイごとに固有のサブドメインが設定されて当時の状況を振り返ることもできるので大変便利です:)

「自動デプロイ」の有効/無効は、「設定 > ビルド > ブランチコントロール」から変更可能です。

4. 独自ドメインの設定

プロトタイプならここまでで十分ですが、もちろん独自ドメインを設定して本番用にも使えます。

「カスタムドメイン」タブを開いて、「カスタムドメインを設定」ボタンをクリックします。

自分が所有しているドメインを入力してください。

Cloudflare で DNS 管理されているドメインの場合、自動で CNAME レコードを追加してくれるのでそのまま「ドメインをアクティブにする」ボタンをクリックします。

設定したドメインでアクセスできるようになりました。完成です🚀

5. ＋α（Worker と連携）

もしバックエンド処理を追加してお問い合わせフォームなどを設置したい場合は、姉妹機能である Worker を利用します。
詳しい実装方法は割愛しますが、Worker の方は Cloudflare 内に開発ツールが用意されていて、「書いて試して」がその場で何度でも行えるのが助かりました🙌