Panopticon_userside
Frontend (Next.js 14)
- React 18 기반 홈쇼핑 UI
- 포트: 3001
- OTel SDK로 브라우저 traces 수집
Backend (NestJS 10)
- REST API (상품, 주문, 장바구니)
- OTel SDK로 traces & metrics 수집
- OpenTelemetry 자동 계측
- Winston/Pino로 structured logging
구조
- frontend/: Next.js 14 + React 18
- backend/: NestJS 10 + Express
- load-generator/: 트래픽 자동 생성
- k8s/: Kubernetes 배포 (tenant-a, tenant-b로 멀티테넌트 구성)
전체 시스템 구조 정리
┌─────────────────────────────────────────────────────────────────┐
│ Kubernetes 클러스터 │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Tenant-A (하나의 유저 서비스) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 1. Application Pods (유저의 실제 서비스) │ │ │
│ │ │ │ │ │
│ │ │ • Backend (NestJS) │ │ │
│ │ │ └─ otel-config.ts 설치 ✅ │ │ │
│ │ │ └─ OTLP_ENDPOINT=http://localhost:4318 │ │ │
│ │ │ │ │ │
│ │ │ • Frontend (Next.js) │ │ │
│ │ │ └─ instrumentation.ts 설치 ✅ │ │ │
│ │ │ └─ OTLP_ENDPOINT=http://localhost:4318 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ traces/metrics (OTLP) │ │
│ │ ↓ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 2. OTel Collector (DaemonSet) │ │ │
│ │ │ - 각 노드에 하나씩 실행 │ │ │
│ │ │ - 같은 Pod의 App에서 localhost:4318로 받음 │ │ │
│ │ │ - Host metrics도 수집 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ HTTP POST │ │
│ │ ↓ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 3. Fluent Bit (DaemonSet) │ │ │
│ │ │ - 각 노드의 컨테이너 로그 수집 │ │ │
│ │ │ - /var/log/containers/*.log 읽음 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ └───────────┼───────────────────────────────────────────────┘ │
│ │ │
│ │ 모두 여기로 전송 │
│ ↓ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 4. Ingest Server (Deployment) : 수집서버 역할 │ │
│ │ - Service: ingest-server.default.svc:4318 │ │
│ │ - POST /v1/traces │ │
│ │ - POST /v1/metrics │ │
│ │ - POST /fluent-bit/logs │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │
└──────────────┼───────────────────────────────────────────────────┘
│
↓
┌─────────────────────────────────┐
│ Panopticon Backend │
│ (Kafka → ...) │
└─────────────────────────────────┘
Markdown
복사
설치 페이지 분석
Collections 부분을 보면 매우 많은 섹션들이 존재함을 확인할 수 있음. 각 세션을 나눈 이유가 뭘까?
섹션 분리 분석 (왜 섹션을 다 나눌까)
1.
Application Monitoring
목적 : Traces + Metrics 수집
설치 위치 : 애플리케이션 코드 내부에
각 언어의 실행 방식이 다르기 때문에, 언어마다 내용이 다름
2.
Logging
목적 : Logs 수집
•
Fluentbit: 범용 로그 수집기 (모든 환경)
•
Node.js: 코드에서 직접 로그 전송
•
Vercel: Vercel 플랫폼 전용 연동
•
CloudFront: AWS 전용 연동
로그를 생성하고 수집하는 방식이 다름
3.
Browser
목적 : 프론트엔드 Traces (사용자 브라우저에서)
프론트엔드 프레임워크 구조가 달라서, 프레임워크마다 설정하는 방식이 다름
4.
Kubernetes
목적 : 인프라 레벨 수집
•
Kubernetes: YAML 매니페스트로 배포
•
Docker: docker-compose.yml로 배포
•
AKS: Azure 전용 연동
배포 방식이 다름
에이전트 설치 분석(우리 userside 앱 기준)
1단계 : 애플리케이션 레벨(코드 수준)
•
NestJS: OTel SDK 설치 + 설정 코드 추가
◦
backend/package.json에 OpenTelemetry 패키지 추가
◦
backend/otel-config.ts 설정 파일 생성
•
Next.js: OTel SDK 설치 + 설정 코드 추가
◦
frontend/instrumentation.ts 파일 생성
2단계 : 인프라 레벨(kubernetes)
•
OTel Collector DaemonSet: 애플리케이션이 생성한 traces/metrics를 수집
•
Fluent Bit DaemonSet: 컨테이너 로그를 수집
[NestJS/Next.js App]
└─ OTel SDK 설치 (코드) → traces/metrics 생성
↓
[Kubernetes Pod]
└─ OTel Collector (DaemonSet) → traces/metrics 수집 → Panopticon으로
전송
└─ Fluent Bit (DaemonSet) → 로그 수집 → Panopticon으로 전송
결론 : 프론트엔드에서 구현할(안내할) 내용
1.
언어/프레임워크별 가이드 (코드 레벨)
- NestJS용 OTel SDK 설치 가이드
- Next.js용 OTel SDK 설치 가이드
- (추가로 Go, Python 등)
2.
Kubernetes 에이전트 배포 가이드 (인프라 레벨)
- OTel Collector DaemonSet 배포
- Fluent Bit DaemonSet 배포
추가 질문 정리
쿠버네티스 환경이 아니라면, nest & next에 설치하는 SDK 말고 인프라 레벨에서 내용이 달라지는건가?
Observability(관찰 가능성)
설치 가이드 페이지 만들 때 알아야할 것
OpenTelemetry? OpenTelemetry Collector?