本文へスキップ

Nuxt.js環境インストール

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

ノート

参考資料：Nuxt.js Custom Server Configuration

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

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

BASH
npm install whatap

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

  • package.json: サンプルアプリケーション情報と依存関係(dependency)管理文書ファイルです。

  • whatap.conf：モニタリングのためのエージェントの情報とアクセスキー、WhaTapデータ収集サーバーのIP情報などを保存する設定ファイルです。

  • security.conf (またはparamkey.txt)：SQL変数、HTTPクエリの照会、Thread中止機能を利用する時に入力するセキュリティキーを保存します。

  • server/index.js (ファイル名例)：Nuxt.jsアプリインスタンス用のサーバー設定ファイルです。

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

次の段階​

  • アプリケーションを実行してモニタリングのための準備ができたら、次の文書を参照して点検事項を確認してください。

  • エージェントを通じてAPMの様々なデータを収集するように構成できます。 エージェント設定の詳細については、次の文書を確認してください。