CloudFront Functionsでオリジンに手を加えずにURLリダイレクトをしたい

こんにちは。
ご機嫌いかがでしょうか。
"No human labor is no human error" が大好きな ネクストモード株式会社 の吉井です。

CloudFront Functions を使用した URL リダイレクトを実装する機会がありましたので、備忘として記事に残します。
オリジン (Web サーバー) でリダイレクトする方法はすでに一般的だと思いますが、のっぴきならない事情で CloudFront でリダイレクトしたい方の参考になれば幸いです。

備忘

CloudFront やオリジン、関連する構築が完了しており Web サイトは正常に動作していることを前提としています。

本エントリで示しているサンプルコードは以下の図のようなリダイレクトを実現しています。

関数の作成

関数を作成します。
マネジメントコンソールの CloudFront Functions を開きます。

関数の作成 をクリックします。

任意の名前と説明を記入して関数の作成 をクリックします。

コードの貼り付け

関数コードにコードを貼り付けます。
サンプルは図の下に示してあります。

function handler(event) {
  var request = event.request;
  var host = request.headers.host.value;
  var uri = request.uri;
  var newurl = `https://${host}/index.html` // Change the redirect URL to your choice

  // Check the URI is '/abc/sign-up'.
  if (uri === '/abc/sign-up') {
    newurl = `https://${host}/sign-up`;
  }
  // Check the URI is '/abc/login'.
  else if (uri === '/abc/login') {
    newurl = `https://${host}/login`;
  }
  else {
    return request;
  }

  var response = {
    statusCode: 301,
    statusDescription: 'Moved Permanently',
    headers:
      { "location": { "value": newurl } }
  }

  return response;
}

コードの修正

上のサンプルコードの6～13行目にリダイレクト対象を記述している箇所があります。
ここをご自身の環境に合わせて追加・編集・削除します。

URI が /abc/sign-up に一致した場合に https://${host}/sign-up へリダイレクトしています。
ここをよしなに設定ください。

  // Check the URI is '/abc/sign-up'.
  if (uri === '/abc/sign-up') {
    newurl = `https://${host}/sign-up`;
  }

修正が終わったら 変更の保存 をクリックします。

関数のテスト

同じ画面の テスト タブで関数のテストを実行可能です。
実行環境へ反映する前にテストしておきましょう。

上のサンプルコードですと、URLパスと host ヘッダーを指定します。
URLパスはリダイレクト元、host ヘッダーはご自身のサイトの FQDN を記入ください。

テスト結果

関数をテスト をクリックし正常な結果が返ってくることを確認します。
今回の例ですと、statusCode が 301、response.headers.location.value がリダイレクト先であることが正常です。

関数の発行

同じ画面の 発行 タブを開きます。

関数の発行 ボタンをクリックします。

関連付けを追加 ボタンをクリックして、リダイレクトを行いたいディストリビューションとキャッシュビヘイビアを指定します。

動作確認

関数の発行をしディストリビューションとキャッシュビヘイビアに関連付けたら
実際の URL で動作確認を行うことをお忘れなく。

以降のメンテナンス

初回に関数を発行した以降の修正は同じ手順を繰り返します。

1. コード修正
2. 関数のテスト
3. 関数の発行
4. 実 URL での動作確認

留意点

CloudFront Functions は 1 msの起動時間制限 があります。
リダイレクト対象が大量に増えるようなケースでは起動時間制限を超えないようご留意ください。

まとめ

重い処理を必要としないリダイレクトやヘッダーのカスタマイズ、ベーシック認証などは CloudFront Functions を使用することで実装可能です。
CloudFront Functions で実装するのかオリジンで実装するかの正解はないですが、エッジで出来ることはエッジで実装するのも選択肢の一つだと感じました。

参考

CloudFront Functions を使用したエッジでのカスタマイズ
ビューワーを新しい URL にリダイレクトさせる
エッジでJavaScriptを実行するCloudFront Functionsのユースケースまとめ
エッジで爆速コード実行！CloudFront Functionsがリリースされました！

以上、吉井 亮 がお届けしました。