はじめに

この記事は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合格直後にこの構成を自分で一から組んでみると、模試で丸暗記していた知識が「なるほど、こういうことか」と腑に落ちる瞬間が何度もある。試験勉強と並行して手を動かすのがおすすめ。

参考