はじめに
こんにちは、KUDs です。
ついに、実際にモノを作る回です。
このシリーズではここまで、AWS のアカウント設定、CLI の導入、Claude Code の準備、安全設定と進めてきました。
リソースはわざと1つも作らずに残してあります。
今回、自分の Web ページをインターネットに公開します。
しかも、コマンドを自分で覚える必要はありません。日本語で指示するだけです。
所要時間は30分ほど。
費用は、この記事の範囲なら1円未満〜数円程度です（詳しくは後述します）。
そして最後に、必ず後片付けまでやります。
「作って終わり」にしないのが、このシリーズの方針です。
この記事について
この記事は、AWS を初めて触る方向けのシリーズの1本です。
シリーズ全体の地図と読む順番は、ロードマップにまとめてあります。
この記事は、前回の「安全設定」が終わっていることが前提です。
今回は初めて実際にリソースを作るので、安全装置なしで進めるのはおすすめしません。
今回作るもの
S3 という「インターネット上のファイル置き場」に HTML ファイルを置いて、Web サイトとして公開します。
サーバーは1台も立てません。ファイルを置くだけで、Web サイトになります。
使うサービス
| サービス | 役割 |
|---|---|
| Amazon S3 | ファイルを置く場所。今回はこれだけ使います |
1つだけです。 AWS には200以上のサービスがありますが、Web サイトを1枚公開するだけなら S3 で足ります。
料金の目安
| 項目 | 単価（東京リージョン・2026年8月時点） |
|---|---|
| ファイルの保管 | 1GB あたり月 0.025 ドル |
| 表示されるたびの通信 | 月100GB まで無料 |
| ファイルの読み取りリクエスト | 1,000回あたり 0.00037 ドル |
今回作るのは数KBの HTML ファイル1枚なので、実際にかかるのは1円未満です。
ただし、放置すれば少額でも課金は続きます。だからこそ最後に削除します。(検証後の削除は癖付けましょう。)
先にお伝えしておくこと：HTTPS には対応していません
S3 の静的ウェブサイト機能は、HTTPS に対応していません。
公式ドキュメントにはっきり書かれています。
Amazon S3 website endpoints do not support HTTPS or access points.
（Amazon S3 のウェブサイトエンドポイントは、HTTPS には対応していません）
つまり、今回公開するページの URL は http:// で始まります。
ブラウザによっては「保護されていない通信」と表示されます。
学習用としては問題ありませんが、実際に人に見せるサイトを作るときは HTTPS が必要です。
その方法は記事の後半で触れます。
手順1: 準備を確認する
作り始める前に、2つだけ確認します。
AWS にログインできているか
ターミナルで実行してください。(初心者の方向けに、 VS Code ではターミナルも使えます。Command + J (Windows の場合は Control + J) で開けます。)
aws sts get-caller-identity
エラーが出る場合は、ログインセッションが切れています（最大12時間で切れます）。
その場合は再度ログインしてください。
aws login
安全設定が効いているか
VS Code で作業フォルダ（~/aws-claude-practice）を開き、.claude/settings.json があることを確認してください。
Claude Code のパネルで /permissions と入力すると、設定したルールの一覧が確認できます。
手順2: Claude Code に指示する
準備ができたら、Claude Code のパネルに以下をそのまま貼り付けてください。
AWS の S3 を使って、簡単な静的 Web サイトを公開してください。
index.htmlを作ってください。内容は「Hello AWS from Claude Code」という見出しと、簡単な自己紹介が入ったシンプルなページでお願いします- リージョンは
ap-northeast-1（東京）を使ってください- バケット名は世界中で重複しないよう、末尾にランダムな文字列を付けてください
- 静的ウェブサイトホスティングを有効にして、インターネットから見られる状態にしてください
- 各コマンドを実行する前に、そのコマンドが何をするものなのか一言ずつ説明してください
- 最後に、アクセスできる URL を教えてください
最後から2番目の指示が重要です。
「説明してから実行して」と伝えておくと、Claude が毎回解説を挟んでくれます。
承認するかどうかの判断材料になりますし、そのまま教材になります。
前回 CLAUDE.md に同じ趣旨を書いていれば、毎回指示しなくても説明してくれるはずです。
手順3: 承認しながら進める
ここからは、Claude が順にコマンドを提案してきます。
ひとつずつ内容を読んでから承認してください。
流れるコマンドは、だいたい次の5つです。
| 順番 | コマンド | 何をするか |
|---|---|---|
| 1 | aws s3 mb s3://バケット名 | バケット（ファイル置き場）を作る |
| 2 | aws s3api put-public-access-block ... | 公開を禁止する設定を解除する |
| 3 | aws s3api put-bucket-policy ... | 「誰でも読んでよい」というルールを設定する |
| 4 | aws s3 website s3://バケット名 ... | Web サイトとして公開する設定を有効にする |
| 5 | aws s3 cp index.html s3://バケット名/ | ファイルをアップロードする |
index.html の作成は、VS Code のエディタ上で行われます。
どんな HTML が作られたのか、目で見て確認できます。 これが VS Code を使う利点です。
なぜ「公開する」のに手間がかかるのか
2番目と3番目のコマンドを見て、「公開するだけなのに面倒だな」と思われたかもしれません。
これは AWS がわざとそうしています。
シリーズのステップ2で「S3 のブロックパブリックアクセス」を確認しましたが、S3 は初期状態で「公開できない」ようになっています。
「意図せず全世界に公開してしまった」という事故が、クラウドで最も多い情報漏洩の原因だからです。
つまり、公開するには「本当に公開していいんですね？」という関門を2つ通る必要があるわけです。
面倒に感じますが、逆に言えば、うっかり公開されることはないということです。
今回は「公開したい」と分かって解除しているので問題ありません。
手順4: ブラウザで開いてみる
すべて完了すると、Claude が URL を教えてくれます。
東京リージョンの場合、こんな形式になります。
http://バケット名.s3-website-ap-northeast-1.amazonaws.com
ブラウザで開いてみてください。
あなたが作ったページが、世界中からアクセスできる状態でインターネット上に存在しています。
おめでとうございます。ここがこのシリーズのゴールです。
URL が http:// になっていることに注目
先ほど触れたとおり、S3 のウェブサイト機能は HTTPS に対応していません。
ブラウザのアドレスバーに「保護されていない通信」と出ているはずです。
壊れているわけではなく、そういう仕様です。
なお、リージョンによって URL の形式が2種類あります（s3-website- と s3-website. の違い）。
東京リージョンはハイフンのほうです。Claude が教えてくれた URL をそのまま使えば問題ありません。
手順5: マネジメントコンソールでも確認する
ここはぜひやってください。
AWS のマネジメントコンソールを開き、検索窓で「S3」と検索してみてください。
さきほど作られたバケットが、一覧に並んでいるはずです。
コマンドで作ったものが、画面上の実体として存在している。
この感覚をつかむことが、AWS を理解するうえでいちばん大事な部分だと思っています。
「Claude が何かをやってくれた」ではなく、
「S3 バケットが作られ、公開設定がされ、ファイルが置かれた」と説明できる状態になっていれば、今日の目的は達成です。
【必須】後片付け：作ったものを消す
ここを飛ばさないでください。
今回作ったものは、放置しても月に数円程度です。
しかし、「作ったら消す」を習慣にしておかないと、いずれ痛い目に遭います。
EC2（サーバー）や RDS（データベース）、NAT ゲートウェイといったサービスは、消し忘れると月に数千円〜数万円になります。
金額が小さい今のうちに、手順を体に入れておきましょう。
Claude Code に依頼する
パネルにこう入力してください。
さきほど作成した S3 バケットを、中のファイルごと完全に削除してください。削除の前に、対象のバケット名を確認させてください。
実行されるのは、おおむね次のコマンドです。
aws s3 rb s3://バケット名 --force
--force は「中身ごと消す」という意味です。
バケットは、空でないと削除できないためです。
前回の安全設定で aws s3 rb を「必ず確認する」ルールに入れてあるので、ここで確認が求められるはずです。
設定がちゃんと働いていることを、ここで実感できます。
消えたことを確認する
aws s3 ls
さきほどのバケットが一覧から消えていれば完了です。
念のため、マネジメントコンソールの S3 画面でも消えていることを確認してください。
「消したつもり」がいちばん危険です。
消し忘れると課金が続くもの
今回は S3 だけでしたが、今後のために挙げておきます。
| リソース | 危険度 |
|---|---|
| NAT ゲートウェイ | 結構お高い。 何もしなくても月数十ドル規模 |
| RDS データベース | 高い。停止しても7日で自動的に再起動する |
| EC2 インスタンス | 高い。停止しても EBS（ディスク）の料金は残る |
| Elastic IP | 中。停止中のインスタンスに紐づいていても課金される |
| EBS ボリューム・スナップショット | 中。インスタンスを消しても残ることがある |
| S3 のオブジェクト | 低い。ただし消さない限り永久に残る |
HTTPS にしたい場合は
学習の範囲を超えますが、方向性だけ書いておきます。
S3 単体では HTTPS にできないため、別のサービスを組み合わせる必要があります。
| 方法 | 特徴 |
|---|---|
| AWS Amplify Hosting | AWS が公式に推奨している方法。 CDN と HTTPS 込みで、比較的簡単 |
| CloudFront を前に置く | 昔からある王道。設定項目は多いが、細かく制御できる |
現在、AWS のドキュメントでは Amplify Hosting の利用が推奨されています。
S3 に置いたコンテンツを、HTTPS の URL で配信できるマネージドサービスです。
なお、シリーズの最初の記事でも触れましたが、「静的サイトを公開したいだけ」なら Cloudflare Pages のほうが手軽で無料です。
今回 S3 を使ったのは、AWS の仕組みを理解することが目的だからです。目的に応じて道具は選んでください。
うまくいかないときは
Q. BucketAlreadyExists というエラーが出ます
A. S3 のバケット名は世界中で重複できません。ありがちな名前は既に使われています。Claude に「バケット名にランダムな文字列を付けて作り直して」と頼んでください。
Q. AccessDenied が出ます
A. IAM ユーザーの権限を確認してください。シリーズのステップ2で PowerUserAccess を付けていれば足りるはずです。また、リージョンが ap-northeast-1 になっているかも確認してください。
Q. ExpiredToken が出ます
A. ログインセッションが切れています。ターミナルで aws login を実行し直してください。
Q. URL を開いても 403 Forbidden が出ます
A. 公開設定が完了していない可能性があります。Claude に「バケットのブロックパブリックアクセス設定とバケットポリシーを確認して、公開されている状態か調べてください」と頼んでみてください。
Q. URL を開いても 404 Not Found が出ます
A. index.html がアップロードされていないか、インデックスドキュメントの設定が違う可能性があります。aws s3 ls s3://バケット名/ で中身を確認してください。
Q. コマンドがブロックされました
A. 前回設定した deny ルールに引っかかっています。今回の手順で必要なコマンドは禁止していないはずなので、想定外の操作が行われようとした可能性があります。内容を確認してから判断してください。
Q. 「保護されていない通信」と表示されます
A. 仕様です。S3 のウェブサイト機能は HTTPS に対応していません。
よくある質問
Q. 独自ドメインは使えますか？
A. 使えます。ただし Route 53 などで DNS の設定が必要で、HTTPS にしたい場合は CloudFront か Amplify も必要になります。この記事の範囲を超えるので扱いません。
Q. 消さずに残しておいてもいいですか？
A. かまいませんが、放置するなら「何を作ったか」を記録しておいてください。数か月後に請求を見て「これは何だ？」となるのが、いちばんよくないパターンです。
Q. HTML を書き換えたいときは？
A. VS Code で index.html を編集し、Claude に「更新した index.html をアップロードし直してください」と頼めば反映されます。
Q. 複数ページのサイトも作れますか？
A. 作れます。ファイルを増やしてアップロードするだけです。Claude に「about.html も作って一緒に公開して」と頼んでみてください。
Q. これで「Web サイトを作れる」と言っていいですか？
A. 静的なサイトについては、そう言って差し支えないと思います。ただし問い合わせフォームのように「データを受け取る」機能は、これだけでは作れません。その場合は Lambda などが必要になります。
さいごに
Claude Code に日本語で指示して、AWS 上に Web サイトを公開するところまでを解説しました。
やったことをまとめます。
- Claude Code に日本語で指示する
- 流れるコマンドの意味を読みながら承認する
- ブラウザで公開されたページを開く
- マネジメントコンソールで実体を確認する
- 後片付けをする
ここまでで、シリーズの当初のゴールは達成です。
「AWS はよく分からない」だった状態から、自分で AWS 上にリソースを作り、公開し、削除するところまでを一通り経験しました。
たった1枚の HTML ですが、やっていることは実際の Web サービスの土台と同じです。
ここから先に進みたい方へ
このシリーズには続きがあります。
ステップ8では GitHub を使って、書いたコードを記録に残せるようにします。
「昨日の状態に戻したい」ができるようになり、開発がぐっと安心になります。
ステップ9と10では、手で打っていたコマンドをコードにして、自動で反映される仕組みを作ります。
どちらも「あると便利」ではなく、実際の開発現場で当たり前に使われているものです。
副業やキャリアを考えている方は、ぜひ進んでみてください。
シリーズの全体像は、ロードマップから確認できます。
KUDs のサービス
KUDs では、実際に AWS 上で動く Web サービスを公開しています。
「個人でもこのくらいのものは作れる」という参考にしていただければ嬉しいです。
ご質問やご指摘は contact@kuds.jp までお寄せください。
「ここで詰まった」という報告は、記事を良くするうえでいちばんありがたいフィードバックです。
コメント