CloudFrontを経由した時に起こる UserAgentへの影響

nodeでのUAで判別して何か処理を分けている時にハマったので共有します

nodeでモバイルかPCかの判別をしたくて、 express-useragent や ua-parser 等を使ったりして実装をしていました。

ユーザ体験の向上のために、CroudFront を経由してキャッシュし、レスポンスを早めるよう実装した結果、思わぬ所にハマってしまいました。

CroudFrontを経由すると、node上でのUAが書き換わってしまうのです

自分が開発している、local環境では CroudFront を経由していないので影響は無かったのですが、dev環境等で CroudFront を経由している場合、 「表示が何かおかしい。。。」という事があり、原因がなにかわからないまま数時間格闘してしまっていました。。。

CroudFront を経由していると、UAが 書き換わり

Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; SC-05D Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

というような、通常のUAが書き換わってしまい

Amazon CloudFront

となってしまいます。

「え、じゃあどうやってUA判別すんねん」という事になると思いますが、

CroudFront を経由した場合下記のようなカスタムヘッダが返ってくるようになっています。

CloudFront-Is-Mobile-Viewer
CloudFront-Is-Tablet-Viewer
CloudFront-Is-Desktop-Viewer

これらを判別する事で、正しく Mobile なのか PC なのかを判別できるようになります。

補足

一応書き変わらないようにする事も設定で可能のようですが、

"Some headers have a lot of possible values, and caching based on the values in these headers would cause CloudFront to forward more requests to your origin. We recommend that you do not cache based on the following headers: User-Agent"

google翻訳

いくつかのヘッダーは多くの値を持ち、それらのヘッダーの値をもとにキャッシュしているため、CloudFrontが多くのリクエストをオリジンへ転送する要因となります。私たちは次のヘッダーをキャッシュしないことを薦めます。

とのことなので、オススメは出来ません。