본문으로 건너뛰기

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    모니터링을 위한 에이전트의 정보 및 액세스 키, 와탭 데이터 수집 서버의 IP 정보 등을 저장하는 설정 파일입니다.
  • security.conf (or 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

다음 단계​

  • 설치 점검하기

    프로젝트 생성 및 에이전트 설치까지 모두 적용했다면 다음 문서에서 점검 사항을 확인하세요.

  • 에이전트 설정

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

  • 모니터링 시작하기

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

최종 수정: