본문으로 건너뛰기

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

에이전트 파일 구성​

에이전트 파일 구성은 다음을 참조하세요.

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

다음 단계​

  • 설치 점검하기

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

  • 에이전트 설정

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

  • 모니터링 시작하기

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