0
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?

More than 1 year has passed since last update.

AWS S3 × ChatGPT で 15分!初心者でもできる静的サイト公開ガイド

0
Last updated at Posted at 2025-05-02

はじめに

 まだ 研修 1 か月未満、AWS 触り始めて 1 週間──資格も経験もない “ひよっこ” が、先輩からこんな無茶振りを受けました。

「明日までに S3 だけで〇✕が書かれたWeb サイトを公開しといて。あと手順を Qiita にまとめといてね!」

えっ…… S3 ってバケット作るところでしょ?
それ一つで “サーバー” になるの?
そもそも静的ホスティングって何……?

そんな私を救ってくれたのが ChatGPT。
「S3静的ホスティング 手順」「バケット ポリシー わかりやすく」──と聞くだけで、要点をかみ砕いた手順+コピペ OK な CLI を即座に提案してくれました。

結果、約 10 分で “Hello, world!” がインターネットに公開。
合計約15分でウェブサイトとして形になりました。

最初にドキュメントを読んでいたら半日は溶けていたはずです。

本記事では、

 AWS 経験 1 週間 の研修生がChatGPT を使ってS3だけで静的 Web サーバー を構築するまでの流れを、つまずきポイント・タイムライン付き で共有します。
「ドキュメント読むより ChatGPT に聞いた方が早い」という体験が、同じ境遇の方の一助になれば幸いです。

そもそもS3って何?

 S3とは、Simple Storage Service の略で、その名の通り「シンプル=設定いらず」「ストレージ=データ置き場」を提供する AWS のフルマネージド・オブジェクトストレージです。
例えば、動画や画像などのコンテンツデータを瞬時にアップロード、保管することが可能です。
更にS3は「データ置き場」の機能だけでなく「ミニマルな Web サーバー」としての機能も持ちます。小規模サイトや LP、ドキュメント公開に最適です。

今回実装するのは 静的 Web ホスティングです。S3自体が Web サーバーのように働き、HTML を返してくれるような実装を目指します。

手順

STEP0:
 1.ChatGPT に“丸投げ”して全体像をつかむ

 質問例: 「AWS S3だけで静的サイトを公開する最短手順を教えて。初心者向けで」
スクリーンショット 2025-04-30 110400.png

 得られるアウトプット:
 概要手順・CLI コマンド・注意点(セキュリティ、プライバシーの考慮など)。
 以下は出力の一例です。
スクリーンショット 2025-04-30 115840.png

💬ポイント:

出力が長すぎたら「章ごとに区切って」「コマンドだけ」と追加指示で整理。
バケット名やリージョンを自分の値に置換してもらうとコピペ事故を防げる。
ChatGPT は“随時相談できるペアプロ相手”。本記事の残り手順でも、ハマったら即質問 → 答え合わせしながら進めましょう。

以下、GPTの出力結果をまとめて手順として書き直しています。

STEP1: 

 1.AWS マネジメントコンソール → S3 → [バケットを作成]

 2.バケット名を入力(例: my-static-site-2025)。
  リージョンは東京なら ap-northeast-1。

 3.ブロックパブリックアクセス を オフ。

 4.その他はデフォルト → バケットを作成。

スクリーンショット 2025-04-30 105156.png

STEP2: 静的ウェブサイトホスティングを有効化

 1.バケット → プロパティ タブ → 静的ウェブサイトホスティング。!

 2.ホスティングタイプ: 静的ウェブサイトをホストする を選択。

 3.インデックスドキュメントに index.html、エラードキュメントに    
  error.html (任意)。
 4.変更を保存 するとエンドポイント URL が表示されるのでメモ。

STEP3: オブジェクトをアップロード

 1.オブジェクト タブ → アップロード。

 今回は事前に用意したHTMLのサンプルファイルを使用しました。
 ⇒index.html(+CSS/JS/画像)を選択 → アップロード。
スクリーンショット 2025-04-30 105817.png

STEP4: バケットポリシーで公開権限を付与

 1.アクセス許可 タブ → バケットポリシー → 編集。

スクリーンショット 2025-04-30 105947.png

 以下を貼り付けて保存。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadForStaticWebsite",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-static-site-2025/*"
    }
  ]
}

STEP5: 動作確認

 1.STEP2 で控えたエンドポイント URL をブラウザで開く。

 2.index.html が表示されれば成功。404 テストで error.html も確認。

スクリーンショット 2025-04-28 163541.png

結果

 無事、デプロイが完了しました。
スクリーンショット 2025-04-28 163541.png

皆さんはできましたか?

最後に

 研修 1 週間のエンジニアでも ChatGPT を“ペアプロ” にすれば、ドキュメント迷子にならずに S3を用いた 静的サイトを構築できました。
注意点として、gptはあくまで学習データをもとに尤もらしい回答をしているだけなので、必ずしも正確な情報であるとは限りません。
情報を鵜呑みにせず、AWSが出している公式のドキュメントを参照しながら精査していく必要があります。
以下に参考文献としてS3と、S3での静的ウェブホストの方法をまとめた公式ドキュメントを記載しておきます。

参考文献

0
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
0
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?