본문으로 건너뛰기

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) 파일에 옵션을 적용해 모니터링을 위한 다양한 기능을 제공합니다. 기본 설정부터 서버 연결 및 데이터 전송 설정, 여러 애플리케이션 서버의 설정 파일 관리 방법, 트랜잭션 추적 등을 포함합니다. 자세한 내용은 다음 문서를 참조하세요.

  • 모니터링 시작하기

    모든 설정을 완료한 다음 애플리케이션 서버를 다시 시작하세요. 에이전트가 정보를 수집하기 시작합니다. 먼저 애플리케이션 대시보드 메뉴에서 모니터링 데이터가 수집되는지 확인하세요. 애플리케이션 대시보드에 대한 자세한 내용은 다음 문서를 참조하세요.