AWS EC2 + Docker構成からVercel + Cloudflareへ移行した話

目次

1. はじめに
2. 旧構成（AWS環境）
3. 新構成（Vercel + Cloudflare）
4. なぜ移行したか
5. 移行の流れ
6. まとめ

1. はじめに

このポートフォリオサイトはもともとAWS EC2にDockerを使用してデプロイ、ブログ記事はS3で管理するようにしていました。

現在はデプロイをVercelにしてブログ記事はCloudflare R2を使用して管理しています。

2. 旧構成（AWS環境）

• フロント：EC2(Docker)
• 記事：S3（Markdown + 画像）
• CDN：CloudFront

デプロイフロー

git push
↓
EC2にSSH
↓
git pull
↓
docker compose up -d

3. 新構成（Vercel + Cloudflare）

• フロント：Vercel
• 記事：Cloudflare R2（Markdown + 画像）
• CDN：Cloudflare

デプロイフロー

git push → 自動デプロイ（Vercel）

4. なぜ移行したか

💸 コスト

• AWS無料期間終了
• EC2 + CloudFront + S3で月額発生

🧠 運用コスト

• SSHしてデプロイが面倒
• サーバー死んだら対応必要

⚡ 開発体験

• Vercelはgit pushだけで完結
• previewも自動

このようなことから、無料で使用できるかつ運用も楽なサービスへ乗り換えようということでVercel+Cloudflareを選択しました。

5. 移行の流れ

① フロントをVercelへ

• Next.jsならそのまま移行可能
• 環境変数設定

② S3 → R2へ移行

• 画像・MarkdownをR2へアップロード
• URLを置き換え(※今回はカスタムドメインを使用していたため置き換え不要)

③ CDNの切り替え

• CloudFront → Cloudflare
• DNSをCloudflareへ移管

④ ドメイン設定(購入はお名前.com)

• Route53 → Cloudflare
• Vercelにドメイン紐付け

6. まとめ

今回AWSの無料期間の終了を機に、ポートフォリオサイトの移管をしてみました。

移管では以下のことを学べました。

• サイトを移管する流れや方法
• Cloudflareの使い方
• Cloudflare R2の使い方

この経験も、今後役に立つと思うのでメモ的にこのブログを残しておこうと思います。