したたかに。したたかに。

webプログラマーです。2020年2月からフリーランスになります。フリスビーを投げるのが趣味です。

S3を使用した静的サイトを独自ドメインでhttpsでつなぎたい時にすべきこと

やること

やることは以下の4つ

  • ドメインの取得(今回はお名前.comを使用)
  • ネームサーバーの設定
  • SSL用の証明書の発行
  • CloudFrontの設定

今回、S3にデプロイしている自分のポートフォリオサイト独自ドメイン化しましたが、その際にやったこと・参考にした記事などを記録します。

前提として、S3への静的サイトのアップロードは既に完了しており、ドメインの設定がまだである前提で記載します。

S3を使用して静的サイトを公開したい方々は一定数いると思いますので、そういった方々の参考になれば幸いです。

やったこと

ドメインの取得(今回はお名前.comを使用)

まず初めにすべきことはドメインを取得すること。
今回は"nozomikawakami.com"というドメインお名前.comで購入しました。

ネームサーバーの設定

次に、お名前.comで購入したドメインAWS(Route53)上で使用可能にするための設定を行います。

参考にしたのはこちらの記事

qiita.com

SSL用の証明書の発行

次に独自ドメインhttpsでアクセス可能とするために必要な証明書の取得を行います。

参考にしたのはこちら

dev.classmethod.jp

こちらの記事の

AWS Certificate Manager(ACM)で証明書の取得 というセクションに従えば、証明書の取得が可能であるはずです。

CloudFrontの設定

最後に、上記の記事の

CloudFrontディストリビューションの作成 のセクションに従い、S3とCloudFrontを紐づけます。 ただ、一点注意が必要な点が、[Origin Domain Name]の設定です。

S3のバゲットを設定する際に、選択リストが表示されますが、それらは選択せず、S3の管理画面に表示されているエンドポイントを記入しましょう。

f:id:nozomi_k:20191215115804p:plain

f:id:nozomi_k:20191215120441p:plain

というのも、S3はwebサイト用とそれ以外でのエンドポイントの名称が変わるためです。

webサイト用
awsexamplebucket.s3-website-us-east-1.amazonaws.com

それ以外
awsexamplebucket.s3.amazonaws.com

選択リストに表示されるエンドポイントは、webサイト用ではないので、それを選択してしまうとエラーになってしまいます。

詳細についてはこちらのリンクが参考になります。


手順としては、以上となります。
これでhttps独自ドメインで静的サイトを表示できるかと思います。

最後までご覧いただきありがとうございました。