📊 Nuxt 3 用 Prometheus 連携

アプリケーションの状況をより深く理解し、本番環境でのパフォーマンスやその他の要素を最適化できるようにします。Nuxt 2 ユーザーはこちらのバージョンを使用できます。

制限事項

ofetch パッケージのこの問題のため、@artmizu/nuxt-prometheus は useFetch または $fetch を介して行われるネットワークリクエストを検出できません。これらは両方とも内部で ofetch を使用しているためです。そのため、/metrics ページでは、ofetch に関連するリクエスト時間は表示されません。今後の調査はこちらで行われます。

今のところ、リクエスト測定時間はデフォルトで無効になっています。

機能

デフォルトの NodeJS メトリクスを prometheus ミドルウェアを通じてエクスポート
ページレンダリング時間と外部リクエスト消費時間に関するカスタムメトリクス
ヘルスチェックミドルウェア

モジュールオプションを介してカスタマイズできるデフォルトルート

/metrics - prometheus メトリクス
/health - ヘルスチェック

インストール

パッケージマネージャーを介してパッケージをインストール

# using nuxi, it automatically appends the module in your nuxt.config
npx nuxi@latest module add prometheus

# using npm
npm install @artmizu/nuxt-prometheus

# using yarn
yarn add @artmizu/nuxt-prometheus

# using pnpm
pnpm add @artmizu/nuxt-prometheus

nuxt config の modules セクションに追加

export default {
  modules: ['@artmizu/nuxt-prometheus']
}

Grafana サンプル設定

Prometheus によってメトリクスが収集されたら、それらを確認する必要があります。私はこの目的のために Grafana を使用しており、メトリクスの設定は次のようになります: Cover

オプション

モジュールオプションと nuxt config プロパティ prometheus を介して渡すことができます。

verbose

型: boolean
デフォルト: true
説明: ページレンダリング時間と外部 API リクエスト時間に関する開発モードでの追加ログ

healthCheck

型: boolean
デフォルト: true
説明: ヘルスチェックルートのオン/オフを切り替えます。

healthCheckPath

型: string
デフォルト: /health
説明: ヘルスチェック URL パス

prometheusPath

型: string
デフォルト: /metrics
説明: Prometheus エクスポーター URL パス

prefix

型: string
デフォルト: プレフィックスなし
説明: メトリクス名のオプションのプレフィックス

enableRequestTimeMeasure

型: boolean
デフォルト: false
説明: https://github.com/artmizu/nuxt-prometheus/issues/42のため、一時的にオンにすることをお勧めしません。