【AWS】CloudFront+S3(静的ウェブサイトホスティング)でリダイレクト設定

はじめに

ウェブサイトの移設等でドメインを変更する機会はよくあると思います。その際、いきなり旧ドメイン削除せず新ドメインにリダイレクトしたりしますよね?設定方法はいくつか考えられると思いますが、今回は AWS CloudFront+S3(静的ウェブサイトホスティング)を活用したリダイレクト設定方法を紹介します。
以前、同じような内容で AWS ELB リスナールールを活用したリダイレクト設定方法も紹介してますので、興味がある方はそちらもご覧ください。
techblog.cartaholdings.co.jp


構成イメージ

リダイレクト設定前

リダイレクト設定後


やりたいこと
現ドメイン リダイレクト先ドメイン
AAAAA.example.com BBBBB.example.com

1.https://AAAAA.example.com/backup/xxxxx へアクセスした場合 https://BBBBB.example.com/new/backup/xxxxx へリダイレクト
2.上記以外の https://AAAAA.example.com/ へアクセスした場合 https://BBBBB.example.com/ へリダイレクト
もう少し細かく説明すると
1は
  パスが「/backup/」まで指定されたアクセスの場合
  リダイレクトする際に「/new/」パスをドメインの後ろに追加し
  既存パス「/backup/xxxxx/」は「/new/」パスの後に継承する設定
  例えばこのようなリダイレクトです
    https://AAAAA.example.com/backup/xxxxxhttps://BBBBB.example.com/new/backup/xxxxx
2は
  パスが「/backup/」以外でアクセスの場合
  パスがそのまま継承されリダイレクトする設定
  例えばこのようなリダイレクトです
    https://AAAAA.example.com/https://BBBBB.example.com/
    https://AAAAA.example.com/xxxxxhttps://BBBBB.example.com/xxxxx


S3 設定(細かい作成項目は省略)

[サービス > S3 > バケット > 対象 バケット > プロパティ > 静的ウェブサイトホスティング]
[編集] を押下

静的ウェブサイトホスティング 有効
スティングタイプ 静的ウェブサイトをホストする
インデックスドキュメント index.html(なんでもOK)

<リダイレクトルール >

[
    {
        "Condition": {
            "KeyPrefixEquals": "backup/" 
        },
        "Redirect": {
            "HostName": "BBBBB.example.com",
            "HttpRedirectCode": "301",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": "new/backup/" 
        }
    },
    {
        "Redirect": {
            "HostName": "BBBBB.example.com",
            "HttpRedirectCode": "301",
            "Protocol": "https" 
        }
    }
]

[変更の保存] を押下
設定すると「バケットウェブサイトエンドポイント」が作成されます

「バケットウェブサイトエンドポイント」をこの後 CloudFront に設定します


CloudFront 設定(細かい作成項目は省略)

[サービス > CloudFront > ディストリビューション]
[ディストリビューションを作成] を押下

「オリジンドメイン」設定に先ほど作成した S3 バケットウェブサイトエンドポイント(XXXXXXXXXX.s3-website-ap-northeast-1.amazonaws.com)を設定します

設定ポイントはココだけです
後の設定は各環境に合わせて設定してください


リダイレクト事前確認

DNS 設定を ELB から CloudFront へ向き先変更する前に CloudFront 直指定でリダイレクトするか確認してみたいと思います
CloudFront の「ディストリビューションドメイン名」を指定することで CloudFront 直指定が可能となります

それでは、まずはパターン1

$ curl -I https://XXXXXXXXXX.cloudfront.net/backup/xxxxx
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Connection: keep-alive
Date: Thu, 16 Jun 2022 03:29:42 GMT
Location: https://BBBBB.example.com/new/backup/xxxxx
Server: AmazonS3
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-Cache: Miss from cloudfront
Via: 1.1 xxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRTxx
X-Amz-Cf-Id: xxx

想定通り、「/new/」パスが追加され「BBBBB.example.com」ドメインへリダイレクトされました。
  https://XXXXXXXXXX.cloudfront.net/backup/xxxxxhttps://BBBBB.example.com/new/backup/xxxxx

続いてパターン2

$ curl -I https://XXXXXXXXXX.cloudfront.net/
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Connection: keep-alive
Date: Thu, 16 Jun 2022 03:28:22 GMT
Location: https://BBBBB.example.com/
Server: AmazonS3
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-Cache: Miss from cloudfront
Via: 1.1 xxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRTxx
X-Amz-Cf-Id: xxx

$ curl -I https://XXXXXXXXXX.cloudfront.net/xxxx
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Connection: keep-alive
Date: Thu, 16 Jun 2022 03:30:49 GMT
Location: https://BBBBB.example.com/xxxx
Server: AmazonS3
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-Cache: Miss from cloudfront
Via: 1.1 xxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRTxx
X-Amz-Cf-Id: xxx

こちらも想定通り、「/backup/」パス以外でのアクセスなのでパスは継承され「BBBBB.example.com」ドメインへリダイレクトされました。
  https://XXXXXXXXXX.cloudfront.net/https://BBBBB.example.com/
  https://XXXXXXXXXX.cloudfront.net/xxxxxhttps://BBBBB.example.com/xxxxx

ちょっとオマケで
CloudFront ドメイン名の IP アドレスを nslookup 等で確認し hosts に設定することでドメイン(仮)指定での事前確認も可能です

$ nslookup XXXXXXXXXX.cloudfront.net
     :省略
Non-authoritative answer:
Name:   XXXXXXXXXX.cloudfront.net
Address: xxx.xxx.xxx.xxx
     :省略
$ vi /etc/hosts
$ grep AAAAA.example.com /etc/hosts
xxx.xxx.xxx.xxx   AAAAA.example.com
$ curl -I https://AAAAA.example.com/
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Connection: keep-alive
Date: Thu, 16 Jun 2022 03:28:22 GMT
Location: https://BBBBB.example.com/
Server: AmazonS3
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-Cache: Miss from cloudfront
Via: 1.1 xxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRTxx
X-Amz-Cf-Id: xxx
DNS 設定変更

AAAAA.example.com レコードを各環境に合わせて ELB ⇒ CloudFront に切り替えてください
設定はこれで完了です
ここでは省略しますが、切替後のリダイレクト確認はしましょう


最後に

以前紹介した ELB リスナールールを活用したリダイレクト設定方法と比べ、設定の手間はかかりますがコスト面ではより安価に抑えられると思います
感覚的にはこんな感じでしょうか
 ELB リスナールール・・・手間 : 小 / コスト : 中
 CloudFront+S3・・・・・手間 : 中 / コスト : 小
設定までに余裕があるのであれば今回紹介した CloudFront+S3 で
障害等で緊急度が高いときは ELB リスナールールで対応というように使い分けて考えれば良いかと思います