Zenn
☁️

Nuxt3 SSG + Cloudflare Pagesで運用していたサイトをCloudflare Workersへ移行する

に公開
Cloudflare
Nuxt 3
tech

自作のWebサイトをCloudflare Pagesで運用していたのですが、つい先日「理由がない限りCloudflare PagesではなくCloudflare Workersを使ってください」とのお知らせがありました。

https://x.com/yusukebe/status/1917869496267915641

元々Workersにも興味があったので、これを機に移行してみることにしました。思った以上にスムーズに移行できたので、その手順を簡単にまとめておきます。

手順

自分のサイトがNuxtでSSG（静的サイト生成）されたプロジェクトなので、Nuxtにフォーカスした内容となりますが、Nuxtに限らずSSGで生成された静的サイトであれば基本的な流れは同じになるはずです。

  1. 移行ガイドに従ってwrangler.jsoncを作成する
  2. 静的サイトのデプロイコマンドを実行し、移行できているか確認

移行ガイドに従ってwrangler.jsoncを作成する

自分はPagesの運用の際にはWranglerを利用していなかったため、Wranglerのセットアップから行いました。
セットアップを含めた手順としては、以下の記事を参考に設定を行いました。
https://zenn.dev/mierune/articles/cloudflare-workers-static-spa-deploy#2.-project-への-wrangler-のセットアップ

assets.directory には、nuxt generateで生成された静的ファイルの生成先を指定します。

Nuxt3では実ファイルは.output/publicに生成されますが、distディレクトリにシンボリックリンクが作成され.output/publicを参照しているので、どちらを指定しても動きます（Nuxt2以前のツールや設定との互換を保つための仕組みのようです）。私は.output/publicを指定しました。

静的サイトのデプロイコマンドを実行し、移行できているか確認

プレビューとデプロイ用のスクリプトをpackage.jsonへ追加します。上記の手順参考記事からNuxt用のコマンドへと変更しています。

package.json
  "scripts": {
    ...
    "generate": "nuxt generate",
-   "preview": "nuxt preview",
+   "preview": "wrangler dev",
+   "deploy": "nuxt generate && wrangler deploy",
    ...
  },

あとはpnpm run deployを実行するだけです（初回はwranglerとcloudflareを連携させるためのブラウザでのログインが必要です）。

$ pnpm run deploy

> ryuhei373.dev@1.0.0 deploy /home/ryuhei373/dev/ryuhei373.dev
> nuxt generate && wrangler deploy

（略）
                                                      
✔ You can now deploy .output/public to any static hosting!                                                                                                                        nuxi  4:43:46 PM

 ⛅️ wrangler 4.14.1
-------------------

🌀 Building list of assets...

（略）

✨ Success! Uploaded 21 files (43 already uploaded) (1.54 sec)

Total Upload: 0.34 KiB / gzip: 0.23 KiB
No bindings found.
Uploaded ryuhei373 (5.52 sec)
Deployed ryuhei373 triggers (0.26 sec)
  https://ryuhei373.ryuhei-373-3.workers.dev
Current Version ID: c88f91d5-378a-4519-980b-0914e92c6838

デプロイが成功し、https://ryuhei373.ryuhei-373-3.workers.dev にアクセスしてみると期待通りサイトが表示されていました🎉

その他

ここからPages側で設定していたカスタムドメインやGitHub連携の設定をWorkers側へ移行したりしましたが、それは今回の移行においては特段特筆すべき点はないため本記事では割愛します。

また、Pagesではデフォルトで有効だったプレビュー機能は、設定の「ブランチコントロール」から「非本番ブランチのビルド」を「有効」にすることで行えるようになります。

終わりに

Workersは全く触れてきておらず移行するのに不安があったのですが、実際に移行してみたところとても簡単に終わったので、一安心とともにWorkersの色々な機能に触れてみるいい機会にもなったと思うので今後は静的サイトだけでなく有効活用していきたいと思えました。楽しい！

Discussion