🫶

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

に公開

AWSの大地に立ち、セキュリティにも気を配った(完璧とはいえないけど今はこれで良い)
早速、ぼくの最初の目的である「なーるほどtheワールド」な世界を作ろうと思う
でも、クソ雑魚だけど昔はバリバリ(?)Webシステム開発していたぼく。
「画面表示っていってもやることいっぱいありそうだよな〜」と不安になったので早速ちゃっぴーに聞いてみた。

🐾 ちゃっぴーとの対話:S3でホスティングってどうやるの?

ぼく:
ところでさ、ブラウザに「Hello World!」みたいなの表示したいんだけど、どうすればいいの?

🐶ちゃっぴー:
ふっふっふ…それなら「S3にファイルを配置すればいいんじゃよ〜」じゃ!

ぼく:
えっ、それだけでいいの?超カンタン!

🐶ちゃっぴー:
いやいや、ちゃんと準備も必要じゃぞ。
まずS3バケットを作る前に、 リージョン(地域) を設定するのが先じゃ。
これは「どの国・地域のデータセンターにファイルを置くか」を決める大事なステップなんじゃよ。

ぼく:
おーっと、そこ忘れてた!たしかに最初に東京リージョン設定して、
「これでぼくも シティーボーイ!」とか言ってたわ!

🐶ちゃっぴー:
よしよし!じゃあ次にS3の出番じゃな!
S3の「静的ウェブサイトホスティング」機能を使えば、HTMLファイルを置くだけでブラウザ表示できるようになるんじゃ。

ぼく:
それってまさに「おくだけカンタンホスティング」!

🐶ちゃっぴー:
その通り!しかもS3は料金も安く、個人開発にもぴったり。
ただし、アクセス権限の設定を間違えると403エラーになるから、そこは気をつけるのじゃぞ!


ということらしい。
ほーん。世界はいつの間にかぼくを過去に置き去りにして進んでいるんだな。
なんて思いながら、まずはS3にバケットを作っていくよ。

1.東京リージョンでS3にバケットを作成する

では、S3にバケットを作成していくよ。
バケットを作成するときに、いくつかの設定を選択する必要があるので以下を参照してね。

  • ここでは、バケットタイプとバケット名を設定する。タイプについては「汎用」を選択。バケット名は自分のS3環境で一位になるよう命名しよう。

ところで、「タイプ:ディレクトリ」ってなんだろう?「タイプ:ヌル」なら知っているけど。よく分からないので「ぼくでもわかるように説明してほしい」ってちゃっぴーにお願いしてみたよ。

🗃 S3バケットの「タイプ」ってなに?

S3のバケット作成時、こんな選択肢があるんだけど?

  • 汎用(General purpose)
  • ディレクトリ(Directory bucket)

簡単にまとめるとこんな感じ。

タイプ 説明 主に使う場面
🟦 汎用 従来のS3バケット。なんでも保存できる「万能タイプ」 Webホスティング、画像保存、ログ集約など
🟨 ディレクトリ 新しいS3 Express One Zone。スピード特化型でファイルシステムっぽい 機械学習、リアルタイム処理、大量データ処理など

✅ 選び方の目安

  • Webサイト公開したい → 汎用
  • 静的ファイルを配布したい → 汎用
  • MLや高速分析処理をやる予定がある → ディレクトリも検討

💡 注意!

  • ディレクトリバケットは一部リージョンのみ対応
  • 静的ホスティング非対応(CloudFrontも不可)
  • なので、Zenn記事で紹介するような用途では非推奨!

🐶 クソ雑魚の主殿はとりあえず 汎用使っとけ!


ぐぬぬ。。。いつかクソ雑魚を卒業してやるんだからな。

  • 気を取り直して設定を続けよう。ここでは「暗号化」の設定に注目していくよ

ところで、「暗号化」はわかるけど「暗号化タイプ」とか「バケットキー」ってなんだろう?
わからないことは全部ちゃっぴーに相談しよう。

🗃 S3のデフォルト暗号化ってなんじゃらほい?

ぼく「ちゃっぴー、バケット作る時に『デフォルトの暗号化』って出てきたんだけど、これってなに?」

🐶「おっ、いいところに気がついたのぅ。これはな、S3にアップロードされたすべてのオブジェクトに対して、自動的に暗号化をかける設定なんじゃ」

ぼく「えっ、じゃあこれを設定しておけば、特に意識せずにファイルが暗号化されるの?」

🐶「そうそう。"デフォルト"暗号化だから、わざわざ毎回指定しなくてもOKなんじゃ。
選べるキーには2種類あってな:

  • Amazon S3 マネージドキー(SSE-S3):S3が勝手にキー管理してくれる。お手軽。
  • AWS KMSキー(SSE-KMS):KMSでキーを自前管理。ちょっと高度者向け。

主みたいなクソ雑魚さん(←愛ゆえの敬称♡)なら、SSE-S3(Amazon S3 マネージドキー) を選んでおけば安心じゃ!」

ぼく「バケットキーってのもあったけど、それはどうするの?」

🐶「それも有効にしておけばOK!
バケットキーを使うと、KMSの利用回数を減らしてコストを下げることができるんじゃけど、
SSE-S3を選んだ場合は関係ないから気にしなくてOKじゃ!」


🔰 まとめ:

  • デフォルトの暗号化 → SSE-S3(Amazon S3 マネージドキー)を選べばOK!
  • バケットキー → SSE-KMSを使うときだけ気にする。それ以外は無視でよい!

なんでもだいたいデフォルトにしておけばいいってことかな?
天下のAWS様がオススメするのだから従っておくのが道理だね。

  • 次はバケットの「パブリックアクセス設定」を許可する。設定を外すと、静的コンテンツにアクセスできるようになるとかなんとか、ちゃっぴーが言ってたのでチェックを外す。
  • 「公開を承認」もチェックしないと設定ができないので、このチェックをONにしておく
  • 「バケットを作成する」ボタンを押して以下の画面が表示されればバケットの作成は完了

2.バケットにindex.htmlを配置する

  • まず表示用のHTMLファイルを作るよ。今回はシンプルに。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>なーるほどtheワールド</title>
  </head>
  <body>
    <h1>なーるほどtheワールドへようこそ!</h1>
    <p>Presented by ちゃっぴーとクソ雑魚殿</p>
  </body>
</html>
  • これを先ほど作成したバケットの 直下 に配置する
  • アップロードボタンを押すとファイル選択画面が表示されるので、先ほど作成したindex.htmlを指定してアップロードを実行

これで、画面に表示するまでの準備が完了!
今回はちょっと長くなってしまったので前後編に分けるね。後編をお楽しみに!

次回予告

  • 次はブラウザからindex.htmlにアクセスして「なーるほどtheワールド」を体験するよ!

Discussion