🦴

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

2025/01/14に公開


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

背景と経緯

サービス選定

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

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

実際の公開手順

アカウントID確認

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

APIトークン作成

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

  1. Create Tokenボタンを押す
  2. 一番下のCreate Custom TokenGet startedボタンを押す
    1. 名前は何でもいいので設定
    2. PermissionsAccount,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
  1. 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
  1. プロジェクトにアップロードする
    • Pagesにgit機能がありそうだが、詳しく調べていないため--commit-dirty=trueを使用
    • ビルド後に自動実行する場合はpackage.jsonscripts内に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使っていきたいと思います。

参考文献

Discussion