CloudFront Functionを使用したリダイレクト機能の実装

Webサイトでドメイン変更を行った際、旧ドメインを新ドメインにリダイレクトさせたいと思うことがありました。そのリダイレクト処理をCloudFrontの関数を使用すれば簡単に実装できるのでその設定方法を記します。

前提条件

• S3 + CloudFrontの静的webサイトホスティングを使用している
• 旧ドメイン、新ドメイン共にCloudFront Distributionが作成されている

実現したいこと

• 旧ドメインにアクセスした際、新ドメインにリダイレクトさせる
• 但し、パスに「/test/」までの指定があった場合はリダイレクトせず旧ドメインを使用する

旧ドメイン	新ドメイン
before.example.com	after.example.com

ケース	想定される動作	入力されるURL	リダイレクト先URL
パスに「/test/」までの指定がされている場合	旧ドメインのままリダイレクトしない	https://before.example.com/test/xxxxx	https://before.example.com/test/xxxxx
パスが「/test/」以外でアクセスされた場合	新ドメインにリダイレクトされる	https://before.example.com/	https://after.example.com/

CloudFrontの設定

1. CloudFrontにアクセスし、左のタブから「関数」を選択する

2. 「関数を作成」ボタンを押下し、名前と説明を入力する(何でもOK)

3. RuntimeはCloudFront-js-2.0を選択し、関数を作成する

4. 作成した関数から構築の関数コードの部分に下記コードを貼って変更を保存する

redirect.js

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // リダイレクトを行う関数
    function redirectTo(newUri) {
        return {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers: {
                location: { value: newUri }
            }
        };
    }

    if (uri.startsWith('/test')) {
        // リダイレクト不要の場合はそのままリクエストを返す
        return request;
    }

    return redirectTo('https://after.example.com/');
}

5. 発行から「関数の発行」ボタンを押下

6. 関連付けられているディストリビューションから「関連付けを追加」ボタンを押下

7. 適用させるディストリビューション、イベントタイプ、キャッシュビヘイビアを選択する

• ディストリビューション...対象のディストリビューション
• イベントタイプ...Viewer repuest
• キャッシュビヘイビア...Default
  で「関連付けを追加」ボタンを押下する

以上です。

まとめ

今回初めてCloudFrontFunctionsを使用しましたが、JavaScriptが書ける人であればもっと複雑なリダイレクト処理等も問題なく行えそうな感じがありました。設定も手軽にできるので、S3 + CloudFrontでWebサイトを公開しているのであれば積極的に使用していきたいです。