CloudFront Functions でドメインのリダイレクト

example.jp で提供していた Web サービスのドメインを example.com に変更したい場合、古いドメイン example.jp に来たリクエストを新しいドメイン example.com にリダイレクトさせる仕組みを CloudFront Functions を使って作ったら簡単だったという話。

CloudFront Functions とは

CloudFront Functions は、CDN のエッジ環境で JavaScript 関数を実行できる機能。

類似の仕組みに Lambda@Edge があるが、Lambda@Edge と比べると CloudFront Functions の方が安くて速くて簡単である代わりに制約が多い、というのが雑なイメージ。(以下の記事が詳しい)

Lambda@Edge も触ってみたが、実行 Role に信頼関係の設定追加が必要だったり、Distribution との関連付けの際にバージョン番号を発行しないといけなかったり、少し手間がかかるところがあった。

今回のような「特定のルールに従ってリダイレクトさせる」だけであれば CloudFront Functions で問題ない。

作っていく

Distribution の作成

Distribution の作成方法の詳細は割愛するが、ひとつ注意点としては、ダミーでも Origin を指定する必要があるので空の S3 バケットを作成して指定した。

Function の作成と関連付け

CloudFront のメニューの「Functions」から適当な名前の関数を作成して下記コードを書いて保存する。

function handler(event) {
    return {
        statusCode: 301,
        statusDescription: 'Moved Permanently',
        headers: {
            'location': { value: 'https://example.com' + event.request.uri }
        }
    }
}

「Test function」して問題なさそうであれば「Publish function」する。

作成した関数を Distribution と関連付けるには、関数のページの「Associated distributions」からでもできるし、Distribution の Behavior の設定からでもできる。

関数の実行タイミングは今回は「Viewer request」に設定した。

ドメインと証明書の設定

Distribution に Alternate domain names を追加して ACM で発行した証明書を割り当てたり、DNS の設定を変えてリクエストが CloudFront に向かうようにしたり。このあたりもよくあるやつなので詳細は割愛する。

動作確認

$ curl -I https://example.jp/foo
HTTP/2 301 
server: CloudFront
date: Thu, 29 Jun 2023 00:00:00 GMT
content-length: 0
location: https://example.com/foo
x-cache: FunctionGeneratedResponse from cloudfront
(以下略)

問題なく動作していそう。