S3+Route 53+CloudFrontを使って、サイトを公開できました。
Route 53とCloudFrountは使い慣れていないので時間かかりましたが、一通り成功したので一安心です。
httpsで公開したサイトは以下です。
(この記事を書いている時点ではクライアント側しか動作しません。勉強用なのですぐ消す可能性あり)
picture-app.link
独自ドメイン+httpsでサイトを公開した際の手順と参考にさせてもらった記事は以下です。
Route 53でドメイン取得
まずはRoute53でドメインを選択して購入しました。
一番安いものを選んで.linkで5ドルでした。
S3に公開したサイトとRoute 53で取得した独自ドメインを紐づける
すでにS3でサイトが公開されていることを前提としています。
この時点ではhttp通信になりますが、独自ドメインでサイトを公開できます。
hacknote.jp
AWS Certificate Manager（ACM）でSSL証明書を取得
下記記事の前半部分を参考にさせてもらいました。
qiita.com
CloudFrontとS3を紐づける
CloudFrontは不慣れなので時間かかりましたが、下記記事を参考に設定していきました。
次の手順のRoute53でCloudFrontが表示されないトラブルがあって手こずりましたが、CloudFrontでAlternate Domain Names (CNAMEs)の項目を設定し忘れていたことが原因だったようでCNAMEsを設定したら想定通り動きました。
dev.classmethod.jp
Route53で設定している向き先をCloudFrountに変更する
下記記事を参考にして設定しました。
すでにRoute53は構築してあるので向き先を変えるだけになります。
まとめ
あまり触ったことのないマネージドサービスが多かったのでちょっと記憶があいまいですが、だいたい上記の流れで独自ドメインでSSL通信ができるようになりました。
次はS3+CodePipelineでフロントエンドのCI/CDを構築したいと思います。
