0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【備忘】CloudFront に独自ドメインを割り当ててみた

Posted at

はじめに

Amazon CloudFront を使うと、S3 上の静的コンテンツを配信できる。
CloudFront のディストリビューションに対して DNS で CNAME を設定するだけで独自ドメインからアクセスできるかを確認した。


CloudFront ディストリビューションでのアクセス

まずは CloudFront の標準ドメイン名を利用。

  • ディストリビューションドメイン名:
    dXXXXXXXXXi.cloudfront.net

image.png

S3 バケットに配置した test.html を以下の URL でアクセス。

https://dXXXXXXXXXi.cloudfront.net/test.html

正常に表示された。

image.png


独自ドメインでのアクセス

次に独自ドメイン YYY-ZZZ.com を利用。

Route 53 に以下の CNAME レコードを追加。

  • レコード名: www999-test.YYY-ZZZ.com
  • 値: dXXXXXXXXXi.cloudfront.net

image.png

DNS 反映後に以下へアクセス。

https://www999-test.YYY-ZZZ.com/test.html


結果

独自ドメイン経由では 403 ERROR

image.png


原因

DNS に CNAME を作成するだけでは独自ドメインは利用不可。

  • CloudFront ディストリビューションに 代替ドメイン名 (CNAME) を登録していない場合、403 となる
  • 代替ドメイン名を利用するには、そのドメインをカバーする有効な TLS 証明書 (ACM, us-east-1) が必要

参考:


CloudFront の代替ドメイン名に設定

実際に代替ドメイン設定を行った。

ACM で証明書発行

対象ドメイン www999-test.YYY-ZZZ.com で証明書を発行。

image.png

CloudFront に代替ドメインを登録

CloudFront の代替ドメイン名に www999-test.YYY-ZZZ.co を追加し、発行した証明書を関連付け。

image.png

image.png

再度アクセス

設定がデプロイされた後、以下の URL にアクセス。

https://www999-test.YYY-ZZZ.com/test.html

テストページが表示された。

image.png


まとめ

  • CloudFront の標準ドメインでは正常にアクセス可能
  • DNS に CNAME を設定しただけでは 403 エラー
  • 代替ドメイン名の追加と有効な TLS 証明書の設定を行うことで、独自ドメイン経由でのアクセスが可能となる

百聞は一見にしかずですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?