個人的備忘録：ローカル開発 (Vite) vs 本番環境 (S3 + CloudFront) の違いを自分なりにまとめてみた

Posted at 2025-02-16

はじめに

ローカル環境で動作するフロントエンドを AWS 上に移行する際には、いくつか注意点があります。

特に、S3 + CloudFront でのホスティングはローカル開発環境と異なる点が多く、事前の準備が重要です。

本記事では、ローカル開発（Vite）と本番環境（S3 + CloudFront）の違いを整理し、移行時のポイントをまとめました。

フロントエンドの AWS 環境移行について、知識が浅い状態で実施することに不安を感じました。

ローカル環境と本番環境の違いを明確に理解し、スムーズに移行できるよう備忘録として整理しました。

特に S3 + CloudFront でのルーティングやキャッシュ、CORS 設定など、重要なポイントを押さえたかったです。間違いがあれば修正したいので、認識の確認も兼ねてまとめています。

項目	ローカル開発 (Vite)	本番環境 (S3 + CloudFront)
URL	`http://localhost:5173/`	`https://honda333.blog/`
実行方法	`npm run dev` (Vite)	`npm run build` → S3 にアップロード
サーバー	Vite の開発サーバー (Vite Dev Server)	S3 + CloudFront（CDN 経由で配信）
リロード	ホットリロード (HMR) あり	ホットリロードなし（変更時はデプロイが必要）
パフォーマンス	ローカルのみ	CDN キャッシュで高速配信
CORS (クロスオリジン制約)	なし（ローカル環境）	API との通信には CORS 設定が必要
ルーティング (React Router)	`localhost` では `react-router-dom` が動作	CloudFront + S3 では `index.html` を `error_document` に設定する必要あり
環境変数	`.env.development` を使用 (`import.meta.env`)	`.env.production` を使用 (`import.meta.env`)

フロントエンドについてあまり詳しくないまま質問させていただいていますが、ローカル環境で動作しているものを AWS 上に移行する際には、バックエンドと同様にいくつか注意すべき点があると考えています。

自分なりに備忘録としてまとめてみましたので、認識として合っているかご確認いただけると幸いです。

ローカル環境では npm run dev で開発サーバーを起動できますが、本番環境では npm run build でビルドしたファイルを S3 にアップロードする必要があります。

S3 にホストする際には、index.html をデフォルトのルートオブジェクトに設定し、適切なパブリックアクセス許可を設定する必要があります。

CloudFront を利用する場合、index.html をエラーページとして設定することで React Router のルーティングが機能するようになります。

API との通信を行う場合、S3 や API Gateway 側で CORS 設定を適切に行う必要があります。

CDN キャッシュが効いているため、変更が即時反映されない場合があります。キャッシュクリアやバージョニングの工夫が必要です。

AWS へのフロントエンド移行では、ビルド方法やデプロイ手順、S3・CloudFront の設定に注意が必要です。

特に、CORS 設定や React Router のルーティング、キャッシュ管理はローカル環境とは異なる点です。

移行時に戸惑わないよう、事前に環境の違いを理解し、適切な設定を行うことが重要です。今後も AWS のフロントエンド環境について学びながら、よりスムーズな運用を目指していきます。