本文へスキップ

Next.js環境インストール

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

ノート

参考資料：Next.js Custom Server Configuration

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

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

BASH
npm install whatap

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

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

server.jsコードを作成する​

Next.jsアプリケーションインスタンスのためのserver.jsファイルを作成してください。 このファイルは、プロジェクトのルート(Root) 経路に位置する必要があります。

WhaTapエージェントの初期化​

server.js
var WhatapAgent = require('whatap').NodeAgent;

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

server.js
const {createServer} = require('http')
const {parse} = require('url')
const next = require('next')

アプリケーション設定​

server.js
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

Next.jsアプリケーションのインスタンス作成​

次のコードでdevは開発モードの起動有無を示し、hostnameとportには、サーバーのホスト名とポート番号を設定してください。

server.js
const app = next({dev, hostname, port})
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer(async (req, res) => {
        try {
            const parsedUrl = parse(req.url, true)
            const {pathname, query} = parsedUrl

            /**
            * Render the page.
            */
            await handle(req, res, parsedUrl);
        } catch (err) {
            console.error('Error occurred handling', req.url, err)
            res.statusCode = 500
            res.end('internal server error')
        }
    })
    .once('error', (err) => {
        console.error(err)
        process.exit(1)
    })
    .listen(port, () => {
        console.log(`> Ready on http://${hostname}:${port}`)
    })
})

全体コードを見る​

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

server.js
var WhatapAgent = require('whatap').NodeAgent;

const {createServer} = require('http')
const {parse} = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

const app = next({dev, hostname, port})
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer(async (req, res) => {
        try {
            const parsedUrl = parse(req.url, true)
            const {pathname, query} = parsedUrl

            /**
            * Render the page.
            */
            await handle(req, res, parsedUrl);
        } catch (err) {
            console.error('Error occurred handling', req.url, err)
            res.statusCode = 500
            res.end('internal server error')
        }
    })
    .once('error', (err) => {
        console.error(err)
        process.exit(1)
    })
    .listen(port, () => {
        console.log(`> Ready on http://${hostname}:${port}`)
    })
})

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

SH
node server.js

次の段階​

  • インストールの点検

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

  • エージェント設定

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

  • モニタリングの開始

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