S3とCloudFrontでホームページを公開する方法（証明書不要でHTTPS対応）
はじめに
AWSの S3 はホームページの公開に最適で、CloudFront を組み合わせることで高速な配信とHTTPS対応が可能です。
本記事では、CloudFront標準ドメイン（*.cloudfront.net）を利用するため、証明書の設定は不要という前提で、S3とCloudFrontを使ってホームページを公開する手順を紹介します。
目次
前提条件
- AWSアカウントを持っていること
- 基本的なAWSサービスの操作ができること
サンプルファイル
本記事では、以下の「Hello World!」と表示するファイルをindex.htmlとして保存して使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
手順
1. S3バケットの作成とファイルのアップロード
- リージョンは任意ですが、東京か大阪のリージョンを選択するとよいです
- バケット名は一意である必要があります
- パブリックアクセスをすべてブロックにしてください
- 暗号化はデフォルトのまま、バケットを作成します
- バケットが作成されたので、ダブルクリックしてください
- アップロードボタンに進みます
- ファイルを追加した後に、画面に表示されます
- スクロールして、アップロードボタンを押します
- オブジェクトが作成されました！ 次にCloudFrontへと向かいます
2. CloudFrontディストリビューションの作成
- ディストリビューションを作成します。ここではグローバルリージョンのみ選択できます
- フリープランを選択してください
- Nextボタンを押して進みます
- ディストリビューション名を入力してください
- オリジンタイプはS3です。Browse S3 ボタンから先ほど作成したバケットオリジンを選択してください
- 設定はデフォルトのまま、次に進みます
- モニターモードを選択すると、ファイアーウォールが実行できなくなるので、チェックはしません
- スクロールしてディストリビューションを作成します
- オリジンが登録されたことを確認したら、「一般」タグへと進みます
- 「編集」ボタンを押してください
- デフォルトルートオブジェクトに、S3にアップロードした index.html を入力します
- スクロールして変更を保存します
- index.html が登録されたことを確認した後、ディストリビューション名をコピーします
3. 動作確認
- CloudFrontのドメイン名にアクセスして、https接続でサイトが表示されることを確認します
ポイント
- 証明書不要の理由: CloudFront標準ドメインはAWS管理の証明書でHTTPS対応済み
- セキュリティ: S3はパブリックアクセスをブロックし、OACでCloudFront経由のみアクセス可能にする
- カスタムドメインを使う場合: ACMで証明書を発行し、CloudFrontに設定する必要あり
- キャッシュ制御: 更新頻度が高い場合はキャッシュ設定を工夫する
- オリジンパス指定: 静的ファイル（HTML/CSS/JS）をフォルダごとS3にアップロードする場合は、パス設定を調整する
まとめ
S3とCloudFrontを組み合わせることで、証明書設定なしでHTTPS対応したホームページの公開が可能です。
カスタムドメインを使わない場合は、設定が非常にシンプルなので、まずは標準ドメインで試してみるのがおすすめです。