記事の内容
前回の記事で、簡単に独自ドメインを作成出来ました。
今回は、作成した独自ドメインを使用して、静的サイトを公開してみます。
対象読者
AWS 初〜中級者。最小構成で安全にhttps公開の手法を知りたい人
記事の長さ
5分で読めます。
30〜60分で構築可能（ACMのDNS検証/CloudFrontの有効化待ち時間を含む）
実行手順
1.ドメイン取得
前回の記事で作成したものを使用します。
2. Route53 にパブリックホストゾーンを作成
Route 53 > Hosted zones > Create hosted zone
-
Domain name：
登録したドメイン名 - Type：Public hosted zone
ホストゾーンを選択
ドメイン名を入力し、Create。
作成直後に表示される NS と SOA を確認。
Xserver 管理画面で当該ドメインの ネームサーバを「Route 53 の NS（4つ）」へ変更。
-
※各自使用しているドメインサービスのやり方に従ってください。
3.S3バケットを作成
-
S3 > Create bucket
-
Bucket name：任意（例）
rt-artjp-site-origin（ドメイン名と一致させる必要はありません） - Block Public Access：有効のまま（全部 ON）
- バージョニング任意（ON 推奨）
-
Bucket name：任意（例）
- バケット作成後に
index.htmlをアップロード。- 例の最小 HTML は本文末「付録」を参照。
- 例の最小 HTML は本文末「付録」を参照。
4. ACMリクエスト
CloudFront は us-east-1 の証明書のみアタッチ可能。
-
コンソール右上のリージョンが us-east-1 になっていることを確認。
-
Certificate Manager > Request a certificate > Request a public certificate
そのまま次へ
ドメイン名を入力して、create。
※注意：必ず、作成後にRoute53レコード作成というボタンをクリックしてください。
5. CloudFrontディストリビューションを作成
作成をクリック
好きな名前を入力
S3を選択し、さっき作ったs3バケット名を選択。
有効にしないでください。を選択
確認後、Create。
作成後、作成されたディストリビューションを選択し、Add.Domainを選択
ドメイン名を入力
ACMが正常に紐づいていれば、自動的にACMが表示される。Nextへ
完成画面。ドメイン名とACM、index.htmlが設定されてあることを確認。
6. Route53でAレコード作成
Cloudfrontディストリビューション名(AWSが自動で割り当ててくれる CloudFrontの公開用ドメイン名)を、自分のドメインに解決するようにします。
Route53 >Hosted zone > Create record
Record name*：空欄（＝ルート）
- Record type：A
- Alias：Yes
-
Route traffic to：CloudFront distribution を選択（
dxxxxxxxx.cloudfront.net） - Create records
7.ブラウザで動作確認
** https://自分のドメイン名/** でやってみましょう。
まとめ
・独自ドメインを取得し、Route53・S3・ACM・CloudFrontを組み合わせることで、最小構成で https 対応の静的サイト公開が可能。
・今回の手順をベースに、静的ポートフォリオサイトや転職用の経歴書公開などにすぐ応用できます。
使用したindex.html
## 付録：最小 `index.html`
~~~html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>rt-art.jp</title>
<style>
body { font-family: system-ui, sans-serif; margin: 0; display: grid; place-items: center; min-height: 100vh; }
.card { padding: 2rem 3rem; border: 1px solid #ddd; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
</style>
</head>
<body>
<main class="card">
<h1>🚀 Hello from CloudFront + S3</h1>
<p>このページは <strong>rt-art.jp</strong> を CloudFront 経由で配信しています。</p>
</main>
</body>
</html>
~~~