Next.js 13にAzure Monitorを導入してWebアプリを監視する ～サーバー編～

はじめに

この記事では、Azure MonitorでNext.js 13を監視を始めるための手順について記載します。アプリケーションの品質を向上させるために、Azure Monitorをどのように導入するかに焦点を当てています。

Azure Monitorで何ができるか

Azure MonitorをWebアプリに統合することで、サーバーサイドのリクエストや例外の収集、そしてリアルタイムでのリクエスト数（RPS）等の監視がほぼ自動的に実現できます。同時に、クライアントサイドからもスクリプトエラーログやカスタムイベントなどの収集を簡単に設定でき、個人的にWebアプリ全体の監視に大いに役立っています。

↑Live Metrics機能でサーバーサイドを監視している様子

Azure Monitorについての詳細な情報は、公式ドキュメントに詳細に記載されています。この記事では、Azure Monitorについてのより深い情報は省略し、代わりにNext.js 13への導入に焦点を当てます。

前提

この記事はサーバー向けです

この記事では、サーバーサイドを監視するための導入手順について記載します。この設定を行うだけでも、リクエストや例外の収集、リアルタイムでの監視などが可能になります。
一方で、クライアントサイドの監視については、別途パッケージのインストールや設定が必要となりますので、機会を改めて記事にする予定です。

誰向けなのか

• Next.js 13を使用している開発者
• Azure Monitorを活用してNext.js 13のサーバーサイドを効果的に監視したい開発者

環境

• Next.js 13.4

パッケージのインストール

npm install applicationinsights

↓実行後のpackage.jsonは以下のような感じに。

{
  ...
  "dependencies": {
    ...
    "applicationinsights": "^2.7.0",
    ...
    "next": "13.4.12",
  },
  ...
}

サーバー向け設定

1. .env.localにConnection Stringを追加する

/path-to-project/.env.localを作成または編集します。

APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=xxx;IngestionEndpoint=xxx;LiveEndpoint=xxx

2. next.config.jsにてInstrumentation Hookを有効にする

/path-to-project/next.config.jsを編集します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    instrumentationHook: true // 追加
  }
}

module.exports = nextConfig

3. サーバー起動時にデータの収集と送信を開始する

/path-to-project/src/instrumentation.tsを作成または編集します。

export async function register() {
  if (process.env['NEXT_RUNTIME'] === 'nodejs') {
    // Start app insights
    const appInsights = await import('applicationinsights')
    appInsights
      .setup()
      .setAutoCollectConsole(true, true)
      .setSendLiveMetrics(true)
      .start()
    console.log('Started AppInsights.')
  }
}

setAutoCollectConsole()、setSendLiveMetrics()等のメソッドは任意です。詳しくはSDK の構成に記載があります。

動作確認

開発サーバーを起動して動作確認します。

npm run dev

以上です。もしどなたかの参考になることがあれば幸いです。