>웹 프론트엔드 >JS 튜토리얼 >Next.js의 분산 추적

Next.js의 분산 추적

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-07 05:52:031008검색

Distributed Tracing in Next.js

특히 마이크로서비스와 서버리스 아키텍처의 등장으로 최신 애플리케이션이 점점 더 분산되면서 이러한 시스템을 모니터링하고 디버깅하는 것이 더욱 복잡해졌습니다. 분산 추적은 개발자가 다양한 서비스를 통해 이동할 때 요청을 추적하여 성능 병목 현상, 오류 및 대기 시간 문제에 대한 명확한 그림을 제공하는 데 도움이 됩니다. 강력한 React 프레임워크인 Next.js로 작업할 때 분산 추적을 구현하면 앱의 관찰 가능성이 향상되고 더 나은 성능 진단이 가능해집니다.

이 글에서는 분산 추적의 개념, 이것이 Next.js에 어떻게 적용되는지, 그리고 이를 구현하기 위해 취할 수 있는 단계에 대해 살펴보겠습니다.

분산 추적이란 무엇입니까?

분산 추적은 특히 요청이 여러 서비스나 구성 요소에 걸쳐 있을 때 분산 시스템을 통해 요청을 추적하는 데 사용되는 방법입니다. 기존 로깅 또는 애플리케이션 성능 모니터링(APM)과 달리 분산 추적은 경계를 넘어 요청 흐름을 하나로 묶어 지연이나 오류가 발생한 위치를 쉽게 식별할 수 있습니다.

분산 추적의 주요 개념:

  • 추적: 추적은 분산 시스템을 통해 이동하는 요청의 여정을 나타냅니다. 여러개의 스팬으로 구성되어 있습니다.
  • 범위: 각 범위는 API 호출, 데이터베이스 쿼리 또는 구성 요소 렌더링과 같은 여정의 단일 작업을 나타냅니다. 스팬에는 태그 또는 이벤트와 함께 작업의 시작 및 종료 시간에 대한 메타데이터가 포함되어 있습니다.
  • 컨텍스트 전파: 분산 추적은 서비스 경계 전반에 걸쳐 추적 컨텍스트를 전파하여 시스템의 여러 부분이 동일한 추적에 기여할 수 있도록 합니다.

Next.js에서 분산 추적을 사용하는 이유는 무엇입니까?

풀 스택 프레임워크인 Next.js에는 외부 서비스와 상호 작용할 수 있는 API 경로와 함께 서버측 및 클라이언트측 렌더링이 혼합되어 포함될 수 있습니다. 여러 구성요소와 서비스가 포함된 대규모 애플리케이션을 구축하는 경우 성능 병목 현상을 식별하고 시스템 상태를 확인하는 것이 중요합니다.

분산 추적은 Next.js 개발자에게 도움이 됩니다.

  • API 경로 성능 모니터링: 서버 측 경로의 성능을 이해하고, 느린 데이터베이스 쿼리 또는 외부 API 호출을 식별하고, 병목 현상을 최적화합니다.
  • 사용자 환경 개선: 서버 측 렌더링(SSR), 정적 사이트 생성(SSG) 또는 클라이언트 측 렌더링을 통해 다양한 Next.js 페이지를 렌더링하는 데 걸리는 시간을 모니터링하세요.
  • 서비스 전반에 걸쳐 오류 디버그: Next.js 앱이 여러 마이크로서비스 또는 타사 서비스와 통신하는 경우 추적을 통해 해당 서비스 전반에서 데이터 흐름을 추적하여 오류 또는 지연 문제가 발생한 위치를 정확히 찾아내는 데 도움이 될 수 있습니다.

Next.js에서 분산 추적을 구현하는 방법

Next.js에서 분산 추적을 구현하기 위해 분산 추적 수집을 위한 기반을 제공하는 OpenTelemetry와 같은 오픈 소스 라이브러리나 Datadog, New Relic 및 추적을 위한 고급 기능을 제공하는 기타 독점 솔루션을 활용할 수 있습니다.

1단계: OpenTelemetry 설정

OpenTelemetry는 추적 데이터를 수집하고 내보내기 위한 도구를 제공하는 오픈 소스 표준입니다. 다양한 공급업체와 클라우드 플랫폼에서 지원됩니다.

  1. OpenTelemetry 패키지 설치: 필요한 OpenTelemetry 패키지를 설치하여 시작하세요. Node.js 및 HTTP 프레임워크용 핵심 패키지와 특정 패키지가 필요합니다.
   npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/exporter-jaeger

이 설정에는 다음이 포함됩니다.

  • @opentelemetry/api: 핵심 추적 API.
  • @opentelemetry/sdk-node: 추적을 캡처하는 Node.js SDK.
  • @opentelemetry/instrumentation-http: HTTP 호출을 위한 계측.
  • @opentelemetry/exporter-jaeger: 오픈 소스 분산 추적 시스템인 Jaeger로의 내보내기 예시입니다.
  1. 추적 설정 파일 만들기: Next.js 프로젝트에서 tracing.js라는 파일을 생성하여 OpenTelemetry를 구성하고 초기화합니다.
   const { NodeTracerProvider } = require('@opentelemetry/sdk-node');
   const { SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
   const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
   const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http');

   const provider = new NodeTracerProvider();

   // Configure exporter
   const exporter = new JaegerExporter({
     endpoint: 'http://localhost:14268/api/traces', // Jaeger endpoint
   });

   provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

   // Register the provider globally
   provider.register();

   // Initialize HTTP instrumentation
   new HttpInstrumentation().setTracerProvider(provider);
  1. API 경로 계측: OpenTelemetry의 API를 사용하여 Next.js API 경로에 범위를 수동으로 생성할 수 있습니다.
   import { trace } from '@opentelemetry/api';

   export default async function handler(req, res) {
     const tracer = trace.getTracer('default');
     const span = tracer.startSpan('api-route-handler');

     try {
       // Simulate some async work
       await new Promise((resolve) => setTimeout(resolve, 100));
       res.status(200).json({ message: 'Hello from the API' });
     } catch (error) {
       span.recordException(error);
       res.status(500).json({ error: 'Internal Server Error' });
     } finally {
       span.end();
     }
   }

이렇게 하면 API 경로 실행을 추적하는 범위가 생성됩니다. 오류가 있으면 스팬이 해당 예외를 캡처합니다.

  1. 클라이언트측 추적 캡처(선택 사항): 클라이언트 측 추적(예: 페이지가 데이터를 렌더링하거나 로드하는 데 걸리는 시간 측정)의 경우 브라우저에서 유사한 OpenTelemetry 구성을 설정할 수 있습니다. 또한 추적 데이터를 백엔드로 보내도록 내보내기를 구성할 수도 있습니다.

2단계: 추적 공급업체 사용

또는 보다 포괄적인 추적 기능을 제공하고 다른 성능 모니터링 도구와 통합되는 Datadog, New Relic 또는 AWS X-Ray와 같은 타사 도구를 사용할 수 있습니다.

예를 들어 Datadog을 Next.js 애플리케이션에 통합하려면 다음을 수행하세요.

  1. Datadog 패키지 설치:
   npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/exporter-jaeger
  1. 추적 초기화: dd-tracing.js 파일을 생성하고 애플리케이션에 대한 Datadog 추적을 구성합니다.
   const { NodeTracerProvider } = require('@opentelemetry/sdk-node');
   const { SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
   const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
   const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http');

   const provider = new NodeTracerProvider();

   // Configure exporter
   const exporter = new JaegerExporter({
     endpoint: 'http://localhost:14268/api/traces', // Jaeger endpoint
   });

   provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

   // Register the provider globally
   provider.register();

   // Initialize HTTP instrumentation
   new HttpInstrumentation().setTracerProvider(provider);
  1. 모니터링 및 분석: Datadog에 추적을 보낸 후 대시보드를 사용하여 요청 경로를 시각화하고 병목 현상을 식별하고 시스템을 모니터링합니다.

3단계: 추적 분석

추적 시스템이 설정되면 Jaeger, Datadog 또는 추적 백엔드와 같은 도구를 사용하여 추적을 보고 분석할 수 있습니다. 이러한 도구는 각 추적의 폭포식 보기를 표시하여 애플리케이션을 통한 요청 흐름 방식과 성능 문제가 발생하는 위치를 이해하는 데 도움이 됩니다.

결론

분산 추적은 최신 애플리케이션, 특히 클라이언트측 로직과 서버측 로직을 모두 처리하는 Next.js와 같은 프레임워크로 구축된 애플리케이션에 대한 필수적인 가시성을 제공합니다. 분산 추적을 구현하면 앱 성능에 대한 깊은 통찰력을 얻을 수 있으므로 병목 현상을 효율적으로 진단하고 수정할 수 있습니다. OpenTelemetry와 같은 오픈 소스 솔루션을 선택하든 Datadog과 같은 상용 도구를 선택하든 분산 추적은 Next.js 애플리케이션이 최적화되고 안정적이며 확장 가능하도록 보장하는 데 도움이 됩니다.

위 내용은 Next.js의 분산 추적의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.