Webサイト公開の第一歩！S3とCloudFrontで作る高速静的コンテンツ配信
こんにちは！現役エンジニアのakrです。
「【AWSプロフェッショナルへの道】現役エンジニアが贈るクラウド実践ガイド」の第4回へようこそ！前回は、AWSの仮想サーバーであるEC2を起動し、Webサーバーを構築する基本的なステップを学びましたね。
今回は、もっと手軽に、しかも高速かつ高可用性、低コストでWebサイトを公開する方法を紹介します。それが、S3 (Amazon Simple Storage Service) とCloudFront (Amazon CloudFront) を組み合わせた静的コンテンツ配信です。
「サーバー管理はちょっと複雑...」と感じる方もいるかもしれません。でも大丈夫。この方法はEC2のようなサーバーインスタンスを管理する必要がなく、まさに「サーバレス」でWebサイトを公開できます。本記事では、S3での静的Webサイトホスティングから、CloudFrontでの高速配信設定までを、実践的に解説していきます！
1. 静的Webサイトとは？なぜS3とCloudFrontが最適なのか？
Webサイトには大きく分けて「静的Webサイト」と「動的Webサイト」があります。
-
静的Webサイト:
- HTML、CSS、JavaScript、画像ファイルなど、事前に作成されたファイル群をそのまま表示するWebサイトです。
- ユーザーのリクエスト内容によって表示が変わることはありません。
- 例: 企業紹介ページ、ポートフォリオサイト、ブログ（一部）、LP（ランディングページ）など。
-
動的Webサイト:
- サーバーサイドのプログラム（PHP, Python, Javaなど）やデータベースと連携し、ユーザーのリクエストに応じてコンテンツを生成して表示するWebサイトです。
- 例: ECサイト、SNS、会員制サイト、管理画面など。
S3とCloudFrontが静的Webサイトに最適な理由
-
S3 (Amazon Simple Storage Service):
- 高い耐久性と可用性: ファイルはAWSの複数のデバイスに自動的に複製され、99.999999999% (イレブンナイン) という驚異的な耐久性を誇ります。データ消失の心配がほぼありません。
- 無限のストレージ容量: ストレージ容量を気にすることなく、ファイルを保存できます。
- 低コスト: 使った分だけ課金されるシンプルな料金体系で、非常に安価に利用できます。
- 静的Webサイトホスティング機能: S3バケットをWebサイトとして公開する機能が標準で備わっています。サーバーを立てる必要がありません。
-
CloudFront (Amazon CloudFront):
- CDN (Content Delivery Network) サービスです。ユーザーに最も近い「エッジロケーション」と呼ばれる世界中のデータセンターからコンテンツを配信します。
- 高速配信: ユーザーからのリクエストがエッジロケーションで処理されるため、オリジンサーバー（ここではS3）へのアクセスが減り、コンテンツの読み込みが高速化されます。
- セキュリティ強化: DDoS攻撃対策やSSL/TLSによる暗号化通信を容易に実現できます。
- コスト削減: S3へのアクセスを減らすことで、データ転送コストを抑える効果も期待できます。
この組み合わせにより、サーバー管理不要、超高速、高耐久、低コストという、静的Webサイトにとって理想的な公開環境が実現できるのです。
2. S3で静的Webサイトをホスティングする準備
まずは、S3バケットを作成し、静的Webサイトをホスティングするための設定を行いましょう。
2.1. Webサイト用ファイルの準備
事前に以下の簡単なHTMLファイルを準備しておきましょう。
index.html (ウェブサイトのトップページ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My S3 Static Website</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f0f8ff; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>Welcome to My AWS S3 Static Website!</h1>
<p>This is a simple website hosted on Amazon S3 and delivered via CloudFront.</p>
<img src="aws-logo.png" alt="AWS Logo" width="200">
<p>Learn more about AWS from our <a href="about.html">about page</a>.</p>
</body>
</html>
about.html (アバウトページ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About This Site</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f0f8ff; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>About This Site</h1>
<p>This website is part of the AWS Professional Guide series.</p>
<p>We are learning how to host static websites using S3 and CloudFront.</p>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>
aws-logo.png (お好みのAWSロゴ画像など)
※画像は適当なものを準備してください。
これらのファイルをまとめて、後でS3にアップロードします。
2.2. S3バケットの作成
- AWSマネジメントコンソールにサインインし、「S3」サービスに移動します。
- 「バケットを作成」をクリックします。
-
AWSリージョン: Webサイトを公開するリージョンを選択します。ユーザーからのアクセス元に地理的に近いリージョンを選ぶと、レイテンシーが低減されますが、今回は学習目的なので任意のリージョンで構いません。（例: 東京
ap-northeast-1） -
バケット名: 公開するドメイン名（例:
my-static-website.com）と同じにするのが一般的ですが、今回は任意のユニークな名前にします。（例:my-qiita-static-website-20250718のように、他と重複しないユニークな名前）- 重要: バケット名はグローバルでユニークである必要があります。
- オブジェクト所有者: デフォルトの「ACLs 無効化 (推奨)」のままでOKです。
-
このバケットのブロックパブリックアクセス設定: すべてのパブリックアクセスをブロックするのチェックを外します。
- 警告: 通常、S3バケットへのパブリックアクセスはセキュリティリスクを伴います。しかし、静的Webサイトホスティングでは公開が目的のため、一時的にブロックを解除します。ただし、後述するCloudFrontを使う場合は、この設定をブロックしたままにすることも可能です（より推奨される方法）。今回はS3単体でのホスティングも試すため、一旦解除します。
- チェックを外すと警告が表示されるので、確認してチェックを入れて続行します。
- その他の設定はデフォルトのままで「バケットを作成」をクリック。
2.3. Webサイトファイルのアップロード
作成したS3バケット内に、先ほど準備したindex.html、about.html、aws-logo.pngをアップロードします。
- 作成したバケット (
my-qiita-static-website-20250718など) をクリックします。 - 「アップロード」をクリックし、ファイルをドラッグ＆ドロップするか、「ファイルを追加」で選択します。
- 「アップロード」をクリックして、ファイルをバケットに格納します。
2.4. バケットポリシーの設定
アップロードしたファイルにインターネットからアクセスできるように、バケットポリシーを設定します。
-
バケットの画面で「アクセス許可」タブをクリックします。
-
「バケットポリシー」セクションの「編集」をクリックします。
-
以下のJSONポリシーをコピー＆ペーストし、
"Resource"のYOUR_BUCKET_NAMEの部分をあなたのバケット名に置き換えます。{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*" } ] }このポリシーは、「すべてのユーザー（
"Principal": "*"）が、このバケット内のすべてのオブジェクト（"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"）を読み取り（"Action": "s3:GetObject"）することを許可する」という意味です。 -
「変更を保存」をクリックします。
2.5. 静的Webサイトホスティングの有効化
- バケットの画面で「プロパティ」タブをクリックします。
- 一番下までスクロールし、「静的ウェブサイトホスティング」セクションの「編集」をクリックします。
- 「静的ウェブサイトホスティング」を「有効にする」に設定します。
-
インデックスドキュメント:
index.html -
エラードキュメント: (任意)
error.htmlなど、エラー時に表示するファイルを指定できます。今回は空欄でOKです。 - 「変更を保存」をクリックします。
設定が完了すると、「静的ウェブサイトホスティング」セクションにバケットウェブサイトエンドポイントのURLが表示されます。
例: http://my-qiita-static-website-20250718.s3-website-ap-northeast-1.amazonaws.com
このURLにアクセスすると、作成したWebサイトが表示されるはずです。S3単体でも簡単にWebサイトが公開できましたね！
3. CloudFrontでコンテンツを高速配信する
S3単体でもWebサイトは公開できますが、パフォーマンスとセキュリティをさらに向上させるために、CloudFrontを導入しましょう。
3.1. CloudFrontディストリビューションの作成
- AWSマネジメントコンソールにサインインし、「CloudFront」サービスに移動します。
- 「CloudFrontディストリビューションを作成」をクリックします。
-
オリジンドメイン: テキストボックスをクリックし、S3バケットのWebサイトエンドポイントURL（例:
my-qiita-static-website-20250718.s3-website-ap-northeast-1.amazonaws.com）を選択します。S3バケット自体（バケット名.s3.amazonaws.com）ではないので注意してください。 -
S3バケットアクセス:
- 推奨: 「はい、OAI (Origin Access Identity) を使用」を選択します。これは、CloudFront経由でのみS3バケットへのアクセスを許可し、S3のパブリックアクセスをブロックしたままにできる、よりセキュアな設定です。
- 「新しいOAIを作成」をクリックし、自動生成される名前で作成します。
- 「バケットポリシーを更新」を「はい、バケットポリシーを更新します」に設定します。これにより、S3バケットにCloudFrontからのアクセスを許可するポリシーが自動的に追加されます。
-
デフォルトのキャッシュビヘイビア:
- Viewer Protocol Policy: 「Redirect HTTP to HTTPS」（HTTPでのアクセスをHTTPSに自動的にリダイレクト）を選択します。セキュリティ強化のためHTTPSを推奨します。
- Allowed HTTP methods: 「GET, HEAD, OPTIONS」
- Cache policy: 「CachingOptimized」
- ウェブアプリケーションファイアウォール (WAF): デフォルトの「WAFセキュリティ保護を有効にしない」のままでOKです。後から設定することも可能です。
-
代替ドメイン名 (CNAME) - オプション: 独自ドメイン (
www.yourdomain.comなど) を使用する場合はここで設定します。今回は省略します。 -
デフォルトルートオブジェクト:
index.html - その他はデフォルト設定のままで、「ディストリビューションを作成」をクリックします。
CloudFrontディストリビューションの作成とデプロイには、通常10分〜20分ほど時間がかかります。ステータスが「デプロイ済み」になるまで待ちましょう。
3.2. CloudFrontでWebサイトにアクセスしてみよう
デプロイが完了したら、CloudFrontが割り当てたドメイン名（例: dxxxxxxxxxxxx.cloudfront.net）を使ってWebサイトにアクセスしてみましょう。
- CloudFrontコンソールで、作成したディストリビューションを選択します。
- 「ディストリビューションドメイン名」に表示されているURLをコピーし、Webブラウザで開きます。
S3に直接アクセスするよりも高速にコンテンツが表示され、HTTPSでのアクセスになっていることが確認できるはずです！
4. 独自ドメインの利用 (Route 53との連携)
Webサイトを公開するなら、もちろん独自ドメインを使いたいですよね。AWSのDNSサービスであるRoute 53を使うと、CloudFrontと簡単に連携できます。
- 独自ドメインの取得: まずは、Route 53または他のドメインレジストラで独自ドメインを取得します。
- Route 53にホストゾーンを作成: 取得したドメインのホストゾーンをRoute 53に作成し、ネームサーバーをドメインレジストラに設定します。
-
ACM (AWS Certificate Manager) でSSL/TLS証明書を発行: HTTPS通信を有効にするため、CloudFrontが利用するSSL/TLS証明書をACMで発行します。リージョンは必ず
バージニア北部 (us-east-1)で発行してください（CloudFrontがこのリージョンの証明書しか利用できないため）。 -
CloudFrontディストリビューションの編集:
- 代替ドメイン名 (CNAME) に独自ドメインを追加します。
- カスタムSSL証明書にACMで発行した証明書を選択します。
-
Route 53でAレコード (Alias) を設定:
- 作成したホストゾーンで、AレコードまたはAAAAレコードを作成します。
- 「エイリアス」を有効にし、ターゲットにCloudFrontディストリビューションを選択します。
これにより、https://yourdomain.com のような独自ドメインで、セキュアかつ高速なWebサイトにアクセスできるようになります。
5. 静的コンテンツ配信のベストプラクティス
- S3のアクセス制限: CloudFrontを使用する場合は、S3バケットのブロックパブリックアクセスを有効にしたまま、OAI (Origin Access Identity) を使ってCloudFrontからのアクセスのみを許可するように設定するのがベストプラティスです。これにより、S3バケットへの直接アクセスを防ぎ、セキュリティを強化できます。
-
キャッシュ制御: CloudFrontはコンテンツをキャッシュすることで高速化します。
Cache-Controlヘッダーなどを使って、コンテンツのキャッシュ期間を適切に設定しましょう。 -
エラーページのカスタマイズ: S3の静的Webサイトホスティング設定で、
error.htmlなどのエラーページを設定しておくと、ユーザーフレンドリーなエラー表示が可能です。 - デプロイの自動化: CI/CDパイプライン（例: GitHub ActionsやAWS CodePipeline）を使って、コンテンツの更新を自動化すると、運用が非常に楽になります。
- コスト最適化: CloudFrontの料金はデータ転送量に基づいて課金されます。キャッシュが効果的に機能することで、S3からのデータ転送量が減り、結果的にコスト削減にも繋がります。
まとめ
今回はAWSのS3とCloudFrontを組み合わせて、静的Webサイトを高速かつセキュアに配信する方法を学びました。
- S3は、高い耐久性と無限の容量を持つオブジェクトストレージで、静的Webサイトホスティングに最適です。
- CloudFrontは、S3をオリジンとするCDNとして機能し、世界中のエッジロケーションからコンテンツを高速配信します。
- 実際にS3バケットの作成、ファイルアップロード、バケットポリシー、静的Webサイトホスティングの設定を行い、S3単体での公開を試しました。
- さらに、CloudFrontディストリビューションを作成し、OAIを利用したセキュアな配信を実現しました。
EC2などのサーバー管理が不要で、かつ高可用性とスケーラビリティに優れているため、ランディングページや企業サイト、簡単なブログなど、動的な処理が不要なWebサイトには最適な構成です。ぜひご自身のWebサイト公開にチャレンジしてみてください！
この記事が皆さんのAWS学習の一助となれば幸いです。
もしこの記事が役に立ったと感じたら、ぜひ「いいね」👍をお願いします！励みになります！