AWSを用いたフロントエンドモニタリング入門 ~Next.js編~ - ウェルスナビ開発者ブログ

https://tech.wealthnavi.com/entry/20221005/1664955102

こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です.

今回のテーマはフロントエンドモニタリングです。みなさんフロントエンドのモニタリングは正しく行えているでしょうか？

各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！

フロントエンドの「何を」モニタリングするのか？

ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。

なお、今回はNext.jsで Server Side Rendering を用いたアプリケーションを前提に解説を行なっています。Next.jsというフレームワークがプリレンダリングの責務を担うという特性からSSRを行なっているレンダリングサーバもフロントエンドモニタリングの対象として扱っています。

ここからは具体的なモニタリング手法と AWS アーキテクチャについて解説していきます。

レンダリングサーバのモニタリング

ウェルスナビではNext.jsのデプロイに Serverless Nextjs Plugin を用いています。Next.jsのトップディレクトリにserverless.yamlというyamlファイルを作成し、以下のような設定を加えてcliコマンドを発行するだけで簡単にSSRを用いたNext.jsをデプロイすることができます。Serverless Nextjs Plugin に関する詳細は本記事の趣旨からずれるため、詳しくは公式ドキュメントを参照してください。

# serverless.yml
# Next.jsのトップディレクトリにserverless.ymlを配置
myNextApplication:
  component: "@sls-next/serverless-component"

serverless コマンドを発行するだけで上記 yaml の設定に応じた環境がデプロイされます。

$ serverless

serverless コマンドを発行すると以下のようなアーキテクチャがデプロイされます。Next.jsのサーバサイドは Lambda@Edge で実行され、処理内容に応じて3つのLambda@Edgeが生成されます。アプリケーションの状態を正確に把握するには、これらすべてのLambda@Edgeに対してもモニタリングを行う必要があります。

Serverless Nextjs Plugin で生成された Lambda@Edge はそれぞれ固有の Cloudwatch Log Group を持ち、それぞれのロググループに Next.js のサーバサイド処理の中で生成されたログが出力されます。

これらのロググループに対してCloudwatch Logsのフィルタリング機能を用いることで、特定の文字列(ERRORやException等)を検出することができます。フィルタリングされたログに対してCloudwatch Alarmを設定することで、エラーログの中に異常を検知したときに、AWS ChatBot を経由して Slack に通知を行う仕組みを構築することができます。この仕組みを用いることで、開発者はどこの処理でエラーが発生したかを即座に検知することができます。