【CloudFront】【Lambda@Edge】オリジンレスポンスでリダイレクト処理を入れる方法

はじめに

AWSでSPA(シングルページアプリケーション)のインフラ部分を作っているときに
要件として
「トップページやその配下のディレクトリにもページがある。ただし、ないディレクトリが指定されたらリダイレクトする」
という話をもらいました。

それまではトップページしかなかったので、トップページ以外の場合はリダイレクトしていたが
配下のディレクトリにも気を配る必要があります。

それを解決するために Lambda@Edge を使って対応してしました。
すぐに忘れてしまいそうなので簡単にですが手順をまとめておきます。

環境

前提条件

  • AWSコンソールにログインできること
  • Lambda@Edgeを作成できるIAMユーザーであること ※CloudFrontが設定されていなくてもいいが、設定されていると検証しやすい

調査

CloudFrontは以下の順で処理されます。

  • ビューアーリクエス
  • オリジンリクエス
  • オリジンレスポンス
  • ビューレスポンス

今回、コンテンツが取れなかった場合なので オリジンレスポンス に対して処理を追加していきます。

対応方法

AWSのドキュメントにやりたいことが書いてあったので、手順通り作成します。

Lambda@Edge 関数の例 - Amazon CloudFront

新規にLambda関数を作成する。

f:id:fujikawa-y:20201022104505p:plain

雛形を修正する。

f:id:fujikawa-y:20201022104532p:plain

AWSのドキュメントに書かれいてたコードを記述する。
そのままだとクエリストリングがそのまま渡ってしまうので不要な処理を削除する。

f:id:fujikawa-y:20201022104550p:plain

$LASTETではLambda@Edgeが使えないのでバージョンを作成する。

f:id:fujikawa-y:20201022104617p:plain

バージョンの発行が行われました。

f:id:fujikawa-y:20201022104637p:plain

この後は、作成済みのCloudFrontに紐づけてあげれば完成です。 紐付けるのはCloudFrontのオリジンレスポンスとなりますので注意してください。

まとめ

これでエラーページではなく、トップページに戻れるようになりました。

参考

Lambda@Edge 関数の例 - Amazon CloudFront