AWS で Web サイトを公開するまでの全体像

この記事で分かること

• 「公開する」とは技術的に何をすることか
• AWS のよく使うサービスと、それぞれの役割
• お金をほとんどかけずに公開する構成
• 静的サイト（HTML/CSS/JS）を実際に公開する手順
• 料金で失敗しないための、最初にやる設定

所要時間は読むだけなら 40 分、手を動かすなら 90 分です。

「公開する」とは

ここまで作ったページは、あなたのパソコンの中にあります。他の人が見るには、インターネットにつながっていて、24 時間動いているコンピュータ にファイルを置く必要があります。そのコンピュータを貸してくれるのが、AWS（Amazon Web Services）のようなクラウドサービスです。

公開に必要なものは、大きく3つです。

1. ファイルを置く場所（サーバー、またはストレージ）
2. 住所（ドメイン：example.com のような名前）
3. 鍵（HTTPS の証明書：ブラウザの鍵マーク）

AWS のよく使うサービス

AWS には 200 以上のサービスがありますが、最初に知っておくべきものは少数です。

サービス	役割	たとえると
S3	ファイル置き場。HTML や画像をそのまま公開できる	倉庫
CloudFront	世界中の拠点からファイルを高速配信。HTTPS もここで	配送センター
Lambda	プログラムを「必要なときだけ」実行。サーバーの管理不要	呼んだら来るアルバイト
EC2	仮想のパソコンを借りる。何でも入れられる	一室を借りる
RDS	データベース（MySQL など）を管理してくれる	金庫つきの帳簿係
Route 53	ドメインの管理（住所録）	郵便局
ACM	HTTPS の証明書を無料で発行	鍵屋
IAM	誰が何をしていいかの権限管理	警備室

お金をかけない構成

AWS は「使った分だけ支払う」しくみで、無料枠 があります。

• 静的サイト（HTML/CSS/JS だけ）：S3 + CloudFront。月に数十万アクセスあっても、ほぼ0円。
• 簡単なサーバー処理（フォームの受信など）：Lambda。月 100 万回の実行まで無料。
• Laravel のようなアプリ：EC2 か、コンテナ（ECS）。EC2 は 12 か月の無料枠のあと、最小サイズで月 1,000〜2,000 円程度。

最初は 静的サイト + Lambda の構成をおすすめします。管理するサーバーがなく、料金もほぼかかりません。実はこのスクールのサイト自体も、この構成で動いています。

手を動かす：静的サイトを S3 + CloudFront で公開する

前提：AWS アカウントを作成済み（クレジットカードの登録が必要です）。

1. S3 にバケットを作る

1. AWS コンソールで「S3」を開き、「バケットを作成」
2. 名前は世界で一意（例：mysite-yamada-2026）。リージョンは「東京」
3. 「パブリックアクセスをすべてブロック」は オンのまま（CloudFront 経由で公開するので、S3 自体は非公開でよい）
4. 作成したら、index.html や style.css をアップロード

2. CloudFront でディストリビューションを作る

1. 「CloudFront」→「ディストリビューションを作成」
2. オリジン：先ほどの S3 バケットを選択
3. 「オリジンアクセス」→「Origin access control settings（OAC）」を選び、新規作成。表示されるバケットポリシーを S3 に貼る
4. 「デフォルトルートオブジェクト」に index.html
5. 作成。10 分ほど待つと xxxx.cloudfront.net の URL で見られます

これで、世界中から HTTPS で見られる状態になりました。

3. 独自ドメインをつける（任意）

1. ドメインを取得（Route 53、またはお名前.com などの業者。年 1,000〜2,000 円）
2. 「ACM」（必ずバージニア北部リージョン）で証明書を発行。DNS 検証で表示されるレコードをドメインの設定に追加
3. CloudFront の設定で「代替ドメイン名」に取得したドメイン、証明書に発行したものを指定
4. ドメインの DNS で、CNAME を xxxx.cloudfront.net に向ける

「ACM はバージニア北部で」は、CloudFront を使うときの決まりです。東京で発行すると CloudFront で選べないので注意してください。

Lambda でフォームを受け取る（概要）

「お問い合わせフォームの内容をメールで受け取りたい」のような処理は、Lambda で書きます。

1. Lambda 関数を作成（ランタイムは Node.js か Python）
2. 「関数 URL」を有効にすると、https://xxxx.lambda-url.ap-northeast-1.on.aws/ のような URL で呼べる
3. ページの JavaScript から fetch でその URL に POST
4. Lambda の中で内容を確認し、SNS（メール通知）や DynamoDB（保存）に渡す

サーバーを立てず、使ったときだけ数ミリ秒ぶんの料金がかかる、という考え方です。この構成に慣れると、月 0 円でかなりのことができます。

料金で失敗しないために、最初にやること

AWS で一番多い失敗は「気づかないうちに課金されていた」です。アカウントを作ったら、サイトを公開する前に 次の3つを設定してください。

1. 予算アラート：「Billing」→「Budgets」で、月 500 円を超えたらメールが来るように設定
2. MFA（二段階認証）：ルートユーザーに必ず設定。乗っ取られると高額請求につながります
3. ルートユーザーを日常で使わない：IAM で作業用ユーザーを作り、普段はそちらでログイン

また、練習で作ったもの（特に EC2、RDS、NAT ゲートウェイ）は、使い終わったら 必ず削除 します。「停止」ではなく「削除（終了）」です。

AI と一緒に進めるコツ

AWS の設定は画面が多く、手順が変わることもあります。AI に頼むなら、次のように やりたいことと制約 を伝えます。

静的サイト（index.html と style.css）を AWS で公開したい。
S3 + CloudFront、OAC で S3 は非公開のまま。独自ドメインはまだ使わない。
AWS CLI でのコマンド手順を、順番に説明して。各コマンドが何をするかも一言ずつ。

さらに慣れてきたら、CDK や Terraform といった「設定をコードで書く」道具を使うと、AI との相性が抜群によくなります。設定画面をクリックする代わりに、コードを書いて deploy するだけで環境ができます。

やってみよう

1. 予算アラートと MFA を設定する（これだけは必ず）。
2. 自己紹介ページを S3 + CloudFront で公開し、スマホから開いてみる。
3. 公開した URL を友人に送って、感想をもらう。

3つ目は技術ではありませんが、「人に見せる」経験が次の学習の原動力になります。

つまずきやすいところ

• CloudFront の URL で Access Denied → OAC のバケットポリシーが S3 に貼られていない、または index.html の名前違い。
• 更新したのに古いまま → CloudFront のキャッシュ。「キャッシュ削除（Invalidation）」で /* を指定。
• 証明書が CloudFront で選べない → バージニア北部で発行していない。
• 請求が来た → EC2 や RDS の消し忘れが大半。「Billing」で内訳を確認。

まとめ

• 公開に必要なのは「置き場所・住所・鍵」。
• 静的サイトは S3 + CloudFront でほぼ0円。処理は Lambda。
• ACM はバージニア北部。キャッシュは Invalidation。
• 公開する前に、予算アラートと MFA。

次は「つまずいたときの調べ方・質問のしかた」です。ここまでの学習で必ず出てくる「わからない」を、自力で突破する方法をまとめます。