【お手軽】CloudFront Functionsを使ってリダイレクトを設定しよう

はじめに

こんにちはディーネットのタナミです。

以前、CloudFront Functionsを使ってリダイレクトの設定を行う機会がありましたので、
備忘録として記事に残そうと思います。

CloudFront Functionsを作成しよう

CloudFront FunctionsはCloudFront内の「関数」のページにあります。
「関数を作成」を選択し、CloudFront Functionsを作成しましょう。

今回はcloudfront-js-2.0を使ってCloudFront Functionsを作成します。

リダイレクト動作を設定しよう

今回はサイトへ来たアクセスを特定のURLへリダイレクトさせる設定を行いました。
また、リダイレクト先となるURLへのアクセスはリダイレクトさせないように設定しないと、無限にリダイレクトされるため注意が必要です。

async function handler(event) {
    var request = event.request;
    var uri = request.uri;
    var host = request.headers.host.value;

    // 特定のURLへのアクセスはリダイレクトしない
    if (uri === '/maintenance.html') {
        return request;
    }

    // 特定のURLへのリダイレクト
    var response = {
        statusCode: 302,
        statusDescription: 'Found',
        headers: {
            "location": { 
                "value": `https://${host}/maintenance.html` 
            }
        }
    };

    return response;
}