← ハンズオン一覧に戻る

AWS Hands-on / Storage

サーバーを立てずに Web サイトを S3 で公開する

S3 のバケットに HTML ファイルを置き、「静的ウェブサイトホスティング」を有効にして、誰でもアクセスできる Web ページとして公開します。サーバーを 1 台も立てずに、ファイルを置くだけで Web サイトが見られるようになる——その手軽さと、公開設定の考え方を体験します。

● Lv.2 基本的なリソースを作れる人 ⏱ 所要 30〜50 分 すべてコンソールで完結
01 — Prerequisites

はじめる前に

  • 必須AWS アカウントを持っていること
  • 必須マネジメントコンソールにサインインできること
  • 必須S3 でバケットを作り、ファイルをアップロードした経験があること
  • あると良いHTML ファイル（index.html）を 1 つ用意できる（簡単な内容で構いません。本文に例を載せます）
  • あると良い「静的サイト（決まった内容を見せるだけのページ）」と「動的サイト（その場で内容を作るページ）」の違いをなんとなく知っている

※ このハンズオンは すべてコンソールだけで完結します。公開のためにバケットの設定とポリシーを少し触りますが、内容は本文で説明します。

02 — References

参照する公式ドキュメント

手順に迷ったときや、用語の意味を確かめたいときに開きましょう。

Amazon S3 を使用した静的ウェブサイトのホスティング↗ 静的ウェブサイトホスティングの全体像と設定方法。今回の中心になるページです。 docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html Amazon S3 バケットポリシーの例↗ 「誰でも読み取り可能にする」など、用途別のバケットポリシーの書き方の例。公開設定で参照します。 docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/example-bucket-policies.html Amazon S3 とは↗ バケット・オブジェクト・アクセス制御など、S3 の基本用語を確認できる入口のページ。 docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/Welcome.html

※ リンク切れの場合は、ページタイトルで検索してください。

03 — Background

背景・シナリオ

「簡単な紹介ページを Web で公開したい」というとき、わざわざサーバーを立てて、OS を入れて、Web サーバーソフトを設定して……とやるのは大げさです。表示する内容が決まっている静的サイト（その場で計算したりデータベースを引いたりしない、決まった HTML を見せるだけのページ）なら、もっと手軽な方法があります。

それが、S3 の静的ウェブサイトホスティングです。バケットに HTML ファイルを置き、ホスティングを有効にして公開設定をすると、サーバーを 1 台も立てずに、その内容が Web ページとして配信されます。今回は index.html を置いて、誰でもアクセスできる URL でページが表示される状態を作ります。

サーバーがないのに、どうやってページが表示されるの？

表示する HTML はもう出来上がっているので、利用者のリクエストに対してS3 が「置いてあるファイルをそのまま返す」だけで済みます。その場で何かを計算する処理（動的サイト）が不要なので、ファイル置き場である S3 で配信できるのです。

非公開が既定なのに、どうやって公開するの？

S3 のバケットは安全のため初期状態では非公開です。公開するには、①ブロックパブリックアクセスを解除し、②「誰でも読み取り可能」というバケットポリシーを付ける、という 2 つの操作を意図的に行います。この「わざわざ開ける」手順自体が、安全のための仕組みです。

Goal

S3 バケットで静的ウェブサイトホスティングを有効にし、index.html を置いて公開設定を行い、ウェブサイトエンドポイントの URL にブラウザでアクセスすると、自分のページが表示される状態にする。

04 — Architecture

つくる構成

ブラウザからの公開 URL へのアクセスに対して、S3 がバケット内の index.html をそのまま返します。バケットは「静的ウェブサイトホスティング有効」かつ「誰でも読み取り可能」に設定します。

あなたのブラウザ（誰でもアクセスできる）
S3 バケット
東京リージョン
静的ウェブサイトホスティング：有効 バケットポリシー：誰でも読み取り可
index.html error.html（任意）
公開 URL にアクセスがあると、S3 はインデックスドキュメント（index.html）をそのまま返します。
サーバーは 1 台もありません。ファイルを置く場所が、そのまま Web サイトになります。
05 — Requirements

要件

以下の要件を満たし、ブラウザで公開ページが表示されることを確認してください。

No要件
1リージョンは「東京（ap-northeast-1）」を使用する。
2S3 バケットを 1 つ作成する（名前は世界で一意。例：my-site-yourname-20260620）。
3トップページとなる index.html をアップロードする（任意で error.html も）。
4バケットのプロパティで 静的ウェブサイトホスティングを有効化し、インデックスドキュメントを index.html に設定する。
5ブロックパブリックアクセスを解除し、バケットポリシーで誰でも読み取り（s3:GetObject）を許可する。
6ウェブサイトエンドポイントの URL にブラウザでアクセスし、index.html の内容が表示されることを確認する。
06 — Steps

構築の進め方

「ファイルを置く → ホスティングを有効にする → 公開する」の順に進みます。公開の操作（手順 5・6）は安全に関わるので、何をしているかを意識しながら進めましょう。

  1. マネジメントコンソールにサインインし、リージョンを合わせる

    ブラウザで AWS マネジメントコンソールにサインインし、画面右上のリージョンが「アジアパシフィック（東京）ap-northeast-1」になっていることを確認します。

  2. バケットを作成し、index.html を用意する

    S3 コンソールで「バケットを作成」し、世界で一意な名前（例：my-site-yourname-20260620）を付けます。次に、トップページとなる index.html を用意します。手元にない場合は、次の内容をテキストエディタで作って保存してください。

    index.html（例）
    <!-- 簡単なトップページの例 -->
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>はじめての S3 サイト</title></head>
<body>
  <h1>S3 で公開した Web ページです</h1>
  <p>サーバーを立てずに、ファイルを置くだけで公開できました。</p>
</body>
</html>
    ファイル名は index.html に

    あとでインデックスドキュメントとして指定するため、トップページのファイル名は index.html（すべて小文字）にしておきます。

  3. index.html をバケットにアップロードする

    バケットを開き、「アップロード」から index.html を追加してアップロードします。任意で、存在しないページ用の error.html も用意してアップロードしておくと、あとで指定できます。

  4. 静的ウェブサイトホスティングを有効にする

    バケットの「プロパティ」タブをいちばん下までスクロールし、「静的ウェブサイトホスティング」を「有効にする」に変更します。インデックスドキュメントに index.html を入力（任意でエラードキュメントに error.html）して保存します。表示される「バケットウェブサイトエンドポイント」の URL を控えておきます。

    インデックスドキュメントとは

    URL にファイル名を付けずにアクセスされたとき、「代わりに返すトップページ」がインデックスドキュメントです。一般的な Web サーバーで index.html が使われるのと同じ考え方です。

  5. ブロックパブリックアクセスを解除する

    バケットの「アクセス許可」タブで、「ブロックパブリックアクセス」を編集し、すべてのブロックのチェックを外して保存します（確認のため 確認 の入力を求められます）。

    ブロックパブリックアクセス（バケット設定）— 編集（イメージ）

    パブリックアクセスをすべてブロック

    ブロックを解除する（チェックを外す）
    バケットポリシーによる公開を許可
    ブロックする（デフォルトのまま）
    公開設定をすべて無効化

    ↳今回は静的サイトとして公開するハンズオンのため、チェックを外して解除します

    これは「公開してよい」という意思表示

    S3 は、うっかり公開してしまう事故を防ぐため、初期状態で公開を二重にブロックしています。今回は意図的に公開するので、このブロックを外します。本当に公開してよいバケットだけで行う操作だと覚えておきましょう。

  6. バケットポリシーで「誰でも読み取り可」にする

    同じ「アクセス許可」タブの「バケットポリシー」を編集し、次の内容を貼り付けます。バケット名 の部分は、自分のバケット名に置き換えてください。

    バケットポリシー（バケット名を自分のものに置き換え）
    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::バケット名/*"
    }
  ]
}
    許可しているのは「読み取りだけ」

    このポリシーで許可しているのは s3:GetObject（オブジェクトの読み取り）だけです。誰でも見ることはできても、書き換えや削除はできません。公開サイトに必要な最小限の権限に絞っています。

  7. ウェブサイトエンドポイントにアクセスして確認する

    手順 4 で控えたウェブサイトエンドポイントの URL（例：http://my-site-….s3-website-ap-northeast-1.amazonaws.com）をブラウザで開きます。index.html の内容が表示されれば、公開は成功です。

    オブジェクトの URL とは別物

    各オブジェクトにも URL がありますが、サイトとして見せるのは「ウェブサイトエンドポイント」のほうです（s3-website という文字が入っています）。インデックスドキュメントが効くのもこちらです。

07 — Pitfalls

つまずきポイント

初学者がよく引っかかる箇所を先回りでまとめました。答えそのものは載せていませんが、「どこを見直せばよいか」の手がかりとして使ってください。

Pitfall 01 — アクセスすると 403 Forbidden になる

「URL を開いても Access Denied / 403 で表示されない」

公開のための 2 つの設定のどちらかが足りていないことが多いです。①ブロックパブリックアクセスを解除したか、②バケットポリシーを設定し、Resource のバケット名が自分のものと一致しているか（末尾の /* も必要）を見直しましょう。両方そろって初めて公開されます。

Pitfall 02 — ページは開くが中身が違う／404 になる

「トップページではなく、エラーやファイル一覧が出る」

①開いている URL がウェブサイトエンドポイント（s3-website を含む）か、②インデックスドキュメントの名前と、アップロードしたファイル名が index.html で一致しているか（大文字小文字も区別されます）を確認しましょう。Index.html や index.htm になっていないか、もよくある原因です。

08 — Checklist

完了チェック

要件の再確認ではなく、画面のどこを見れば達成を確認できるかをまとめました。S3 コンソールとブラウザを開いて、次を順に確かめましょう。

  • バケットの「プロパティ」で、静的ウェブサイトホスティングが「有効」になっており、エンドポイント URL が表示されている。
  • バケットの「アクセス許可」で、ブロックパブリックアクセスがオフになっている。
  • 「バケットポリシー」に、s3:GetObject を Principal: * へ許可するルールがある。
  • バケット一覧の「アクセス」が 「公開」と表示されている。
  • ウェブサイトエンドポイントの URL をブラウザで開くと、index.html の内容が表示される（403 や 404 にならない）。
09 — Think

考えてみよう

手を動かすことに加えて、次の問いに自分の言葉で答えられるようにしておくと、理解がより深まります。

  1. 同じ「Web ページを見せる」でも、サーバー（Web サーバーソフト）で配信する場合と、S3 の静的ホスティングで配信する場合があります。S3 で配信できるのはどんなページで、できない（向かない）のはどんなページでしょうか。
    ヒント
    S3 は「置いてあるファイルをそのまま返す」だけです。ログイン後に内容が変わる、入力に応じて結果を作る、データベースを引く——といった「その場で処理が必要なページ」は、S3 だけでは作れません。静的か動的か、という観点で切り分けてみましょう。
  2. 公開のために、バケットポリシーで許可したのは s3:GetObject（読み取り）だけでした。もし読み取り以外（書き込みや削除）まで誰にでも許可してしまうと、どんな問題が起きるでしょうか。
    ヒント
    誰でも書き換え・削除できると、ページを差し替えられたり消されたりします。「見せたいだけなのに、いじれてしまう」状態の危うさを考えると、許可を読み取りに絞る意味が見えてきます。必要な操作だけ許可する、という考え方です。
  3. 今回のウェブサイトエンドポイントは http://（暗号化なし）で、独自のドメイン名でもありませんでした。実際のサイト公開で https:// や独自ドメインにしたい場合、S3 の前に何を組み合わせるとよいか調べてみましょう。
    ヒント
    S3 の前にコンテンツ配信のための仕組み（CDN）を置くと、HTTPS 化や独自ドメイン、世界中での高速配信ができるようになります。「配信を速く・安全にする前段の仕組み」というキーワードで調べてみましょう。
10 — Clean up

後片づけ

公開したバケットは、使い終わったら片づけましょう。とくに公開設定を残したままにしないことが大切です。

  1. オブジェクトを削除する：バケットを開き、index.html などのオブジェクトをすべて削除します（バケット一覧で「空にする」を使うとまとめて消せます）。
  2. バケットを削除する：中が空になったら、バケットを削除します。これで公開設定ごとなくなります。
  3. （バケットを残す場合）公開を閉じる：もしバケットを残すなら、バケットポリシーを削除し、ブロックパブリックアクセスを元の「すべてブロック」に戻して、非公開に戻しておきます。
Caution — 公開したまま放置しない

使い終わったら、削除するか非公開に戻す

公開設定のバケットを放置すると、意図せず中身が見られ続けます。学習が終わったら、バケットごと削除するか、ポリシーとブロック設定を戻して非公開にするか、どちらかを必ず行いましょう。

コストに関する注意: S3 は、保存しているデータ量・リクエストの回数・データ転送量に応じて課金されます。新規アカウントには無料利用枠があり、一定容量（一般的に 5 GB のストレージと一定回数のリクエスト、一定量の転送）まで無料で使えます。小さな静的ページを公開する程度なら、ごく少額か無料枠に収まることがほとんどです。ただし公開しているとアクセスが増えるほど転送量も増える点に注意し、使い終えたら上の「後片づけ」で削除または非公開化を行いましょう。バケット自体や静的ウェブサイトホスティングの設定の存在には料金はかかりません。