ブラウザからCloudFrontを経由してVueの管理画面に接続し、バックエンドのAPIを呼び出してログインするシステムについてのお話です。
ログイン時に必要な情報(ユーザー名やパスワードの情報)をクエリ文字列パラメータとしてPOSTに渡しても、APIに上手く渡せず消えてしまう事象が発生して困りました。
今回の記事はその際の対応についてのメモ書きです。
システム構成のイメージは次のようになります。
原因
CloudFrontのビヘイビアの設定でクエリ文字列パラメータが転送されないようになっていた為でした。
これはデフォルト設定です。
AWSのマニュアルには下記のように記載されています。
キャッシュキーとは何ですか？なぜそれが重要ですか？
まず、キャッシュキーが何であるか、どのように構成されているかを理解しましょう。キャッシュキーは、CloudFront がキャッシュするすべてのリソースを一意に識別する方法です。デフォルトでは、CloudFront ディストリビューションのホスト名と、次の例のように、リクエスト URL のリソース部分（パス、ファイル名、拡張子）で構成されます。
GET /content/stories/example-story.html?ref=0123abc&split-pages=false HTTP/1.1
Host: d111111abcdef8.cloudfront.net
User-Agent: Mozilla/5.0 Gecko/20100101 Firefox/68.0
Accept: text/html,*/*
Accept-Language: en-US,en
Cookie: session_id=01234abcd
Referer: https://news.example.com/
上記のリクエストのデフォルトのキャッシュキーには、次のものが含まれます。
CloudFront ディストリビューション (d1111abcdef8.cloudfront.net) のドメイン名 要求されたオブジェクトの URL パスとファイル名 (/content/story/example-story.html) デフォルトでは、ビューアリクエストのその他の値はキャッシュキーに含まれません。Webブラウザからの HTTP リクエストを考えてみましょう。デフォルトのキャッシュキーは上記の太字の項目で構成され、存在する他の要素（ヘッダー、クエリ文字列パラメータ、Cookie）は、キャッシュポリシーを使用してキャッシュキーに追加することによってのみ含まれます。
マニュアル：https://aws.amazon.com/jp/blogs/news/amazon-cloudfront-announces-cache-and-origin-request-policies/
対応
CloudFrontのビヘイビアの設定を変更します。
マネージメントコンソールでCloudFrontまで移動して編集対象のディストリビューションを選択します。
選択したら、「ビヘイビア」タブをクリックし、対象のビヘイビアを選んで「編集」ボタンを押下します。
「キャッシュキーとオリジンリクエスト」欄の「クエリ文字列」を「すべて」に変更します。
後は編集を完了するとクエリ文字列パラメータがバックエンドのAPIに届くようになります。
オブジェクトキャッシュについて
Use Origin Cache Headersとは何かというお話です。
オリジンのオブジェクトに指定されている Cache-Control: max-age または Cache-Control: s-maxage または Expires ヘッダの値をもとにキャッシュ時間を制御します。
これらのヘッダがオリジンのオブジェクトに存在しない場合は、デフォルトの 24 時間 が適用されます。
詳しくは下記サイトをご参照ください。
https://michimani.net/post/aws-about-cache-spec-of-cloudfront/
