AWS S3 + CloudFrontで静的サイトを公開する方法【実体験ありで解説】

この記事でわかること

この記事では、AWS S3とCloudFrontを使って静的サイトを公開する手順を、実際にwabi-motion.comを構築したインフラエンジニアが解説します。

• S3バケットの作成・設定方法
• CloudFrontのOAC設定方法
• Route53でのドメイン紐づけ
• ACMでのSSL証明書取得
• 実際にハマったポイントと解決策

「AWSで自分のサイトを公開したい」「S3とCloudFrontの連携方法を知りたい」という方に向けた内容です。

構成の全体像

今回構築する構成は以下の通りです。

ユーザー
　↓
Route53（ドメイン解決）
　↓
CloudFront（CDN・SSL終端）
　↓
S3バケット（静的ファイル配信）

この構成のメリットは3つあります。

① コストが安い

S3の静的ホスティングは月数円〜数十円程度です。EC2のように常時稼働するサーバーが不要なため、個人サイトやポートフォリオに最適です。

② 高速・高可用性

CloudFrontはAWSのグローバルCDNです。世界中にエッジロケーションがあるため、ユーザーに最も近い場所からコンテンツが配信されます。

③ セキュリティが高い

OAC（Origin Access Control）を使うことで、S3バケットへの直接アクセスをブロックし、CloudFront経由のアクセスのみを許可できます。

事前準備

以下のものを用意してください。

• AWSアカウント
• 独自ドメイン（お名前.com等で取得済みのもの）
• 公開したい静的ファイル（HTML・CSS・JSなど）

S3バケットの作成・設定

バケットの作成

1. AWSコンソールにログインしてS3を開く
2. 「バケットを作成」をクリック
3. バケット名にドメイン名を入力（例：wabi-motion.com）
4. リージョンは ap-northeast-1（東京）を選択
5. 「パブリックアクセスをすべてブロック」はオンのままにする
6. 「バケットを作成」をクリック

ファイルのアップロード

作成したバケットに静的ファイルをアップロードします。

1. バケットを開いて「アップロード」をクリック
2. HTMLファイルやCSSファイルをアップロード
3. 「アップロード」をクリックして完了

CloudFrontの設定（OAC）

ディストリビューションの作成

1. AWSコンソールでCloudFrontを開く
2. 「ディストリビューションを作成」をクリック
3. オリジンドメインにS3バケットを選択
4. 「Origin Access Control」を選択して新規作成
5. デフォルトルートオブジェクトに index.html を入力
6. 「ディストリビューションを作成」をクリック

S3バケットポリシーの更新

CloudFrontディストリビューション作成後、S3バケットポリシーの更新を求めるバナーが表示されます。

1. バナーの「ポリシーをコピー」をクリック
2. S3バケットの「アクセス許可」→「バケットポリシー」を開く
3. コピーしたポリシーを貼り付けて保存

これでCloudFront経由のみS3にアクセスできる状態になります。

CloudFront Functionsの設定（URLルーティング）

サブページ（例：/about）にアクセスした際に index.html を返すようにするためFunctionを設定します。

1. CloudFrontの「関数」→「関数を作成」をクリック
2. 以下のコードを貼り付ける

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  } else if (!uri.includes('.')) {
    request.uri += '/index.html';
  }

  return request;
}

3. 「発行」をクリックしてディストリビューションに関連付ける

ACMでSSL証明書を取得する

重要：ACMはus-east-1（バージニア北部）で作成してください。CloudFrontで使用するSSL証明書はus-east-1のみ対応しています。

1. リージョンを us-east-1 に切り替える
2. Certificate Managerを開いて「証明書をリクエスト」
3. ドメイン名に wabi-motion.com と *.wabi-motion.com を入力
4. 検証方法は「DNS検証」を選択
5. Route53で自動検証する場合は「Route53でレコードを作成」をクリック
6. ステータスが「発行済み」になるまで待つ（数分〜数十分）

証明書が発行されたらCloudFrontのディストリビューションに設定します。

1. CloudFrontディストリビューションの「設定を編集」を開く
2. 「カスタムSSL証明書」に取得した証明書を選択
3. 「代替ドメイン名（CNAME）」にドメインを入力
4. 「変更を保存」をクリック

Route53でドメインを紐づける

1. Route53のホストゾーンを開く
2. 「レコードを作成」をクリック
3. 以下の設定でAレコードを作成する

• レコード名：空白（ルートドメイン）
• レコードタイプ：A
• エイリアス：オン
• トラフィックのルーティング先：CloudFrontディストリビューション

4. 「レコードを作成」をクリック

数分後にドメインでアクセスできるようになります。

実際にハマったポイント

① ACMのリージョン指定を間違えた

最初に東京リージョン（ap-northeast-1）でSSL証明書を作成してしまい、CloudFrontで選択できないエラーが発生しました。CloudFrontで使うSSL証明書は必ず us-east-1 で作成してください。

② S3バケットポリシーの更新を忘れた

CloudFrontを作成したあとにS3バケットポリシーを更新しないと、403エラーが返ってきます。ディストリビューション作成直後に表示されるバナーからポリシーをコピー→S3に貼り付ける手順を忘れずに行いましょう。

③ CloudFrontのキャッシュが残る

ファイルを更新してもブラウザに古いキャッシュが残ることがあります。その場合はCloudFrontの「無効化」機能を使ってキャッシュをクリアしてください。

パス：/*

まとめ・かかったコスト

AWS S3 + CloudFrontの構成で静的サイトを公開する手順をまとめました。

手順の振り返り

1. S3バケットを作成してファイルをアップロード
2. CloudFrontでOACを設定
3. us-east-1でACMのSSL証明書を取得
4. Route53でAレコード（エイリアス）を設定

実際のコスト（月額）

• S3：数円〜10円程度
• CloudFront：数円〜数十円程度
• Route53：約60円（ホストゾーン）
• 合計：月100円以下

EC2と比べて圧倒的にコストを抑えられるのがこの構成の最大のメリットです。個人サイト・ポートフォリオ・ブログのホスティングに最適な構成なので、ぜひ試してみてください。