✦

【第4回】ホームページを世界に載せる 〜Cloudflare Pages デプロイ編〜

クライマックス回

Cloudflareにドメインを預けるところまで来ました。今回はいよいよホームページ本体をCloudflareに載せて、独自ドメインで公開します。

シリーズで一番「おおっ!」と感動するタイミングです。

Cloudflare Pages とは

静的サイトや今どきのフレームワーク製サイトを無料でホスティングできるサービスです。VercelやGitHub Pagesに近い立ち位置。

特徴は、

  • 完全無料(個人利用レベルなら制限に当たらない)
  • GitHubと自動連携(pushするだけでデプロイ)
  • 全世界のCDNに自動配信(Cloudflareの網に勝手に乗る)
  • HTTPS自動化(SSL証明書を勝手に取ってくる)
  • 独自ドメインも無料

これだけ揃って無料なのが、正直ちょっとおかしい。でも本当に無料です。

事前準備

前シリーズ(または第2シリーズ)で作ったホームページが GitHub にアップロード済み であることが前提です。

まだの人は、前シリーズ第5回を参照してGitHubへのpushまで済ませておいてください。

手順1: Pagesの新規プロジェクト

  1. Cloudflareダッシュボードにログイン
  2. 左メニューの 「Workers & Pages」 をクリック
  3. 「Create」→「Pages」タブ→「Connect to Git」 を選択
  4. GitHubアカウントを連携(初回のみ認証画面が出る)

GitHub連携時、どのリポジトリへのアクセスを許可するかを選べます。対象のリポジトリ(例: myhp)だけに絞るのがオススメ。

手順2: リポジトリを選んでビルド設定

リポジトリを選ぶと、ビルド設定を聞かれます。

Next.jsの場合の設定例

項目 設定値
Framework preset Next.js
Build command npx @cloudflare/next-on-pages@latest
Build output directory .vercel/output/static
Root directory (空欄のまま)

Framework preset で「Next.js」を選ぶと、ビルドコマンドなどが自動入力されます。普通はそのままで大丈夫。

静的HTMLサイトの場合

項目 設定値
Framework preset None
Build command (空欄)
Build output directory /(または dist、public など)

手順3: 環境変数(必要なら)

APIキーや秘密情報を使うサイトなら、Environment variablesのセクションで設定。今回のシンプルなホームページなら、何もなくてOKです。

手順4: デプロイ!

「Save and Deploy」を押すと、ビルドが始まります。

ログが流れ始めて、

Cloning repository...
Installing dependencies...
Running build command...
Deploying...
✨ Success!

と進んで、3〜5分ほどで完了。あなたのプロジェクト名.pages.dev というURLが発行されます。

試しに開いてみてください。ホームページが表示されれば成功です。

手順5: 独自ドメインを紐づける(クライマックス)

ここからが本番。

  1. 作ったPagesプロジェクトを開く
  2. 上部タブの 「Custom domains」 を選択
  3. 「Set up a custom domain」
  4. 使いたいドメイン(例: example.com)を入力
  5. 「Continue」→「Activate domain」

CloudflareがDNSの設定を自動で入れてくれます。前回、ドメインをCloudflareに預けたのがここで効く。

30秒〜数分待つと、あなたの独自ドメインでホームページが開きます。

https://example.com にアクセスして、自分の作ったサイトが表示された瞬間は、本当に感動します。

www付きも使いたい

example.com と www.example.com の両方で開けるようにしたい場合。

  1. Custom domains で、今度は www.example.com を追加
  2. 自動でDNSが設定される
  3. どちらでアクセスしても同じサイトが表示されるようになる

どちらを正とするかは統一したほうがSEO的にも良いので、Cloudflareの Page Rules で「www付きは www なしにリダイレクトする」みたいな設定をするのが定番(これは第5回で)。

これからの更新ワークフロー

一度セットアップしてしまえば、更新は本当に楽。

  1. スマホでコードを編集(Claude Codeに指示)
  2. git push
  3. Cloudflare Pagesが自動で検知してビルド&デプロイ
  4. 数分後、独自ドメインのサイトに反映

pushから公開まで数分で完結する。この気持ちよさを一度味わうと戻れません。

つまずきポイント

  • ビルドが失敗する: ログを最後までスクロールしてエラー箇所を特定。Claude Codeにログ貼ると一発で原因が出る
  • 「DNS record already exists」エラー: 既存のDNSレコードと重複してる。Cloudflare の DNSタブで古いレコードを削除
  • 独自ドメインでアクセスできない: 反映待ちの可能性。5〜10分待って再挑戦
  • Node.jsのバージョンエラー: 環境変数で NODE_VERSION = 20 などを指定すると解決することが多い

次回予告

最終回は、Cloudflareの便利機能を使い倒す回。

  • 自動で付いてるSSL/HTTPSの話
  • 表示を爆速にするキャッシュ設定
  • 怪しいアクセスを弾くセキュリティ機能
  • アクセス解析(Google Analytics要らず)
  • Page Rulesでリダイレクト

ここまでやって、ようやくCloudflareの真のポテンシャルが引き出せます。

続く。