はじめに

CloudFront+S3で静的サイトを運用している際、https://sample.com/text1.html にアクセスすると、https://sample.com/text2.htmlにリダイレクトさせたいという依頼があった。
上記のように、CloudFront + S3の静的サイトで同じドメインのページ間をリダイレクトさせるようなニッチな設定方法はなかなか見つからなかったので記事にして残しておきます。

前提としてはざっくり以下のような構成で、S3は静的ウェブサイトを使用し、CloudFrontはS3をオリジンとしてコンテンツを配信しています。
以下の構成を基に、CloudFrontで配信している静的サイトのリダイレクト設定を追加します。

設定方法

大きく以下の設定を追加する

S3でリダイレクトルールの設定追加
CloudFront側でリダイレクト用のオリジン、ビヘイビアの追加

リダイレクトルールの設定

S3の該当バケットを選択 > 静的ウェブサイトホスティングを編集を選択し、編集ページを表示する。表示したら以下のように設定を追加する。

ホスティングタイプ
- 静的ウェブサイトをホストするを選択

リダイレクトルールを以下のように設定

この辺りの変数については公式のドキュメントを読んで理解すること

[
    {
        "Condition": {
            "KeyPrefixEquals": "text1.html"
        },
        "Redirect": {
            "HostName": "sample.com",
            "HttpRedirectCode": "301",
            "Protocol": "https",
            "ReplaceKeyWith": "text2.html"
        }
    }
]

※ちなみにtext1.htmlとtext2.htmlはS3バケットの直下に配置している。

注意事項

このリダイレクトルールは、S3 静的ウェブサイトホスティングのバケットウェブサイトエンドポイントへアクセスした場合のみ有効。オリジン設定のOrigin Typeの項目がS3となっている場合は使用できません。
なので、S3オリジンとして設定CloudFrontの場合、新たにCustom Originを追加、ビヘイビアを設定する必要があります。

CloudFrontでオリジン、ビヘイビアを追加

オリジンの追加

静的ウェブサイトホスティングのオリジンを選択肢の候補以外から入力すると、Origin TypeがCustom Originとなる。
カスタムオリジンであれば S3静的ウェブサイトホスティングのバケットウェブサイトエンドポイントを直接指定できるので、リダイレクト機能が使えるようになる。

バケットウェブサイトエンドポイントは S3 コンソールバケット詳細画面の「プロパティ」タブ、静的ウェブサイトホスティング欄で確認可能。

確認したバケットウェブサイトエンドポイントを新たに作成するオリジンドメインに設定

ビヘイビアの追加

作成したオリジンに合わせてビヘイビアを作成する。
パスパターンにはリダイレクトされるページのファイルを指定する。
先ほど作成したオリジンを選択する。
CloudFrontからのアクセスのみなのでhttps onlyに設定しておく。

上記設定後、念のためCloudfrontのキャッシュを/*で削除しておきます。

まとめ

ここまで設定したら以下curlコマンドでアクセスするとリダイレクトできていることがわかるかと思います。

# 不要なログ省略
$ curl -LI https://sample.com/text1.html
HTTP/1.1 301 Moved Permanently
Server: CloudFront
X-Cache: Redirect from cloudfront

HTTP/1.1 301 Moved Permanently
Location: https://sample.com/text2.html

HTTP/2 200

今回の設定を実施する上で以下の点に気をつけることが重要かと思います

S3のリダイレクトルールはS3静的ウェブサイトホスティングで有効になっているため、バケットウェブサイトエンドポイントをオリジンとして設定すること
S3の静的ウェブサイトホスティングはHTTPのみ利用可能なためCloudFrontのオリジン設定でHTTPSは利用できないこと

CloudFront と S3 を活用した静的ウェブサイトのリダイレクトの実践ガイド