本文へスキップ

Nuxt.js環境インストール

Nuxt.jsなどのサーバーサイドレンダリング(Server-side Rendering、SSR)フレームワークでアプリケーションをモニタリングするためにCustom Serverの設定が必要です。 一般的なNode.jsフレームワーク(例、Express.js、Nest.js)とは異なるアプローチが求められます。

ノート

エージェント インストール

次のコマンドを実行してエージェントをインストールしてください。

BASH
npm install whatap

エージェントファイル構成

エージェントのファイル構成については、以下を参照してください。

server/index.jsコードを作成する

Nuxt.jsアプリケーションインスタンスのためのserver/index.jsファイルを作成してください。 このファイルはプロジェクトのサーバー(server) フォルダ内に位置する必要があります。

WhaTapエージェントの初期化

server/index.js
var Whatap = require('whatap').NodeAgent;

Nuxt.js及びその他の必要モジュールの読み込み

server/index.js
const express = require('express');
const { Nuxt, Builder } = require('nuxt');
const app = express();

Nuxtインスタンス設定と初期化

server/index.js
const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
const nuxt = new Nuxt(config);

if (config.dev) {
new Builder(nuxt).build();
}

Expressサーバー設定とNuxtミドルウェア追加

次のコードでportには、サーバーのポート番号を設定します。

server/index.js
app.use(nuxt.render);

const port = 3000;
app.listen(port, () => {
console.log(`Server listening on http://localhost:${port}`);
});

全体コードを見る

完成した完全なコードを参照してください。

server/index.js
var Whatap = require('whatap').NodeAgent;

const express = require('express');
const { Nuxt, Builder } = require('nuxt');
const app = express();

const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
const nuxt = new Nuxt(config);

if (config.dev) {
new Builder(nuxt).build();
}

app.use(nuxt.render);

const port = 3000;
app.listen(port, () => {
console.log(`Server listening on http://localhost:${port}`);
});

アプリケーションを実行する

SH
node server/index.js

次の段階

  • インストールの点検

    プロジェクトの生成とエージェントのインストールまですべて適用した場合は、次の文書で点検事項を確認します。

  • エージェント設定

    エージェント設定(whatap.conf)ファイルにオプションを適用して、モニタリングのための様々な機能を提供します。 デフォルト設定から、サーバーの接続とデータ転送の設定、複数のアプリケーションサーバーの設定ファイルの管理方法、トランザクションの追跡などが含まれます。 詳細については、次の文書を参照してください。

  • モニタリングの開始

    すべての設定を完了してから、アプリケーションサーバーを再起動します。 エージェントが情報の収集を開始します。 まず、アプリケーションメニューでモニタリングデータが収集されていることを確認します。 アプリケーションについての詳細は、次の文書を参照してください。