Cloudflare PagesからCloudflare Workersへ移行する

記事

当サイトにはプロモーション・広告が含まれています。

数か月前、Cloudflareのダッシュボード Workers & Pages に「Cloudflare Workersを推奨します」的な案内が出ていた（2025年11月現在は Cloudflare Pages docsの左サイドメニューの「✨Migrate to Workers」で強調されるに留まっているが）。

あるサービスが推奨されるということは、別のサービス（今回の場合はPages）は廃止に向かっている、と考えられるのはいつものことである。そこで、AstroブログをCloudflare Workersへ移行 | eiji.pageを主に参考にして、ネットの各記事を見ながらCloudflare PagesからWorkesへの移行を行った。

環境

ローカルPC：Windows11

  • Node.js：v22.20.0
  • pnpm：10.17.1

ホスティング：Cloudflare Pages

  • Framework preset: None
  • Build command: npm run build

Wrangler CLIをインストールする

Cloudflare PagesではGitHubのリポジトリをインポートするやり方でプロジェクトを作成していたが、WorkesではWrangler CLIが必須になるので、インストールされていなければ行う。参照記事でdevDependenciesにインストールとあったので、その通りにした。

devDependenciesは開発のみで利用して、本番環境へのデプロイでは不要になるパッケージ・依存関係のことである。

dependenciesとdevDependenciesの違い

pnpm add -D wrangler@latest

Wranglerでログイン

wrangler login

ブラウザで「WranglerによるCloudflareアカウントの変更許可」の確認が表示されるので、Allowを押す。

権限が付与されたので、ブラウザを閉じる。

プロジェクトファイルを作成

wrangler.jsoncファイルを作成する。

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "project-name", // Workersのプロジェクト名
  "compatibility_date": "2025-09-21", // ファイルの作成日
  "assets": {
    "directory": "./dist", 
    "not_found_handling": "404-page" // カスタムの404ページ`src/pages/404.astro`がある場合
  }
}

手動デプロイ（テスト）

手動デプロイする。

pnpm run build
pnpm exec wrangler deploy

wrangker.jsoncのnameと同じ名前のプロジェクトがWorkers & Pagesに作成される。当環境では特に何の問題もなく作成された。

ちなみに、package.jsonのscriptsは以下のように設定している。npmからpnpmに変更した際に追加した箇所以外は変更していない。

{
  ...
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    ...
  },
}

Workersの設定

作成されたプロジェクトをクリックして、Settingsへ移動

BuildのGit repositoryの「Connect」をクリックして設定を行う

  • Git configuration：アカウント・リポジトリ・ブランチをプルダウンから選択
  • Pull Request Previews：使用しないので「Disable Pull Request Previews」をクリック
  • Build & deploy commands：Wranglerで手動デプロイした時と同じコマンドを記入

「Connect」で接続する

カスタムドメインの設定

Cloudflare Pagesで使っていたカスタムドメインをWorkersの方へ変更する。

Cloudflare PagesのCustom Domainの項で設定してあったカスタムドメインを削除。DNS recordのCNAMEも削除しておく。

WorkersのSettings Domain & Routesの「＋add」をクリックして、カスタムドメインを追加する。

Custom Domain のDomainに入力すると「Clouflareは次のDNSレコードを（ドメイン名）に追加し、HTTPSを有効するために新しい証明書を規定します」とメッセージが出る。そのまま「Add Domain」で進む。

Custom Domainの欄に追加される。*workers.devドメインは使用しないので無効化する。

DNSにもWorkersタイプとして追加される。チェックボックス欄に鍵マークが表示されており、この画面からは操作できないようになっている。

GitHubからデプロイ

Cloudflare Pages側のデプロイが走らないように、Setting＞Build＞Branch controlから自動デプロイを解除しておく。

Workersのwrangker.jsoncにworkers.devを無効化する記述を追加する。

{
    ...
    "workers_dev": false
}

この記述がないと、デプロイした際にダッシュボードから設定したworkers.devの無効化設定がリセットされてしまう。

Cludflare Pages を削除して完了…のはずが

無事Workers側へデプロイできたので、不要になったPagesを削除しようとすると、「Your project has too many depolyment to be deleted…」というメッセージが出た。当ブログでは、細かい修正をしているうちにデプロイ件数が200件あまりになっていた。

Cloudflare Pages のデプロイメントを削除

デプロイ件数が100を超えていると、Pages削除をする前にデプロイメントを削除する必要がある。

削除用のスクリプトの準備

Known issuesのページからdelete-all-deployments.zipをダウンロードして解凍し、delete-all-deploymentsフォルダ内でnpm installする（pnpm installも可能）。

Cloudflare の API Token を作成

スクリプトを実行するにはCludflareのAPI TOKENが必要である。ダッシュボード My Profile＞API TOKENSからトークンを発行する。

API token templatesにCloudflare Pagesがないので、一番下のCustom tokenから作成する。

  • トークン名：任意
  • 権限：Account / Cloudflare Pages/ Edit
  • アカウントのリソース：自分のアカウントを選択
  • IPアドレスのフィルタリング：設定なし
  • TTL：1日（なくてもよいと思うが一応）

「Continue Summary」をクリックして進み、内容を確認したら「Create Token」でトークンを発行する。

トークンIDが発行されるので、コピーして控えておく。

アカウントIDを取得

Account Homeのアカウント名横の3点メニューから、アカウントIDをコピーして取得する。

スクリプト実行

CF_API_TOKEN=<YOUR_CF_API_TOKEN> CF_ACCOUNT_ID=<ACCOUNT_ID> CF_PAGES_PROJECT_NAME=<PROJECT_NAME> npm start
  • <YOUR_CF_API_TOKEN>：上記のトークンID
  • <ACCOUNT_ID>：上記のアカウントID
  • <PROJECT_NAME>：削除対象のCloudflare Pagesプロジェクト

コマンドを打つとデプロイメント削除が実行される。最新のデプロイを除いてすべて削除され、Pagesが削除可能になる。

先ほどのAPIトークンは不要になったので削除する。

その他参考ページ

☕コーヒーをおごる

Buy Me A Coffee

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

記事トップに戻る

広告