AWS S3（Simple Storage Service）は単なるファイル置き場ではありません。「静的ウェブサイトホスティング」という機能を使えば、サーバーを立てることなく、HTML、CSS、JavaScriptだけで作られたWebサイトを世界中に公開することができます。
今回は、S3を使ってindex.htmlを公開する手順と、よくある「Access Denied」エラーの解決方法を解説します。
ただし、このS3だけでWebページを公開する方法は、セキュリティー面に不安が残りますので、この記事を読んだ後に次の記事も併せてご参照ください。
- AWS S3の基本的な設定方法
- AWS S3のエラーのAccess Deniedの解決方法
S3によるファイル公開の設定
全体の流れ
- S3バケットを作成する
index.htmlをアップロードする- 公開設定を行う
- Webサイトとして有効化する
手順1：S3バケットを作成する
まず、AWSコンソールにログインし、S3のサービス画面を開きます。
- 「バケットを作成」をクリックします。
- バケット名を入力します。（例:
bucket-hello11223344）
※バケット名は全世界で一意（ユニーク）である必要があります。 - その他の設定は一旦デフォルトのまま、画面最下部の「バケットを作成」をクリックします。
手順2：ファイルをアップロードする
作成したバケット名をクリックして中に入り、Webサイトのトップページとなるファイル（index.html）をアップロードします。
- 「アップロード」をクリック。
index.htmlをドラッグ＆ドロップ、またはファイルを選択して追加。- 最下部の**「アップロード」**ボタンをクリック。
これでファイルはクラウド上に上がりましたが、まだ誰も見ることができません。
index.html の内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
手順3：公開設定を行う（Access Deniedの壁）
S3はセキュリティのため、デフォルトでは「完全に非公開」になっています。このままURLにアクセスしても、以下のようなXMLエラーが表示されてしまいます。
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
...
</Error>
これを解消するために、以下の2つの設定を行います。
3-1. ブロックパブリックアクセスの解除
「このバケットは絶対に公開しないぞ！」というS3のガードを外します。
- 「アクセス許可」タブを開きます。
- 「ブロックパブリックアクセス (バケット設定)」の「編集」をクリック。
- 「パブリックアクセスをすべてブロック」のチェックを外します。
- 「変更の保存」をクリックし、確認画面で「確認」と入力して確定します。
3-2. バケットポリシーの設定
「ガード」を外しただけでは不十分です。「誰でも（Everyone）読み取ってOK（Read）」という許可証（ポリシー）を発行します。
- 同じく「アクセス許可」タブの「バケットポリシー」の「編集」をクリック。
- 以下のJSONコードを貼り付けます。
- 注意： 手順1でバケット名を変更した場合は、
"Resource"の行も合わせて修正してください。
- 注意： 手順1でバケット名を変更した場合は、
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket-hello11223344/*"
}
]
}
- 「変更の保存」をクリックします。
設定が完了したので動作確認
これにて、基本的な公開設定はすべて完了です。
S3バケット内の index.html の詳細画面にある 「オブジェクトURL」（https://bucket-name.s3.../index.html の形式）をクリックしてみてください。ブラウザでページが表示されるはずです。
・オブジェクトURL（HTTPS可）:
https://bucket-hello11223344.s3.ap-northeast-1.amazonaws.com/index.html
・オブジェクトURLへアクセスしたブラウザ結果
【補足】さらに便利な公開方式（Webサイトホスティング・CloudFront）
上記の手順だけでファイルの閲覧は可能ですが、URLが長かったり、index.html を省略できなかったりします。 より本格的に運用したい場合は、用途に合わせて以下の設定を追加で行ってください。
手軽にWebサイトらしく公開する（ウェブサイトエンドポイント）
「まずはHTTPで良いので、http://.../ でアクセスした時に index.html を表示させたい」という場合はこちらです。 この方式を使うには、以下の「静的ウェブサイトホスティング」を有効化する設定が必要です。
- 「プロパティ」タブを開きます。
- 一番下までスクロールし、「静的ウェブサイトホスティング」の「編集」をクリック。
- 「有効」を選択します。
- インデックスドキュメントに
index.htmlと入力します。 - 「変更の保存」をクリック。
設定が完了すると、「静的ウェブサイトホスティング」の項目に 「バケットウェブサイトエンドポイント」 というURLが表示されます。
このURLをブラウザで検索すると、通常のWebサーバーと同様にindex.htmlを表示してくれます。静的ウェブサイトホスティング設定をしていない場合、index.htmlの指定無しでindex.htmlは表示されませんので、Webサーバーらしい挙動になる設定と言えます。
ただし、このウェブサイトホスティングの設定だけでは、httpsによる暗号化通信のアクセスは利用できませんのでご注意ください。（CloudFrontとの併用が必要です。）
CloudFrontと組み合わせて公開する（推奨）
「静的コンテンツの高速なレスポンスを実現したい」「HTTPSで安全に公開したい」という場合は、Amazon CloudFront（CDN）を組み合わせるのが推奨されます。CloudFrontの設定については、次の記事をご覧ください。
CloudFrontとS3を利用したWeb公開は、次のようになります。
- 特徴: CloudFrontのオリジン設定としてこのS3バケットを指定します。
- メリット: CloudFrontのOAC (Origin Access Control) 機能を使えば、手順3で行った「ブロックパブリックアクセスの解除」が不要になり、「S3は完全非公開のまま、CloudFront経由のみ許可する」 という非常にセキュアな構成が組めます。
気になるコストについて
「アクセスが少ないうちは安い」と言われますが、具体的にはどのくらいなのでしょうか？ S3の主な料金要素は以下の3つです。
- ストレージ料金: データを保存している容量（例: 最初の50TBまでは 0.025USD/GB・月 ※東京リージョン）
- リクエスト料金: データの読み書き回数
- データ転送量: インターネットへの送信量
例えば、小規模なテキスト中心のサイト（1GB未満、アクセス少なめ）であれば、月額数円〜数十円程度に収まることがほとんどでしょう。詳細な料金シミュレーションや最新の単価については、以下の公式ページをご確認ください。
まとめ
S3での静的サイトホスティングは、サーバー管理の手間がなく、非常に安価にWebサイトを公開できます。
ポイントは「ブロックパブリックアクセスの解除」と「バケットポリシーの設定」の仕組みを理解することです。これさえ忘れなければ、爆速でWebサイトを公開できます。
ぜひ試してみてください。
