はじめに
この記事はZennにも掲載しています。
AWS SAA合格後、「せっかくなら手を動かして何か作ろう」と思い、独自ドメインのポートフォリオサイトを構築した。完成した構成はこうなっている。
exobrainlab.com
↓ (Cloudflare DNS → CNAME)
CloudFront (CDN + HTTPS)
↓ (OAC)
S3 (静的サイトホスティング)
↑
ACM (SSL証明書 / us-east-1)
使用サービスと費用感は以下のとおり。
| サービス | 用途 | コスト |
|---|---|---|
| AWS ACM | SSL/TLS証明書 | 無料 |
| AWS S3 | 静的ファイルホスティング | ほぼ無料 |
| AWS CloudFront | CDN | ほぼ無料 |
| Cloudflare | ドメインレジストラ + DNS | 無料プラン |
個人サイトレベルであれば、実質ドメイン代だけで運用できる。
前提条件
- AWSアカウント取得済み
- Cloudflareでドメイン取得済み（本記事では
exobrainlab.com）
Step 1：ACMでSSL証明書を発行する
ACMは必ず バージニア北部（us-east-1） で作成すること。CloudFrontはus-east-1のACM証明書しか使えない。リージョンを間違えると後で詰む。
AWSコンソール右上でリージョンを「米国東部（バージニア北部）us-east-1」に切り替えてから、検索バーで「ACM」を開き、「証明書をリクエスト」をクリックする。
「完全修飾ドメイン名」には以下の2つを入力する。
exobrainlab.com
*.exobrainlab.com
*.exobrainlab.com はワイルドカード証明書で、www等のサブドメインもまとめてカバーできる。
その他の設定：
- 検証方法：DNS検証（推奨）
- キーアルゴリズム：RSA 2048
リクエスト完了後、「CSVにエクスポート」でCNAMEレコードをダウンロードする。中身はこのような形になっている。
ドメイン名,CNAME 名,タイプ,CNAME 値
exobrainlab.com,_678be728d57cddfaf3b9463779e56bfb.exobrainlab.com.,CNAME,_e3aa67a6704effbd39ea834239fa759a.jkddzztszm.acm-validations.aws.
Step 2：CloudflareにACM検証用CNAMEを追加する
CloudflareのダッシュボードでDNS → Records を開き、「Add record」をクリック。
| 項目 | 値 |
|---|---|
| Type | CNAME |
| Name |
_678be728d57cddfaf3b9463779e56bfb（CNAME名からドメイン部分を除いたもの） |
| Target | _e3aa67a6704effbd39ea834239fa759a.jkddzztszm.acm-validations.aws. |
| Proxy status | DNS only（グレー） |
Proxy statusは必ず DNS only（グレーの雲） にすること。オレンジのプロキシ状態のままだとACMの検証が通らない。
数分〜30分でACMのステータスが「発行済み」に変わる。
Step 3：S3バケットを作成する
S3を開いて「バケットを作成」をクリック。設定はシンプルでいい。
- バケット名：
exobrainlab-website（任意） - リージョン：任意
- ACL：無効（推奨）
- パブリックアクセス：すべてブロック（そのまま）
CloudFront + OACの構成ではバケット名をドメインと一致させる必要はない。
「パブリックアクセスをすべてブロック」のままで問題ない。アクセス制御はCloudFront側のOACで行う。
Step 4：CloudFrontディストリビューションを作成する
CloudFrontを開いて「ディストリビューションを作成」をクリック。
主な設定：
- Distribution name：
exobrainlab-website - Origin type：Amazon S3
- S3 origin：「Browse S3」で作成したバケットを選択
- Allow private S3 bucket access to CloudFront：チェックあり（OAC設定）
- WAF：「セキュリティ保護を有効にしないでください」を選択（月$14かかるため）
作成完了後、「Add domain」をクリックして代替ドメインとSSL証明書を設定する。
exobrainlab.com
www.exobrainlab.com
ACMで発行した証明書が自動で表示されるので選択する。
続けて「Default root object」に index.html を設定する。
この設定を忘れると https://exobrainlab.com/ にアクセスしてもサイトが表示されない。必ず設定すること。
Step 5：CloudflareのDNSをCloudFrontに向ける
CloudflareのDNS RecordsでCNAMEレコードを2つ追加する。
ルートドメイン用：
| 項目 | 値 |
|---|---|
| Type | CNAME |
| Name | @ |
| Target |
d3nu0979n5fl7d.cloudfront.net（自分のCloudFrontドメイン） |
| Proxy status | DNS only |
www用：
| 項目 | 値 |
|---|---|
| Type | CNAME |
| Name | www |
| Target | d3nu0979n5fl7d.cloudfront.net |
| Proxy status | DNS only |
ここでもProxy statusは DNS only にする。Cloudflareのプロキシを通すとCloudFrontとの二重CDNになってしまい、証明書の検証が正常に動作しない。
Step 6：index.htmlをS3にアップロードして動作確認
S3バケットに以下のHTMLをアップロードする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Exobrain Lab</title>
</head>
<body>
<h1>Exobrain Lab</h1>
<p>Coming soon.</p>
</body>
</html>
ブラウザで https://exobrainlab.com にアクセスして「Exobrain Lab / Coming soon.」が表示されれば完成。
DNSの伝播には数分かかる場合がある。表示されない場合は少し待ってから再度アクセスしてみること。
まとめ
| 観点 | ポイント |
|---|---|
| セキュリティ | S3はパブリックアクセス完全ブロック。OACでCloudFrontのみアクセス許可 |
| コスト | 個人サイトレベルはほぼ無料。WAFだけ月$14かかるので不要なら外す |
| 学習効果 | この構成はSAA-C03の試験範囲と完全に一致。手を動かすことで試験知識が実感として定着する |
SAA合格直後にこの構成を自分で一から組んでみると、模試で丸暗記していた知識が「なるほど、こういうことか」と腑に落ちる瞬間が何度もある。試験勉強と並行して手を動かすのがおすすめ。