Cloudflare Pagesとwranglerを使ってWebサイトを公開したメモ

以下の経緯により極低コストでウェブサイトを公開する良い手段がないか模索したところ、色々サービスがありましたがCloudflare Pagesを使用することにしました。ビルドは自分の計算資源を使用したかったのでGitHub連携せず直接アップロードする方法を使用しています。それまでの経緯と設定等の備忘メモです。

(2025-09-02追記)
この記事が参考にされていることがあるようですが、Cloudflare Pagesは廃止の方向でWorkers(Static Assets)に統合されていくようです。そのため、今から公開する場合はこっちの記事も参考にした方がいいかもしれません。

背景と経緯

• Cloudflare Tunnelと自宅のラズパイ上でAxumを使って小さなウェブサイトを公開していた
• サイト更新のタイミングでラズパイの諸々をアップデート
• アップデート後の再起動で起動しなくなる
• 色々調査したところ起動SSDを接続していたUSBポートが使用不能になっていた
  • 原因究明にかける労力に見合う対価は無いと判断したため詳細は不明
    • USBメモリブートしたRaspiは USBエラーで巻き込み死亡する
    • Raspberry Pi 4B - reboot process stops during Upgrade from FreeBSD 14.0-RELEASE-p8 to 14.1-RELEASE-p2 (with mountroot: mmcsd0 error 19). Please help.
• ケース形状から別ポートに接続するのも面倒なのでラズパイ運用を断念
• 趣味レベルで初期コストをかけたくないため、代替案としてサービスを使用することにした
  • 技術的な事以外の運用上の外因リスク(価格等)が増えるためあまり使いたくなかった

サービス選定

GitHubやVercel,Netlify等色々あるが、あまり比較していない。以下要因により自動的にCloudflareのPagesになった。

• (基本要件) 無料で静的サイトを公開可能
• (基本要件) GitHub連携せず静的サイトを直接アップロード可能
• 独自ドメインをCloudflareで管理している
• 今のところそんなに高度な連携等をする予定はない
• Workers連携があるので将来的な拡張性も他と同等程度な気がした
• ドメイン取得時にクレカを登録しており最悪何らかの支払いも可能
  • クレカ情報を色々な場所に登録したくない

実際の公開手順

アカウントID確認

公式の手順に従いIDを確認・メモする。

APIトークン作成

公式の手順に従いUser API Tokensの画面を開き、以下操作で作成・メモする。

1. Create Tokenボタンを押す
2. 一番下のCreate Custom TokenでGet startedボタンを押す
   1. 名前は何でもいいので設定
   2. PermissionsでAccount,Cloudflare Pages,Editを選択する
   3. Account Resourcesで対象のアカウントを選択する
   4. Client IP Address Filteringでフィルタすると少し安心
      • xxx.xxx.0.0/16のように範囲指定可能
   5. フィルタしない場合はTTLで有効期限を設定した方がいい気がする
3. 次の画面でしかトークンは表示されないので閉じないよう注意する

wrangler設定

1. ウェブサイトのプロジェクトディレクトリに以下.envファイルを作成する

.env

CLOUDFLARE_ACCOUNT_ID=your_account_id_confirmed_above
CLOUDFLARE_API_TOKEN=api_token_created_above

2. wranglerをインストールする

npm install wrangler --save-dev
npx wrangler --version

Pagesへアップロード

1. 初回の場合、Pagesプロジェクトを作成する
   • 標準ではproject-name.pages.devで公開される
   • プロジェクト名の制約: Project names can be 1-58 lowercase characters with dashes, but cannot start/end with a dash

npx wrangler pages project create project-name --production-branch main

2. プロジェクトにアップロードする
   • Pagesにgit機能がありそうだが、詳しく調べていないため--commit-dirty=trueを使用
   • ビルド後に自動実行する場合はpackage.jsonのscripts内にpostbuildを作成し指定

npx wrangler pages deploy ./build --project-name project-name --branch main --commit-dirty=true

独自ドメイン設定

1. CloudflareダッシュボードからWorkers & Pagesを開き、対象プロジェクトを選択
2. Custom domainsタブを選択し、設定したいドメインを入力後Activate domain
3. 適用に最大48時間かかると表示されるが、今回は数分でアクティブになった

所感

Cloudflare Pagesは非常に簡単に公開できて良いですね。ただ自分でAxum使って色々したかったのができないのだけ心残りです。Workersを使うにもWASM化しないといけませんし。しょうがないのでそれ以外でRust使っていきたいと思います。

参考文献

• Create API token
• Find zone and account IDs
• Install/Update Wrangler
• project create
• deploy
• Cloudflare Pagesのダイレクトアップロードでビルド済みの静的サイトをそのままデプロイする
• APNIC
• IPアドレス一覧【whoisサーバ一覧】
• サブネットマスク計算（IPv4)