🫶

なーるほどtheワールド：第二章 - おくだけカンタンホスティング後編

2025/07/14に公開

S3にバケットも作成したし、index.htmlも配置したけど…

そういえばどうやってアクセスするんだろう？

分からないことはちゃっぴーに聞くのがなーるほどtheワールド式。早速聞いてみよう
ぼく「よーし！index.html アップした！で？ で？ どのURLにアクセスすればいいの？」
🐶「うむ、S3の静的ホスティングURLは、これでいけるはず → http://<バケット名>.s3-website-<リージョン>.amazonaws.com」
ぼく「おぉ〜〜！おっけーおっけー！ブラウザにURL入力して…Enterキー、ターーーーン！」
（数秒後）

 1.静的ホスティング設定ぼく「……は？？？」
ぼく「？？？どゆこと？？？」
🐶「主よ……それが、なーるほどtheワールドじゃ。」
ぼく「いやいやいや！“置くだけでブラウザに表示できる”って言ったよね！？ね！？！？」
🐶「言った。しかし……言っていない。“誰でも見られるようになる”とは、一言もな……！」
ぼく「詐欺だーーーーーー！！！！（ちゃっぴーの毛むしり）」
🐶「きゃー！毛がぁぁあ！やめて主、そこは地肌……！」
🐶「冷静になって聞いてくれ」

🐶「index.html を置いただけでは、“Webとして公開します！”って宣言がされてない状態なのだ！」

🐶「いわば…家は建ったが玄関がない！！！」
🧠 ちゃっぴー解説コーナー（静的ホスティング設定が未設定だと…）

•	ファイルがあってもアクセスできない（＝Webサーバとして機能しない）

•	NoSuchWebsiteConfiguration エラーが出る

•	S3のバケットを「Webサイトとして使うぞ」と設定しないと意味ナッシング
⸻

🔧 設定方法

1.	S3バケットを選択

2.	「プロパティ」タブを開く

3.	「静的ウェブサイトホスティング」→「編集」

4.	「有効にする」にチェック

5.	インデックスドキュメントに index.html を指定

6.	保存ポチー！

⸻
ぼく：

「なるほどtheワールド……！！（毛をむしるのは自分だった）」

「ちゃっぴー…今日もありがとう。今夜はヒザ枕な。」
🐶「望むところだ！主よ…おいどんのもふもふで癒されるがよい…✨」
ということで、設定が必要らしい。

家ができたと思ったのに玄関作ってなかったとかどういう設計ミスだよ。

家に入れるように「静的ウェブサイトホスティング」設定をしていこう。

対象となるS3バケットを選択し、バケットの「プロパティ」タブを選択



2.「S3 静的ウェブサイトホスティング」の設定が「無効」になっていることを確認して「編集」ボタンをクリック


3.「有効にする」を選択し、「インデックスドキュメント」に先ほどS3にアップロードした「index.html」を入力


4.「変更の保存」ボタンを押して設定完了！


さぁさぁこれで、「なーるほどtheワールド」な世界観が展開されるはず！

静的ウェブサイトホスティングの設定ページに表示されているURLをクリックーーー！

あ、ぽちっとなー！

 2.バケットポリシー設定ぼく「…」

ぼく「ちゃっぴぃぃいいいいいーーーーー！！！(´；ω；`)」
🐶「っぷ…」

🐶「バケットの中身を“誰でも読んでよし”とするには、“ポリシー”という名の通行許可証を設定せねばならんのだ。」
ぼく「つまり、ファイルを置いてホスティング設定しただけでは、家に玄関を設置して"入り口は作った”っていう状態なだけ。

でも玄関のドアが施錠されたままってことか……！」
🐶「そのとーり！

バケットポリシーで“ここは雑魚の家だから誰でも入っていいよ”って書かない限り、S3様はガードを固くしておるのじゃ。」
ぼく「なるほど？ではその通行許可証こと家の鍵を作るにはどうすればいいの？」

ぼく「あと、"雑魚の家"ってなにげにひどいw」
🐶「よいか、主（しゅ）よ……今から言う呪文を聞き逃すでないぞ。」
🐶「それが―― バケットポリシー だ！！✨」
ぼく「うおっ…いきなり出た！！かっこいい言い方だけど中身わからん！」
🐶「バケットポリシーとは、S3バケットに対して『誰が・どんな条件で・何をしていいか』を定義するJSON形式の契約書のことじゃ。

これを使って、『全世界の皆さん〜このバケットの中、自由に見てOKですよ〜！』とお達しを出すわけ。」
ぼく「うわ…書類仕事っぽい。でも必要なんだね。ちなみに、それってどこにどうやって設定するの？」
🐶「S3バケットの『アクセス許可』タブにある『バケットポリシーの編集』から貼り付けるだけ！

たとえば、こんな感じのポリシーを書くんじゃ👇」
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::バケット名/*"
    }
  ]
}
🐶「このポリシーは『全世界に対して（Principal: “*”）、このバケットにあるファイルの読み取り（s3:GetObject）を許可する』という意味じゃな。

“バケット名”の部分は自分のバケット名に置き換えてくれい。」
ぼく「なるほど！…ってちょっと待てい！その arn:aws:s3:::バケット名/* ってなにさ！なんで“:とか/*`とか入ってんのさ！」
🐶「ふっふっふ……これはARN（Amazon Resource Name）という、AWS界隈の住所表記のようなもの。

『このバケットの中にあるすべてのファイル』を指し示す時は、こういう形になるんじゃ。」
ぼく「住所ってことは、郵便番号・県名・番地みたいなものだな。覚えるの大変そうだけど、まぁコピペでいけるやつって理解でいいかな？」
🐶「おぬし、クソ雑魚の割に察しが良いな！」
ぼく「褒められてる…のか？w」
🐶「さて、これを設定して保存したら、ようやく403とはおさらばできるであろう…！」
ぼく「さぁ、やるぞ！ポリシーよ、我が家の扉を開けてくれ！！」
なんだよバケットポリシーってぇ。分かったふりしたけど全然分かってないよ。

とりあえず、細かいことはあとにしてちゃっぴーが作ってくれたJSONをコピペしよう。

対象のバケットを選択して「アクセス許可」タブをクリックする




下の方にスクロールすると「バケットポリシー」項目があるので、編集ボタンをクリックして編集画面を開き、設定したいポリシーを記入する




「変更の保存」ボタンを押して記入したポリシーを反映する



よーし。必要な設定は全て終わった！

いざひらけ！！クソ雑魚の家！

キターーーーーーーーーーーーー！！

ほら、これ！おい！来たよ？！なーるほどtheワールドだよ？！

みんな大好き、愛川欽也と楠田枝里子の「なるほど・ザ・ワールド」へのオマージュだよ？！

まさかこんな簡単にブラウザにあの感動のクイズ番組が再現されるなんて（されていないです）
めんどくさいサーバ構築や設定も不要

プログラミングも不要

でも分からないことが山ほどある

 次回予告ついに「なーるほどtheワールド」が世界に羽ばたいて行った！でも、分からないこともたくさんでてきた
次回、この「分かったようで分かっていない」AWSの設定に関わる用語とその意味をちゃっぴーとの会話形式でまとめて行くよ