まずは用語をサクッと理解！

  • 静的ウェブサイト … HTML や画像などの 動かないファイルを配信するサイト。
  • S3 … AWSのサービスの1つで、HTML や画像などを保存する場所。Googleドライブのようなイメージ。
  • CloudFront … 世界中にキャッシュをばらまいて高速配信する仕組み (CDN)。

ステップ1：S3 バケットを作る

  1. コンソールで S3 を選択 → 「バケットを作成」で設定画面へ。
    • バケット名は例 my-first-site-123 などに。
    • オブジェクト所有者は ACL 無効。
    • パブリックアクセスブロック をすべてオフ。下に警告が出ても公開するのでOK。
    • それ以外の設定は変更せず「バケットを作成」。
  2. 作成したバケットを選択 → [プロパティ] → 一番下の静的ウェブサイトホスティング を 有効化 し、インデックスドキュメントに index.html を設定。
  3. [アクセス許可] → [バケットポリシー] で下記を貼り付けて “誰でも閲覧可” に。
    ※ my-first-site-123 は自分のバケット名に変更
{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::my-first-site-123/*"
  }]
}

ステップ2：HTML をアップロード

下記 2 ファイルをアップロード（もちろん自作ファイルや、他のサイトのサンプルコードでもOK）。

index.html
styles.css

サンプルコード: index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルサイト</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header><h1>サンプルサイトへようこそ</h1></header>
  <main>
    <p>HTML と CSS を同じフォルダに置いて動く最小構成です。</p>
  </main>
  <footer>© 2025 サンプルサイト</footer>
</body>
</html>

サンプルコード: styles.css

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:sans-serif; line-height:1.5; max-width:800px; margin:0 auto; padding:16px; }
header { background:#f0f0f0; padding:16px; }
main { margin:16px 0; }
footer { text-align:center; font-size:0.8rem; color:#666; border-top:1px solid #ddd; padding-top:16px; }

ステップ3：とりあえず S3 サイトを眺めてみよう！

S3 のバケットを選択→プロパティの一番下のバケットウェブサイトエンドポイントから、URLにアクセスして、自分の index.html が表示されるか確認します。
例：
http://my-first-site-123.s3-website-ap-northeast-1.amazonaws.com/

S3 だけでウェブサイトはいったん完成です！
…でももっとより良くできます。

S3 だけでもサイトは表示されますが、海外から遅い・HTTPS ではなくHTTP通信であるなどの課題があります。
※HTTPSとは、HTTP Secureの略で、HTTPに暗号化(SSL/TLS)をプラスした通信です。
そこで CloudFront を追加すると高速＆HTTPS通信 が実現できます。

CloudFront を設定する手順

  1. CloudFront → ディストリビューションを作成 をクリック
  2. オリジンを選択 にmy-first-site-123.s3-website-ap-northeast-1.amazonaws.comを指定
  3. 下に警告メッセージで、Webサイトのエンドポイントを使用と表示されるのでクリック。
  4. ウェブアプリケーションファイアウォール(WAF)はとりあえずオフ。（後で必要に応じてオンにします。）
  5. デフォルトルートオブジェクトに index.html と入力
  6. ディストリビューションを作成

自分のウェブサイトを別のURLから確認！

CloudFrontのディストリビューションの一般から、ディストリビューションドメイン名をコピー。
そのドメイン（例：https://d1234abcd.cloudfront.net/） にアクセスして、HTTPS & 高速表示 を体感しましょう！！
ここまでが、この記事の目指してきたところです。

今回作ったシステムを 1 枚の図でおさらい

graph LR; U[ブラウザ] -. HTTPS .-> CF[CloudFront（エッジ）]; CF -- HIT (オブジェクトあり) --> OBJ[(キャッシュ済みファイル)]; CF -- MISS (オブジェクトなし) --> S3[S3 バケット]; S3 -- ファイル取得 --> CF;

ブラウザは HTTPS で CloudFront に接続。
HIT = すでにエッジにファイルがあり即応答。
MISS = まだ無いので S3 に取りに行き、取得後はキャッシュ（OBJ）に保存します。

HTMLを更新して自分だけのウェブサイトを作ろう！

ファイルを新しくアップロードした後は CloudFront でキャッシュ削除（例：/*）を実行すれば、1〜2 分で世界中のキャッシュが最新になります。

まとめと今後の予定

  • S3 だけでまず公開して動作を確認
  • CloudFront を追加して速度・HTTPS・キャッシュを強化
  • 更新後は キャッシュ削除で最新ファイルをすぐ届ける

これで完全無料ドメインでも、本格的なサーバーレス静的サイトが完成です！
あとは HTML を自由に書き換えて、あなた色のサイトを育てていきましょう。

今回の記事では、とりあえずウェブサイトを公開することを目標に取り組みました。
しかし、セキュリティ面や運用面で言及していないことが多いので、今後別の記事で解説する予定です。
私自身も学びながらなので、一緒に頑張りましょう！