AWSサーバーレスで独自ドメインのWebサイトを低コストで構築する
2025.07.14この記事では、AWS のサーバレスサービスを使用して独自ドメインのWebサイトを作成する方法を解説します。S3、Route53、CloudFrontを組み合わせることで、高可用性・高速・低コストなWebサイトを構築できます。
必要なもの
- AWSアカウント
- 基本的なWeb知識（HTML、CSS、JavaScript）
- 作業時間：約1-2時間
⚠️ 注意: 本手順ではバージニア北部（us-east-1）リージョンを使用します。CloudFrontとACMの連携には、このリージョンでの証明書作成が必要です。
アーキテクチャ概要
システム構成
[ユーザー] → [Route53] → [CloudFront] → [S3バケット]
↓ ↓
[DNS管理] [ACM証明書]
各サービスの役割
- S3: 静的Webサイトファイル（HTML、CSS、JS）のホスティング
- Route53: 独自ドメインの購入・管理とDNS設定
- CloudFront: 世界中へのコンテンツ高速配信（CDN）
- ACM: SSL証明書の自動発行・管理
1. S3バケットの作成と設定
S3（Simple Storage Service）とは
S3は、Webサイトのファイル（HTML、CSS、JavaScript、画像など）を保存・配信するためのクラウドストレージサービスです。静的Webサイトホスティング機能により、サーバーを持たずにWebサイトを公開できます。
手順1: S3バケットの作成
- AWSマネジメントコンソールにログイン
- S3サービスに移動
- 「バケットを作成」をクリック
- バケット設定を行う：
- バケット名: 一意の名前を指定
- 「バケットを作成」をクリック
⚠️ 重要: バケット名はAWS全体で一意である必要があります。既に使用されている名前は使用できません。
手順2: Webサイトファイルのアップロード
ファイル構造例
your-website-bucket/
├── index.html # メインページ
├── css/
│ └── style.css # スタイルシート
└── js/
└── script.js # JavaScript
手順3: ファイルのアップロード
- 「オブジェクト」タブをクリック
- 「アップロード」をクリック
- ファイルをドラッグ&ドロップ、または「ファイルを追加」でアップロード
- 「アップロード」をクリック
実際のS3バケット内では以下のように保存されます：
2. Route53でドメインを購入
Route53とは
Route53は、AWSが提供するドメイン名システム（DNS）サービスです。主な機能は以下の通りです：
- ドメイン登録: 独自ドメインの購入・管理
- DNS管理: ドメインとIPアドレスの紐付け
- ヘルスチェック: サービスの可用性監視
DNSの基本概念
- ドメイン名: 人間が読みやすいWebサイトの住所
- DNSレコード: ドメインとリソースの関連付け情報
- ホストゾーン: 特定のドメインのDNSレコードを管理するコンテナ
手順1: ドメインの購入
- Route53サービスのダッシュボードに移動
- 左メニューから「登録済みドメイン」→「ドメインの登録」をクリック
- 登録したいドメイン名を入力して「検索」をクリック
- 利用可能であれば選択して「チェックアウトに進む」をクリック
ドメイン設定
- 登録年数: 1年（自動更新推奨）
- 連絡先情報: 正確な情報を入力
- プライバシー保護: 有効化推奨（個人情報保護）
- 自動更新: 有効化推奨
- 利用規約に同意して「送信」をクリック
- 確認メールが届くので承認
- 支払い処理が完了すると、ドメインのステータスが「登録中」から「登録済み」に変更
手順2: ドメイン購入後の確認
- Route53の「登録済みドメイン」で購入したドメインを確認
- ドメインの詳細情報、有効期限、自動更新設定を確認
- ドメインの状態が「アクティブ」になっていることを確認
⚠️ 注意: ドメイン登録完了まで最大48時間かかる場合があります。
3. パブリックホストゾーンの作成
ホストゾーンとは
ホストゾーンは、特定のドメインのDNSレコードを管理するコンテナです。購入したドメインがどのサーバーに接続されるかを制御します。
手順1: ホストゾーンの作成
- Route53サービスの左メニューから「ホストゾーン」をクリック
- 「ホストゾーンの作成」をクリック
- ホストゾーン設定を行う：
- ドメイン名: 購入したドメインを入力
- タイプ: パブリックホストゾーンを選択
- 「ホストゾーンを作成」をクリック
手順2: DNSレコードの確認
ホストゾーン作成後、以下のレコードが自動生成されます：
- NSレコード（ネームサーバー）: ドメインのDNS管理権限を示す
- SOAレコード（Start of Authority）: ドメインの管理情報
4. CloudFrontディストリビューションの作成
CloudFrontとは
CloudFrontは、AWSが提供するコンテンツ配信ネットワーク（CDN）サービスです。世界中のエッジロケーションにコンテンツをキャッシュし、ユーザーに最も近い場所から高速配信を行います。
CDNを使用するメリット
- 高速化: 世界中のユーザーに高速でコンテンツを配信
- 可用性向上: 複数のサーバーで負荷分散
- セキュリティ: DDoS攻撃の軽減、WAF連携
- HTTPS対応: 無料SSL証明書の自動管理
- コスト削減: Origin（S3）への直接アクセス削減
手順1: ディストリビューションの基本設定
- CloudFrontサービスのディストリビューションに移動
- 「ディストリビューションを作成」をクリック
- Distribution nameに任意の名前を入力
- Single website or appを選択
- Custom domainには購入したドメインを入力
- 「Check domain」で成功を確認後、次へ
手順2: Origin（配信元）の設定
Originは、CloudFrontがコンテンツを取得する元となるサーバーです。
- Origin typeはAmazon S3を選択
- S3 originに作成したS3バケットを選択
- Settings は Allow private S3 bucket access to CloudFront を選択
- オリジン設定 で Use recommended origin settings を選択
- 次へ
手順3: セキュリティ設定
WAF設定
- WAF設定で「有効にしない」を選択
手順4: SSL証明書の設定
SSL証明書の作成
- TLS certificateではCreate certificateを選択
- 証明書の作成が成功した場合は次へ進む
証明書の検証でエラーが発生した場合
「Unable to validate certificate in Certificate Manager. Try again later.」が表示された場合：
- ACMサービスに移動
- 証明書のステータスが「保留中の検証」から「発行済み」に変わるまで待機
- 「CloudFrontディストリビューションの作成」の手順を再実行
手順5: ディストリビューションの作成
- 設定を確認し、「ディストリビューションを作成」をクリック
- ディストリビューションの作成が開始されます（完了まで5-10分）
手順6: DNS設定の実行
- 作成されたディストリビューションをクリック
- 「Route domains to CloudFront」をクリックしてDNS設定を実行
- Route53のホストゾーンでAレコードが自動作成されることを確認
手順7: 詳細設定（オプション）
ディストリビューション作成後に、以下の最適化設定を行います：
- ディストリビューションの詳細画面で「編集」をクリック
- Supported HTTP versionsでHTTP/2とHTTP/3を両方選択
- Default root objectをindex.htmlに設定
- 「変更を保存」をクリック
5. 最終確認
- ディストリビューションのステータスが「有効」になるまで待機
- ディストリビューションドメイン名でアクセス確認
- カスタムドメインでもアクセス可能か確認
最後に
S3、Route 53、CloudFront、ACM といったサーバーレスサービスを組み合わせることで、独自ドメインの Web サイトを非常に低コストで運用できます。ドメイン登録費用を除く維持費は月額約 1 USD、通信費はアクセス量に応じて発生する形のため、個人でも手軽に、自分だけの Web サイトを世界中に公開できる理想的な構成です。
アノテーション株式会社について
アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。
