🏃

独自ドメインで CloudFront にアクセスできるようにする方法

2023/12/27に公開

🎯目的

Route 53で購入した独自ドメインでCloudFrontにアクセスできるようにする方法をまとめて、再現できるようにする


AWS構成例

💡前提

以下のページで作成したCloudFront + S3構成のVue.jsのサイトにhttps://***.cloudfront.netではなくhttps://my-tech-portfolio.comのように独自ドメインで公開する方法を紹介します。Vue.jsやS3を利用しなくとも同様の方法で設定できるはずなので参考にしてください。
https://zenn.dev/taiyou/articles/144e9e4fb168af

  • ドメインはAWS Route 53で購入します。
  • SSLや名前解決の仕組みなどは解説しません。

🏃‍♀️手順

1. Route 53 で独自ドメインを購入する

Route 53の「ドメインを登録」にアクセスして、購入したいドメイン名を入力し、購入手続きを完了させます。


購入したいドメイン名を入力してください


「チェックアウトに進む」をクリックしてください


以降、購入手続きを完了させます

購入後、10分ほど経過したら、「登録済みドメイン」画面にて購入したドメインが表示されるようになります。

2. ACM でSSL証明書を発行する

購入した独自ドメインに対して、httpsでアクセスできるようにするために Amazon Certificate Manager でSSL証明書を発行します。

Certificate Manager | us-east-1


購入したドメイン名を入力し、一番下の「リクエスト」ボタンをクリックしてください


変更が反映されるまで10分ほど待ってください

3. CloudFront の設定を変更する

独自ドメインでアクセスする作成済みの CloudFront ディストリビューションの設定画面から「代替ドメイン名」「カスタムSSL証明書」を指定してください。

4. Route 53 のホットゾーンを更新し、独自ドメインでアクセスできるようにする

「レコードを作成」を押して、10分ほど経過したら独自ドメインでサイトにアクセスできるようになります。

🔗APPENDIX

Discussion