Next.JSプロジェクトをAWS Amplifyでデプロイすると、UserAgentを正常に取得できないので、Vercelに移行した話😫
はじめに
本業の方で、Next.JS14を用いて開発、というか既存のレガシーな作りを取っ払ってNextにreplaceしちゃおうぜ計画を行っている。
その際に技術的に気になったことをメモしていく。できれば継続的に🐟
今回は、AWS Amplifyでデプロイした時に直面した、どうしようもない問題のことをメモしておく✏️
経緯
Next化したページが、ついに一つ出来上がったので、ステージング環境（以降stg環境）にあげてテストを行うことになった。
Next.JSのstg環境は、SREに事前に依頼し、AWS Amplifyで環境構築してもらっていた。
AWS Amplifyを選んだのは、
- 別の自社サービスで既に採用しており、事前の知見があった
- API側のインフラはAWSで構築されており、互換性の観点から
という点からである。
起こったこと
デプロイ開始してみたら、めちゃ簡単にstgに反映されて感動😆
いざ、テストしていく！！
画面のデザインや挙動を確認していってみると、、
スマホ画面がまあモノの見事にぐちゃぐちゃ状態だったってわけ😭
原因はAmplifyがNextのUserAgentを取得してくれないこと
よーく見てみたら、スマホの画面なのにPC用の画面を見ているから、めちゃくちゃなことになっているようだった。
前回の記事の内容で説明しているが、
うちのサービスでは、基本的にUserAgentを元に、PCとMobileで分けてViewを作成している。
NextのMiddleware機能を用いて、リクエストのパラメータにviewport情報を付与し、それを元にPCかSPかを判別し、Viewを出し分けるという作りだ。（一部レスポンシブなページはあるが）
最初、stg環境でMiddlewareが動作してないのか！？
と思ったがそんなことはなく、Request Headerにviewport情報が付与されているため、Middlewareは正常に呼ばれていた。
なのに、スマホ画面を見ても付与されるviewport情報は、viewport=pcなのだ。
これはおかしい。。
スマホの画面を見ているのに
なぜか付与されるviewport情報はPC
試しにmiddlewareに、UserAgent情報が確認できるようなlogを仕込んで、改めてデプロイしてみると、、
logの項目が全部undefindやんけ・・
本当はこういう風にデバイス情報が出るのに
デバイス情報が上手く取得できていない
undefindの場合はPCに飛ばすようにしていたので、これが原因であることには間違いなかった。
更にアクセスログを追っていくと、
アプリ側の200ステータスのアクセスログの後に、304ステータスのAmazon CloudFrontののログがある。
Amplifyが内部でCloudFrontを使用しており、そこでアプリ側のUserAgent情報を見るようにしないといけないようだ。
じゃあCloudFront側でその設定をすれば解決！
と思ったのだが。。
解決策は、、AWSの対応を待つこと笑
この問題、調べていくと同じ事象で悩んでいる海外エンジニアさんが何人かいて、既にIssueが作成されている問題だということがわかった。
そして、上記のIssueを見てみると、
Amplify内部のCloudFrontディストリビューションは直接操作、確認ができないようになっています
とのこと。
つまりこれ、AWS側の対応待ちってこと笑笑
海外エンジニア達がしきりに見てもらえるように、「Bump!」してるの笑った🤣🤣
Vercelに移行
とはいえ、じゃあこのまま待ってたら、いつプロジェクトがリリースできるんだよ！って話になっちゃうので、別の手を模索することに。
その時ちょうど別プロジェクトで、Vercelを導入したという話を聴き、試しにVercelでデモ環境を作成し、デプロイして確認してみると、、
キターーーー ♪Ｏ（≧∇≦）Ｏ♪
まあそりゃあNext.JSの公式ホスティングサービスだから上手くいかないわけがないんだけどね笑
お金関連が心配なとこだったのだが、（アカウント課金だったりリクエストごとに課金されていくので、amplifyより料金はかかっちゃうかも？）
会社からの許可も降り、改めてstg環境をVercelで再構築してもらった。
今後しばらくは、デプロイシステムはVercelを使用していくつもりである！
まとめ
にしても今回の問題はトラップ過ぎるって笑笑
追記
2024/11/17現在、AWS Amplify側が上記Issueに対して対応してくれたらしく、
今はAmplifyのCloudFrontキャッシュのヘッダー情報が調整可能になったっぽいです！
えがったえがった、海外ニキ達もニッコリ😌
Discussion