5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【AWS Cloud Quest】S3 静的ウェブサイトホスティング編をプレイしてみた

Last updated at Posted at 2025-12-04

この記事は ミライトデザイン Advent Calendar 2025 の 4 日目の記事です。

前回は mari さんの NotebookLM を使ってドキュメントを読みやすくするという記事でした。

NotebookLM はまだ使ったことがないのですが、特定の資料だけを対象に情報の取得・整理ができるのはとても便利そうですね。
この記事をきっかけに、自分も実際に使ってみたいと思います。

はじめに

私は普段、仕事ではシステム開発がメインで、AWSコンソールに入ることはあってもログを見る程度。
実際にサービスを自分で設定する機会はほとんどありませんでした。

「AWSちゃんと理解したいな」と思いつつ、自分でアカウント準備するのも面倒だし、そもそも何を作って学ぼうか考えるのも大変で、なかなか重い腰が上がらず...

そんなとき見つけたのが、AWSの「AWS Cloud Quest: Cloud Practitioner」というオンラインのロールプレイングゲームでした。

今回 Cloud Quest の S3 クエストを遊んでみたので、この記事ではその内容をゆるっと紹介していきます。

AWS Cloud Questとは?

AWSが提供する「3Dロールプレイング形式の学習コンテンツ」です。

仮想の街を歩き回りながら住民の依頼を解決していくと、自然とAWSの操作が身につく仕組みになっています。

扱うサービスは「S3・EC2・VPC・RDS・IAM」など、実務でもよく使う主要なものばかり。

Cloud Practitioner 編では全12クエストが用意されており、ゲーム感覚でAWSの基本を一通り学べます。

今回プレイしたクエスト: S3静的ウェブサイトホスティング編

Cloud Quest の最初のミッションでは、「S3 を使って静的ウェブサイトを公開する」という課題に挑戦します。

ゲームの流れを5つのステップで整理したので、順番に見ていきましょう。

1: ゲームの世界に入る

ゲームを開始すると、タイトル画面が表示されます。
image.png

キャラクターを作成します
RPGっぽいですね。
image.png

その後、3Dの街に降り立ちます。
image.png

クエストの背景: 市長からの依頼

街を歩いて市長に話しかけると、今回のミッションが始まります。
会話が21ページも続くので「長いな...」と思いましたが、要約するとこんな感じです。

街の人たちが使う「波の高さの情報サイト」が不安定で困っている
Cloud Practitioner のあなたが、S3を使った静的サイトホスティングで解決する

詳しいストーリーが気になる方は、ぜひ実際にプレイしてみてください!

image.png

ここから、復旧ミッションが本格的にスタートします。
image.png

2: ソリューションセンターでミッションを確認

市長からの依頼を受けたあとは、ソリューションセンターでミッションを進めます。

クエストは「学習 → 実戦 → DIY」の三部構成でわかりやすく整理されています。

  • 学習(Learn):S3 の基本をスライドで学ぶ(10ページ)
  • 実戦(Practice):学習用AWSマネジメントコンソールで実際に操作(17ページ)
  • DIY(Do It Yourself):S3バケット内のファイル名を変更して動作確認

image.png

3: 学習パート(Learn)

まずはスライド形式で S3 の基礎を学びます(10ページ)

バケットやオブジェクト、バケットポリシーなど、後の操作に必要な知識を学習していきます。

S3 に関する YouTube の解説動画も用意されているので、動画派の人も安心です。

image.png

4: 実戦パート(AWS コンソールでの操作)

学習パートで基礎を押さえたら、いよいよ実践です。

操作手順の解説スライドを見ながら、実際のAWSマネジメントコンソールとほぼ同じUIを操作していきます。
image.png

操作するのは学習用アカウント(AWSLabsUser)

実際のAWSコンソールと同じUIで操作できるのが Cloud Quest の特徴です。
料金も気にせず、失敗を恐れずに触れるのが良いですね。
image.png

実践で行う操作をざっくり説明

今回のミッションは「静的サイトの復旧」
具体的には次の流れで進めます。

用意されているバケットを開く

ラボ側で「website-bucket-xxxx」という S3 バケットがすでに作成されていて、中には HTML / CSS / JS といった静的サイト用ファイルが入っています。

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

S3 を Web サーバーの代わりとして使うための設定です。
index.htmlをトップページとして設定し、必要に応じてエラーページも指定します。

公開設定を調整する

初期状態では外部からアクセスできないので、Web公開用の「読み取り権限(GetObject)」を許可します。
パブリックアクセス設定とバケットポリシーを調整するのですが、Cloud Quest 内ではある程度設定が用意されているので確認しながら進める感じです。

サイトURL(エンドポイント)で表示を確認

http://website-bucket-xxxx.s3-website-<region>.amazonaws.comのようなURLにアクセスして、ページが正しく表示されればミッションクリアです。

ゲームとはいえ、本物のAWSコンソールと同じ画面で操作するので、「S3で静的サイトを公開する」という流れが自然と身につきます。
これが無料で学べるのは、良いですね。

5: DIYパート(応用課題)

最後のDIYステップでは、S3 に置いてあるindex.htmlのファイル名をwaves.html に変更すると言うシンプルな課題が出されます。

ミッション上はファイル名を変更すればクリアになりますが、実際にページを正しく表示させるには、静的ウェブサイトホスティングで設定している「インデックスドキュメント」もwaves.htmlに変更しておく必要があります。
(※学習パートで触れていた内容なので、ここで気づけるようになっています)

補足: S3と静的サイトとは?

せっかくなので、Cloud Quest で学んだS3の基本を簡単にまとめておきます。

S3(Simple Storage Service)とは

AWSのオブジェクトストレージサービスで、ファイルを「バケット」に保存して管理します。

  • 保存容量ほぼ無制限
  • 高耐久性・高可用性
  • HTML、画像、JSなどあらゆるファイルを保存できる

静的サイトと動的サイト

静的サイトは、誰がいつ見ても同じ内容が表示されるサイト。
HTML、CSS、JavaScript、画像などで構成されます。

一方、動的サイトはユーザーごとに内容が変わるサイト(例:ログイン後のマイページ、ショッピングカートなど)

静的サイトはサーバー側の処理がいらないので、S3 に置くだけで公開できます。
S3 は高速でコストも安いので、静的サイトの公開方法としてよく使われています。

Cloud Questで学んだS3の基本用語

用語 意味
Bucket S3におけるファイル置き場(名前が全世界で一意)
Object アップロードされるファイル本体
Region データを置く場所(例:東京リージョン)
Policy アクセス制御ルール(JSON形式)

実際にプレイして感じたこと・まとめ

特に良かったのは以下の点です。

  • 段階的に学べる:学習→実戦→DIYの流れで、無理なく理解が深まる
  • 安心して触れる:学習用アカウントなので、壊す心配・料金の心配がゼロ
  • 理解が深まる:スライドと実際の操作がセットなので「なんとなく操作」にならない
  • 続けやすい:ゲーム感覚で進められるから、挫折しにくい

個人的には、アカウント準備も課題設定も全部用意されているため学習のハードルが低くて良いなと感じました。

1クエストあたりの所要時間は30分〜1時間程度。
スキマ時間でも十分クリアできます。

「AWSを触ってみたいけど何から始めれば?」
「本や動画で学んだけど、実際に手を動かしてみたい」

そんな方には、Cloud Quest はおすすめです。
次のクエスト(EC2)も挑戦してみようと思います!

明日は bucchi さんの記事です!
楽しみですね!

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?