S3 + CloudFront + ACM + Route53 を利用して独自ドメインの静的サイトを HTTPS 配信してみた
はじめに
テクニカルサポートの 片方 です。
本ブログでは、Amazon S3 + Amazon CloudFront + AWS Certificate Manager + Amazon Route 53 を利用して、独自ドメインの静的サイトを HTTPS 配信する手順を紹介します。
構成としては、静的ファイルを Amazon S3 バケットに配置し、Amazon CloudFront 経由で配信します。S3 バケットはパブリック公開せず、CloudFront の Origin Access Control を利用して、CloudFront 経由でのみアクセスできるようにします。
また、AWS Certificate Manager で発行した証明書を CloudFront に設定し、Amazon Route 53 で独自ドメインを CloudFront に向けることで該当の静的サイトを公開します。
やってみた
Route 53
Route 53 で検証用のドメインを取得します。
なお、今回は検証用なので最安値の .click で作成しました。
完了したら ACM より証明書のリクエストを行うために、us-east-1 リージョンへ移動します。
ACM
CloudFront ディストリビューションに ACM 証明書を関連付ける場合、証明書は米国東部（バージニア北部）リージョン（us-east-1）でリクエストまたはインポートする必要があります。
CloudFront ディストリビューションで ACM 証明書を使用するには、米国東部 (バージニア北部) リージョン (us-east-1) の証明書をリクエスト (またはインポート) していることを確認します。
ここでは、先ほど取得したドメイン (完全修飾ドメイン名) を記述します。
検証方法には DNS 検証を選択し、その他の項目はデフォルト設定のまま進めます。
リクエストを行うと以下のように、ステータス "保留中の検証" となります。
追加の作業を行うために 「Route 53 でレコードを作成」 を選択します。
画面が遷移したら、Create records をクリックします。
元の画面に戻り、ステータスが Pending validation (検証待ち) になります。
ステータスが「発行済み」になるまでしばらく待ちます。
発行済みとなれば、終了です。
念のため、Route 53 側でもホストゾーン (test-hp.click) で CNAME が追加されているか確認します。
S3 バケット
S3 バケットを作成します。その際に適当な index 用の HTML ファイルのアップロードします。
なお、パブリックアクセスのブロックをすべてオンの状態で進めます。
また、この構成では S3の静的ウェブサイトホスティング機能 は利用せず、S3 バケットを CloudFront の S3 オリジンとして設定します。S3 のウェブサイトエンドポイントをオリジンにする場合はカスタムオリジン扱いとなり、OAC は利用できません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1>Hello World!</h1>
<p>テストホームページ</p>
</body>
</html>
CloudFront
ここからは、CloudFront 側で設定を行います。左ペインよりディストリビューションを作成します。
まずは、料金プランを選択します。今回は無料 $0/month を選択しました。
この料金プランの注意点としては、以下の弊社ブログをご確認ください。
その後に Distribution name を記述します。
また、Domain のセクションでは、取得したドメインを記述して "Check domain" をクリックします。
ドメインの確認に成功すると、以下のようなメッセージが表示されます。
Domain managed by Route 53
We found a Route 53 zone file in your account for test-hp.click. CloudFront can automatically manage your DNS for you.
次の作成画面では以下のように設定します。
- Origin type :S3
- S3 origin : index.html ファイルがアップロードされている S3 バケット
- オリジン設定 : Use recommended origin settings
Cache settings セクションでは以下のように設定します。
- ビューワープロトコルポリシー : Redirect HTTP to HTTPS
- 許可された HTTP メソッド : GET, HEAD, OPTIONS
あとは、デフォルトのままにします。
そのまま進みます。
Get TLS certificate のセクションでは、先ほど発行した証明書を設定します。
繰り返しとなりますが、us-east-1リージョン で発行していない場合は設定できません。
これで、新しいディストリビューションを作成します。
作成後、独自ドメインから CloudFront ディストリビューションへアクセスできるように、Route 53 で、CloudFront ディストリビューションを向き先とする Alias レコードを作成します。なお、"Set up routing automatically" をクリックすると自動で設定します。
作成されたディストリビューションのオリジン設定を編集します。
編集画面でポリシーをコピーします。その後、別タブで S3 のマネジメントコンソールを開きます。
以下のようなバケットポリシーが付与されていることを確認します。付与されていなければ、先ほどコピーしたポリシーを貼り付けます。
{
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontServicePrincipalReadOnly",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/EDFDVBD6EXAMPLE"
}
}
}
}
問題がなければ保存し、CloudFront 側のオリジン設定も更新します。
最後に、Default root object を修正します。こちらでは、index.html と記述します。
この設定により、ルート URL でアクセスした際に、CloudFront が default root object として index.html を返します。なお、S3 の静的ウェブサイトホスティングにおけるインデックスドキュメントとは挙動が異なり、サブディレクトリ配下の index.html が自動的に返されるわけではありません。
HTTPS で配信されていることを確認
代替ドメイン名で (例: test-hp.click) アクセスすると、HTTPS で配信されていることを確認できます。
これで、独自ドメインによる静的サイトの HTTPS 配信を確認できました。
サブドメインについて
代替ドメイン名を test-hp.click ではなく、sample-page.test-hp.click のように設定したい場合は、以下のように設定してください。
- ACM 証明書を作成または再作成する
証明書のドメイン名には、例えば以下を指定します。
sample-page.test-hp.click
今後、同一階層のサブドメインを増やす可能性がある場合は、ワイルドカード証明書として以下を指定できます。
*.test-hp.click
なお、test-hp.click のような apex ドメインも同じ証明書で利用したい場合は、test-hp.click も SAN として追加してください。
- 対象のディストリビューションで設定を編集する。
- Alternative domain name (CNAMEs) : sample-page.test-hp.click
- Custom SSL certificate - optional : 先ほどの証明書を選択 (*.test-hp.click)
- Route domains to CloudFront より DNS レコードを修正する。(自動)
これで完了です。
新規作成時は、上記を考慮して設定してください。
まとめ
本ブログが誰かの参考になれば幸いです。
参考資料
- CloudFront経由でS3の静的Webサイトを公開する手順 | DevelopersIO
- CloudFront で SSL/TLS 証明書を使用するための要件 - Amazon CloudFront
- Amazon S3 を使用して静的ウェブサイトをホスティングする - Amazon Simple Storage Service
- CloudFront ディストリビューションを使用して Amazon S3 バケットへのアクセスを制限する | AWS re:Post
- でパブリック証明書をリクエストする AWS Certificate Manager - AWS Certificate Manager
クラスメソッドオペレーションズ株式会社について
クラスメソッドグループのオペレーション企業です。
運用・保守開発・サポート・情シス・バックオフィスの専門チームが、IT・AIをフル活用した「しくみ」を通じて、お客様の業務代行から課題解決や高付加価値サービスまでを提供するエキスパート集団です。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、クラスメソッドオペレーションズ株式会社 コーポレートサイト をぜひご覧ください。※2026年1月 アノテーション㈱から社名変更しました
