はじめに
AWS を学習していると、S3 × CloudFront による静的コンテンツ配信はほぼ必ず目にする構成です。一方で、
・設定手順は知っているけど、なぜそれで表示できるのか分からない
・「無料枠」「課金」という言葉が出てきて不安になる
・結局どこまで設定すれば動くのか、全体像が掴めない
そんなモヤっとした感覚を持ったことはないでしょうか。本記事では、S3 と CloudFront を使った 静的コンテンツ配信の最小構成 を、AWS コンソール操作だけで「実際に動かしながら」確認していきます。
■ 対象読者
・AWS 初学者〜基礎を復習したい方
・S3 や CloudFront の名前は聞いたことがあるが、使ったことがない方
・静的サイト配信の仕組みを実体験ベースで理解したい方
■ 実行環境
・AWS マネジメントコンソール
・リージョン：ap-northeast-1（東京）
■ 料金について
本手順では S3、CloudFront の無料利用枠を前提としています。静的 HTML を確認する程度のアクセスであれば、ほぼ無料〜数円レベルで試すことが可能です。「知らないうちに料金が増えるのでは？」という不安がある方でも、安心して試せる構成になっています
S3バケットの作成
すべてデフォルト設定でS3バケットを作成する。
ここでは「croudfront-sample-bucket」というバケットを作成。
index.htmlの作成
以下index.htmlを作成し、作成したS3バケットへアップロードする
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>S3 + CloudFront Demo</title>
</head>
<body>
<h1>Hello CloudFront!</h1>
<p>This content is served from S3 via CloudFront.</p>
</body>
</html>アップロード後↓
CloudFrontのディストリビューション作成
以下の通りCloudFrontのディストリビューションを作成する。
————————————————————————————————————————-
step1:
無料枠をチェック
step2:
Distribution name：sample
Distribution type：Single website or app(デフォルト)
step3:
Origin type：AmazonS3
S3 origin：{自分の作成したS3バケットを選択}
Allow private S3 bucket access to CloudFront：☑
オリジン設定：Use recommended origin settings
Cache settings：Use recommended cache settings tailored to serving S3 content
step4:
セキュリティ保護を有効にする：☑
step5:
「Create distribution」をクリック
————————————————————————————————————————-
作成後↓(最終変更日が”デプロイ”となっているが、しばらく待つと日付が表示されるようになる。)
アクセス確認
{ディストリビューションドメイン名に記載されているドメイン名}/index.html でブラウザでアクセスすると、以下のようにS3のhtmlが表示されていることが確認できる。
アクセス後↓
ここまで確認できたら完了です。
料金の課金を防ぐために作成したS3バケットとCloudFrontのディストリビューションは忘れずに削除してください。
おわりに
今回は、S3 と CloudFront を使った静的コンテンツ配信を、できるだけシンプルな構成で実際に動かしてみました。「設定項目は多いけど、やっていることは意外とシンプル」と感じた方も多いのではないでしょうか。この構成を一度体験しておくと、
・なぜ CloudFront を挟むのか
・S3 を直接公開しない理由
・バックエンド API と組み合わせた構成のイメージ
といった部分が、点ではなく線で繋がるようになります。
次のステップとしては、
・独自ドメイン + HTTPS（Route53 / ACM）
・HTML / JS を CloudFront、API を ALB 説明する構成
・CloudFront のキャッシュ動作や無効化の挙動
などに進むと、より実務で使える知識になります。本記事が「とりあえず動かしてみた最初の一歩」になれば幸いです。今後も、AWS を 小さく作って・動かして・理解する 記事を更新していく予定なので、よければ他の記事ものぞいてみてください。
コメント