aws

【D-2】 静的Webサイト

静的Webサイトは、動的なサーバー処理を伴わず、HTML・CSS・JavaScript などのファイルを配信するサイト です。
AWS では、S3 をウェブホスティング用のストレージとして利用し、CloudFront を併用することで セキュアかつ高速にコンテンツを配信 できます。

[ 学習フェーズ ]

1. CloudFront + S3 を使う理由

  • コスト効率が良い：EC2 に比べて S3 のホスティングは低コスト。
  • スケーラビリティが高い：アクセス数が増えても自動で対応可能。
  • 高速な配信：CloudFront のキャッシュ機能により、世界中のユーザーへ低遅延で提供。
  • セキュリティが向上：S3 の公開範囲を制限し、CloudFront 経由のみで配信可能。

2. CloudFront + S3 の構成

基本構成

[ Route53 ] → [ CloudFront  ] → [ S3 (静的Webサイト) ]
  • S3 に 静的ファイル（HTML, CSS, JS, 画像） を格納。
  • CloudFront が S3 のコンテンツをキャッシュ し、高速配信。
  • S3 は直接公開せず、CloudFront 経由でのみアクセス可能にする ことでセキュリティを強化。

3. CloudFront のキャッシュの仕組み

  • CloudFront は、エッジロケーション（世界各地のデータセンター）で キャッシュ する。
  • オリジン（S3）の負荷軽減 と レスポンス速度の向上 に貢献。
  • Cache-Control ヘッダーを設定して、キャッシュの保持期間を調整可能。

[ 実践フェーズ ]

ハンズオン：CloudFront + S3 で静的Webサイトを構築

以下の手順で静的Webサイトを構築しましょう。

  1. S3の構築（静的Webサイトホスティングの設定）
  2. S3にHTMLファイルを設置（コードは任意、https://www.megapx.com/tmpl.htmlのようなサイトでは無料でダウンロードが可能です。）
  3. S3エンドポイントにてWebサイトの表示確認
  4. CloudFrontの構築
  5. CloudFrontのディストリビューション名にてWebサイトの表示確認

+α

お名前ドットコム（https://www.onamae.com/）などでドメインを購入し（無料もあり）、オリジナルのドメインで静的Webサイトを表示できるようにしてみましょう。

また、先の教材【D-9】CI/CD（静的Webサイト）でも今回の静的サイトは利用しますので、余裕のある方はコチラも実施してみましょう。