Share
Embed
Transcript
14 slides
-
02 / 自己紹介 りょうた 物流スタートアップに所属 最近はプロダクトをまるっと担当しています! AWS SAA AWS DVA
X @Ryo54388667 Zenn ryota̲09 AWS SOA JSTQB FL -
03 / 背景 App Runnerの現在のステータス Maintenance イマココ Maintenance Sunset Full
Shutdown 新規受付は 2026-04-30 で停止。 既存は継続利用可・新機能なし サポート終了日が発表される 機能停止・サポート終了 2026-03-31 AWS App Runner availability change https://docs.aws.amazon.com/apprunner/latest/dg/apprunner-availability-change.html このApp RunnerでWebサイトを動かしていた → このアナウンスを受けてサービスの移行を決定した -
04 / 移行先の選定 判断基準 規模 機能 決め手 AWS公式推奨は ECS(Express Mode)だが、
当サイトにはオーバースペック 当サイトは小規模で 動的なコンテンツは少ない OpenNextの存在 Next.jsを利用したWebサイトで 公式推奨アダプター 試算 月$32 ̶ ALBの固定費 $17.74 大部分は静的なコンテンツ → Cloudflare Workers に決定 -
05 / 移行の全体図 移行の全体像 1 2 3 4 5 バージョン選定
動かないコード の修正 OpenNextの 設定とリソース 構築 DNS移行 クリーンアップ Next.jsとOpenNext のバージョン確認 .jpはRegistrar移 管不可 -
STEP 1 / 5 バージョン選定 当サイトが使っていた Next.js 16.0.7 は、 OpenNextのどのバージョンでも非サポートだった
今回(2026年4月) 採用したバージョン [email protected] + @opennextjs/[email protected] 採用根拠 ・OpenNextのドキュメントに対応バージョンが記載されていた ・Next.jsの脆弱性報告 CVE-2026-23869対応済み 1 2 3 4 5 -
STEP 2 / 5 動かないコードの修正 当サイトの場合 1 fs.readFileSyncなどのNode.js固有のコード 2 sharp
/ plaiceholder (画像のBlur処理) 3 middlewareのAWS固有コードを削除 1 2 3 4 5 -
STEP 3 / 5 1 2 3 OpenNextの設定とリソース構築 アプリ側 インフラ側
open-next.config.ts で R2 + D1 + Durable Objects を本番のみ有効化 旧AWSリソースは削除せずに退避 後ほどクリーンアップ ISRキャッシュ / タグキャッシュ / リバリデイト Terraform removed { from = aws_apprunner_service.apprunner lifecycle { destroy = false } } 4 5 -
STEP 4 / 5 1 2 3 4 5 DNS移行
ネームサーバーの変更 契約中のドメインプロバイダー → Cloudflare NS。伝播中(数分〜最大48時間)も旧AWS側のリソースが稼働 当サイトの場合、「.jp」ドメインだったのでCloudflare Registrarに移管不可でした。 NSだけの向きのみ変更 -
STEP 5 / 5 1 2 クリーンアップ 削除順 App Runner
一時停止 WAF 削除 Route53 Zone 削除 ロールバックについて ① wrangler rollback 数秒 ② NSをRoute53へ戻す 数分〜 ③ terraform import 完全復旧 3 4 5 -
11 / 結果 コストについて 月$14 → 月$5.5 月のランニングコスト(実請求・14ヶ月分平均) 移行前 移行後
AWS (WAF等も含む) Cloudflare 毎月 $13.99 (2100円程度) 毎月 $5.50 (850円) -
12 / まとめ まとめ 1 バージョン選定 Next.jsとOpenNextのバージョンに注意 2 動かないコードの修正 Node.jsに依存したコードに注意
3 OpenNext設定とリソース構築 R2/D1/DOは本番のみ 4 DNS移行 今回はNS変更だけ 5 クリーンアップ 手順を整理しておく AWS App Runnerの移行先の候補にCloudflare Workersを選択してはどうでしょうか 詳細はZennの記事に書きました(アプリ編・インフラ編) https://zenn.dev/ryota̲09/articles/nextjs-cloudflare-workers-migration-app https://zenn.dev/ryota̲09/articles/nextjs-cloudflare-workers-migration-infra -
13 / 採用 エンジニア募集中 正社員 業務委託 「現場から商流を変える」 物流 システムのスタートアップ XのDM
X @Ryo54388667 Web canuu.jp/contact 興味のある方は、どちらからでもお気軽に一報ください