Cloudflareから、「pagesにデプロイしているプロジェクトをworkersに移行してね」というお知らせが来ていたので、このブログをpagesからworkersに移行させます。

前提

記事を書いている環境が、ローカルだと設定が若干異なります。

また、“Auto-delete codespace"が有効な場合、codespaceを立ち上げるたびに設定をやり直す必要があるため、必ず無効にしておいてください。

1. wranglerをcodespaceにインストール & ログイン

まず、codespaceを開きます。

ルートディレクトリで、ターミナルから以下のコマンドを実行します

1

npm install -g wrangler

インストールが完了したら、以下のコマンドを実行します

1

wrangler login

すると、ターミナルにログイン用のURLが出現するのでコピーしてブラウザに入力してください。 (Failed to openと出てきますが、気にしないでください)

ログインURLから、cloudflareの連携許可のページにリダイレクトするので、内容を読んで「allow」を選択します

許可すると、http://localhost:...から始まるページにリダイレクトされますが、アクセスできません。

これは、codespaceで実行した場合、ブラウザからcodespaceのlocalhostにはアクセスできないためです。

そこで、codespaceに戻って、「PORTS」のタブから「Forwarded Address」を確認します。

これが、codespaceのlocalhostにアクセスするためのアドレスになります。

アクセスできなかったリンクのlocalhost:8989の部分を、確認したアドレスに入れ替えて、再度エンターを押してください。

これで、無事にwranglerのログインが完了します。

workersへのデプロイを設定するために、wranglerの設定ファイルを作ります。

ルートディレクトリに戻り、以下のコマンドを実行します。

1

touch wrangler.toml

すると、wrangler.tomlという空白の設定ファイルが作成されるので、以下の内容を書き込みます。

1
2
3
4


name = "arbitaly-name"
compatibility_date = "2025-12-07"
[assets]
directory = "./public"

nameは任意に設定が可能です。わかりやすい名前をつけてください。

directoryは、hugoのビルド先のディレクトリを指定します。

デフォルトだと、publicのはずです。

書き込みが終わったら、以下のコマンドを実行してworkersへのデプロイを行なってください。

1

wrangler deploy

Cloudflareの管理画面に移動して、「Workers & Pages」を開いてください。

新しいアプリケーションとして、デプロイされているはずです。

「Workers & Pages」から、新しくデプロイしたプロジェクトを選択し、「設定」を開きます。

「ドメインとルート」の項目から、...workers.devのドメインがあることを確認します。

このドメインをブラウザで検索し、ブログが正しく表示されることを確認します。

動作に問題ないことを確認したら、「Pages」の方にデプロイしていた昔のプロジェクトを、プロジェクトごと削除します。（設定の「一般」から削除可能です）

削除したら、新しいプロジェクトの「ドメインとルート」の項目から、「追加」を選択し、「カスタムドメイン」の追加を行います。

ドメイン名は、以前使用していたものと同様のものを使ってください。（自分の場合、jintech-lab.comとwww.jintech-lab.com）

追加が完了したら、カスタムドメインをブラウザで検索し、ブログが表示されることを確認してください。

（もしかしたら、ルーティングに時間を要する可能性があるので、追加後少し時間を置いてから検証してみてください）

問題なく、ブログが表示されることを確認したら、ドメインとルートの設定から、workers.devとプレビューURLを無効にしてください。

hugoをビルドし、githubにプッシュした時に、自動的にworkersにもデプロイされるように、設定を行います。

Cloudeflareのプロジェクトの「設定」にある「ビルド」の項目に、「Githubと連携する」というような選択肢があるので、選択します。

以下のように設定します。

これで、設定は完了です。

githubにプッシュして、Workersにも反映されているか確認してください。

反映されない場合、「デプロイ」の「バージョン履歴」から、過去にデプロイの変更履歴があります。ここに、エラーログとがが残っているので、確認してみてください。

これで、Workersへの移行作業は完了です。

あとは、今まで通りCodespaceを使ってブログをビルドして、Githubにpushするだけで、勝手に公開してくれます。