hanarang-dashboard/.plans/design/architecture.md

아키텍처

시스템 구성

[Client Browser]
    ↓
[Nginx Reverse Proxy - LXC 101]
    ├── hanarang.nabomhalang.co.kr → Next.js FE (:3004)
    └── hanarang-api.nabomhalang.co.kr → Nest.js BE (:3005)
                                            ├── SSH → 4자매 서버 (상태 조회)
                                            ├── HTTP → Gitea API (프로젝트/repo)
                                            └── DB → MariaDB LXC 103

Frontend (Next.js)

• 프레임워크: Next.js (App Router)
• 스타일링: styled-components (return 아래에 적재)
• 상태관리: React hooks
• 테마: 다크 테마 기본, CSS 변수로 색상 관리
• 포트: 3004

Backend (Nest.js)

• 프레임워크: Nest.js
• ORM: Prisma
• 포트: 3005
• 외부 연동:
  • SSH (node-ssh): 4자매 서버 상태 조회
  • Gitea REST API: 프로젝트/repo/PR 정보
  • MariaDB: 대시보드 자체 데이터

데이터 수집 방식

Backend가 SSH로 각 자매 서버에서 수집:

• systemctl --user is-active openclaw-gateway → 온라인 상태
• ~/.openclaw/openclaw.json → 설정 정보
• ~/.openclaw/agents/main/sessions/ → 세션 로그
• Gitea API → 프로젝트/브랜치/PR 정보

DB (MariaDB)

• 호스트: 10.10.10.146:33006
• DB명: hanarang_dashboard
• 인코딩: utf8mb4

배포

• Dev 서버: 10.10.10.169
• 프로세스 관리: PM2
• FE: pm2 start npm --name hanarang-web -- start (포트 3004)
• BE: pm2 start dist/main.js --name hanarang-api (포트 3005)