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バケットの作成とファイルのアップロード

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対応したホームページの公開が可能です。
カスタムドメインを使わない場合は、設定が非常にシンプルなので、まずは標準ドメインで試してみるのがおすすめです。