おかしんワークス私は個人的にコーポレートサイトなどのWebサイトはルートドメインで公開し、wwwはルートドメインにリダイレクトされるのが好きなのですが、STUDIOはドメインを1つしか設定できず、かつ www のリダイレクト機能を持ってません。WeeblyやWixだとか海外の似たようなサービスは大抵この機能があるのですが、以下記事の通りSTUDIOにはありません。
NSにGoogleドメインを使っている場合は、Googleドメインの標準機能で https でのリダイレクト機能を持っています。また、Cloudflareの場合もCloudflare Pagesを使えば比較的簡単に実現できます。
ですがRoute 53がNSの場合はS3、CloudFront、Certificate Managerも一緒に使わないとこれが実現できません。何度か同じ設定していますが、ネット上にあまり情報がなかったので、備忘録的にブログにすることにします。
STUDIOのドメイン設定
まずはSTUDIOにルートドメインを設定していきます。
公開設定から利用するルートドメインを入力します。
Route 53でAレコードを登録
接続の確認
この設定は特にTLS証明書発行の部分が非常に時間がかかります。平日であれば4時間以上かかる場合はサポートに連絡することですぐに対応してもらえますが、土日に実施すると月曜の午前中くらいまで待つ可能性が高いです。
S3で静的サイト用のバケットを作成
以下の公式ドキュメントのリダイレクトの部分が参考になるかと思います。
日本の場合は東京リージョンでS3のバケットを作ると良いでしょう。S3を開いて、バケット名を「www.ルートドメイン」に指定します（静的サイト機能を使う場合、公開するURLをバケット名に指定する必要があります。）
ACLは無効でOK
パブリックアクセスをすべてブロック
バージョニング無効、デフォルトの暗号化など
ここまでで、一度作成したあと、作成したバケットのプロパティを開いて「静的ウェブサイトホスティング」の設定を行います。
設定が完了するとS3の静的サイトのURLがここにアクセスするとすでにリダイレクトが行われることを確認できるかと思います。
Certificate Managerで証明書を発行
この手順は必ずバージニア北部のリージョンで実施してください。（解説は省きます）
すでに発行している場合は不要です。この手順ではワイルドカードの証明書を発行していきます。
ルートドメインと、サブドメインにアスタリスクを指定したドメイン名の2つを指定して証明書を発行します。
発行後にその証明書を開いて、「Route 53でレコードを作成」としてあげれば、簡単にRoute 53経由でドメインの所有権確認が完了します。
CloudFrontでS3の静的サイトのhttps化を行う
CloudFrontでディストリビューションを作成し、オリジンドメインには候補からS3のバケットを指定します。
すると、「Webサイトのエンドポイントを使用」というボタンが出てくるのでクリックしてあげます。
s3-website のオリジンドメインに変更されるので、続きの設定を行います。
Redirect HTTP to HTTPSを選択
画像の通りに設定していきます。ログ記録を行いたい場合は別途バケットを指定してあげてください。
作成が完了したら、ディストリビューションドメイン名にアクセスしてみると、これもルートドメインにリダイレクトされることが確認できるかと思います。（CloudFront ⇒ S3 ⇒ ルートドメインのサイト）
しかし、このディストリビューションドメイン名と www のドメインはまだ紐づいていないので、次の項でRoute 53でレコード設定していきます。
Route 53 でCloudFrontのディストリビューションドメイン名を紐づける
レコード名はwwwでAレコードのエイリアスとして設定していきます。
ルーティング先はドロップダウンからCloudFrontのドメイン名が候補として選択できます。
設定確認
ここまで設定が完了すると、「http://www.ルートドメイン」にアクセスすると「https://ルートドメイン」のSTUDIOサイトにリダイレクトされることが確認できるかと思います。また「https://www.ルートドメイン」も同様にリダイレクトされます。
一瞬でリダイレクトされるのでSSL化の確認ができないと思いますが、ターミナルから curl で確認することが可能です。
httpのリダイレクト確認
❯ curl -v http://www.btajp.org
* Trying 13.224.163.19:80...
* Connected to www.btajp.org (13.224.163.19) port 80 (#0)
> GET / HTTP/1.1
> Host: www.btajp.org
> User-Agent: curl/7.81.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 301 Moved Permanently
< Server: CloudFront
< Date: Sat, 20 Apr 2024 08:54:09 GMT
< Content-Type: text/html
< Content-Length: 167
< Connection: keep-alive
< Location: https://www.btajp.org/
< X-Cache: Redirect from cloudfront
< Via: 1.1 52c5ddb029eae46cd9dad0cfd50b5b8e.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: HKG54-C1
< Alt-Svc: h3=":443"; ma=86400
< X-Amz-Cf-Id: qquI8Dvjav3btvNdGiJM_CcVeapLgBma7EavUGa6z8lRG2hlNQwcHw==
<
<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>CloudFront</center>
</body>
</html>
* Connection #0 to host www.btajp.org left intacthttpsのリダイレクト、SSL確認
❯ curl -v https://www.btajp.org
* Trying 13.224.163.92:443...
* Connected to www.btajp.org (13.224.163.92) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* CAfile: /etc/ssl/certs/ca-certificates.crt
* CApath: /etc/ssl/certs
* TLSv1.0 (OUT), TLS header, Certificate Status (22):
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS header, Certificate Status (22):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS header, Finished (20):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.2 (OUT), TLS header, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_128_GCM_SHA256
* ALPN, server accepted to use h2
* Server certificate:
* subject: CN=*.btajp.org
* start date: Apr 20 00:00:00 2024 GMT
* expire date: May 20 23:59:59 2025 GMT
* subjectAltName: host "www.btajp.org" matched cert's "*.btajp.org"
* issuer: C=US; O=Amazon; CN=Amazon RSA 2048 M03
* SSL certificate verify ok.
* Using HTTP2, server supports multiplexing
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* Using Stream ID: 1 (easy handle 0x559b48602e90)
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
> GET / HTTP/2
> Host: www.btajp.org
> user-agent: curl/7.81.0
> accept: */*
>
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* Connection state changed (MAX_CONCURRENT_STREAMS == 128)!
* TLSv1.2 (OUT), TLS header, Supplemental data (23):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* TLSv1.2 (IN), TLS header, Supplemental data (23):
< HTTP/2 301
< content-length: 0
< location: http://btajp.org/
< date: Sat, 20 Apr 2024 08:39:17 GMT
< server: AmazonS3
< x-cache: Miss from cloudfront
< via: 1.1 4d5fa6bed14944a743cd122ad4fe5d4a.cloudfront.net (CloudFront)
< x-amz-cf-pop: HKG54-C1
< alt-svc: h3=":443"; ma=86400
< x-amz-cf-id: ONJFaZcGobMDHn5uLtL3EazHKzG8fHHB9wi0e0OQuK2xebfv51V6eQ==
<
* Connection #0 to host www.btajp.org left intactちなみに、最終的なルートドメインのサイトはAWSではなく、STUDIOの機能でSSL化されていますので証明書を見てもCertificate Managerで作ったワイルドカード証明書は使われていませんが、それが正しい状態です。