本文へスキップ

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

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

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

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

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

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

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

次の段階​

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

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