AWS AmplifyからCloudflare Pagesへの移行 — Next.js APIサーバーの月額$23→$0化
Next.js製のAPIサーバーをAWS Amplify（+WAF）からCloudflare Pagesに移行し、月額約$23のコストを$0にした手順を記録します。
cloudflareawsamplifynextjsmigration
台本(フルテキスト)
動画の掛け合いを書き起こしたものです。音声を再生しづらい場合はこちらをお読みください。
オープニング
- AWS Amplify から Cloudflare Pages に移行
- 月額 $23 → $0 のコスト削減を実現
- つむぎ
- 今日はNext.js製のAPIサーバーをAWS AmplifyからCloudflare Pagesに移行して、月額コストを$23から$0にした手順を紹介します。
- そら
- AWS Amplifyのコスト内訳はどうでしたか？
- つむぎ
- AmplifyのSSRホスティングが$15、自動作成されたWAFが$8で合計約$23/月でした。無料枠が12ヶ月で切れた後の維持費ですね。
- そら
- Cloudflare Pagesを選んだ理由は何ですか？
- つむぎ
- SSRが無料、チーム利用も無料、帯域が無制限という点が決め手でした。Vercelはチーム利用が$20/ユーザー/月かかりますが、Cloudflare Pagesは無料プランで対応できます。
- そら
- 具体的な移行手順を教えてください。
@opennextjs/cloudflareのセットアップ
- @opennextjs/cloudflare で Next.js を Cloudflare 上で動かす
- wrangler.jsonc の nodejs_compat フラグが重要
- そら
- まず何をインストールするのですか？
- つむぎ
- @opennextjs/cloudflareとwranglerをインストールします。これがCloudflareでNext.jsを動かすための核心ですね。
- そら
- wrangler.jsoncの設定で重要なのは何ですか？
- つむぎ
- nodejs_compatフラグが重要です。これによってNode.jsの組み込みモジュールがCloudflare Workers上で使えるようになります。compatibility_dateは2024-09-23以降が必要です。
- そら
- next.config.jsの変更点はありますか？
- つむぎ
- output: 'standalone'はCloudflare向けでは不要なので削除します。それ以外の変更は最小限です。
Elasticsearchクライアントのfetch化
- @elastic/elasticsearch は ALPNProtocols 未実装でエラー
- fetch ベースに書き換えることで解決
- そら
- 一番大変だったハマりポイントは何ですか？
- つむぎ
- @elastic/elasticsearchパッケージはNode.jsのhttpsモジュールを使うのですが、Cloudflare WorkersのALPNProtocolsが未実装でエラーになりました。
- そら
- どう解決したのですか？
- つむぎ
- Elasticsearchクライアントをfetchベースで自前実装しました。esClient.search()のインターフェースだけ維持すれば、APIルート側の変更はほぼ不要でした。
- そら
- fetchなら動くのですね。
- つむぎ
- Cloudflare WorkersはWebのfetch APIに対応しているので、TCPを直接使わない限り多くのことができます。
Workers vs Pages のカスタムドメイン
- Workers のカスタムドメインは Cloudflare DNS ゾーンが必須
- Pages なら外部 DNS の CNAME 設定だけで OK
- そら
- WorkersとPagesの違いについて教えてください。
- つむぎ
- カスタムドメインの扱いが大きく違います。WorkersはCloudflare DNSゾーンが必須ですが、PagesはCNAME設定だけで外部DNS（Route 53やさくら等）を使い続けられます。
- そら
- 最初にWorkersでやろうとしたのですか？
- つむぎ
- そうです。最初はWorkersにデプロイしましたが、カスタムドメインにCloudflareゾーンが必要とわかってPagesに切り替えました。
- そら
- 既存のDNS環境をそのまま使いたい場合はPagesが便利なのですね。
- つむぎ
- その通りです。Route 53などで管理したままCloudflare PagesのカスタムドメインをCNAMEで追加するだけでSSL証明書も自動発行されます。
移行後の効果と移行できないケース
- コスト $23 → $0、エッジ実行で応答速度も改善
- Next.js 16 の proxy.ts には未対応（2026 年 4 月時点）
- そら
- 移行後の効果はどうでしたか？
- つむぎ
- コストは$23から$0になりました。速度も改善されて、/api/healthでTTFBが約40ミリ秒、検索APIでも240〜300ミリ秒程度です。
- そら
- なぜ速くなったのですか？
- つむぎ
- AmplifyのSSRはAWSの特定リージョンで実行されますが、Cloudflare Pagesは東京を含む世界中のエッジで実行されるので、ユーザーに近い場所でSSRが走るためです。
- そら
- 移行できないケースもあるのですか？
- つむぎ
- Next.js 16でmiddleware.tsがproxy.tsにリネームされた場合、@opennextjs/cloudflareが未対応でエラーになります。2026年4月時点での既知の問題です。
まとめ
- @opennextjs/cloudflare + Pages で月額 $0 の Next.js 運用
- TCP ベースのライブラリは fetch への書き換えが必要
- つむぎ
- まとめると、@opennextjs/cloudflareを使えばNext.jsアプリをCloudflare上で動かせます。
- そら
- @elastic/elasticsearchのようなTCPベースのライブラリは書き換えが必要なのですね。
- つむぎ
- fetchベースに書き換えることで対応できます。sharpなどのネイティブモジュールはWorkers環境では動かないので注意が必要です。
- そら
- 外部DNSを維持したい場合はPagesを選ぶのが正解ですね。
- つむぎ
- Amplifyの無料枠が切れた個人・小規模プロジェクトには、Cloudflare Pagesが有力な移行先です。
- そら
- ありがとうございました。