pdvnc-viewer

웹 기반 다중 VNC 클라이언트 대시보드

개요

noVNC를 활용한 웹 브라우저 기반 VNC 뷰어입니다. 여러 VNC 서버에 동시 연결하여 대시보드 형태로 모니터링할 수 있습니다.

기술 스택

• Frontend: SvelteKit, Svelte 5, Tailwind CSS
• VNC Client: noVNC
• WebSocket Proxy: Express + ws
• UI Components: bits-ui, Lucide Icons
• i18n: typesafe-i18n

요구사항

항목	버전
Node.js	v20.0.0 이상
npm	v10 이상

설치

# 환경 변수 설정
cp .env.example .env
cp proxy/.env.example proxy/.env

# 의존성 설치
npm install

실행

개발 모드

# 터미널 1: SvelteKit 개발 서버
npm run dev

# 터미널 2: VNC 프록시 서버
npm run dev:proxy

• SvelteKit: http://localhost:5174
• VNC 프록시: http://localhost:3000

프로덕션 모드

# 빌드
npm run build

# 서버 실행
npm run start

프로덕션 서버가 http://localhost:3000 에서 실행됩니다.

환경 변수

루트 .env

변수	설명	기본값
PORT	SvelteKit 서버 포트	5174
PUBLIC_PROXY_URL	VNC 프록시 서버 URL	http://localhost:3000

proxy/.env

변수	설명	기본값
PORT	프록시 서버 포트	3000

프로젝트 구조

pdvnc-viewer/
├── src/
│   ├── routes/         # 페이지 라우트
│   │   ├── +layout.svelte
│   │   ├── +page.svelte
│   │   └── view/       # VNC 뷰어 페이지
│   ├── lib/            # 컴포넌트 및 유틸리티
│   └── i18n/           # 다국어 리소스
├── proxy/
│   └── server.js       # VNC WebSocket 프록시 + 프로덕션 서버
├── build/              # 빌드 결과물
└── static/             # 정적 파일

VNC 프록시

proxy/server.js는 WebSocket을 통해 VNC 서버와 브라우저 간 TCP 연결을 중계합니다.

• WebSocket 경로: /vnc-proxy
• 쿼리 파라미터:
  • host: VNC 서버 호스트
  • port: VNC 서버 포트

ws://localhost:3000/vnc-proxy?host=192.168.1.100&port=5900

스크립트

명령어	설명
npm run dev	SvelteKit 개발 서버 실행
npm run dev:proxy	VNC 프록시 서버 실행 (개발용)
npm run build	프로덕션 빌드
npm run start	프로덕션 서버 실행
npm run preview	빌드 결과물 프리뷰
npm run check	TypeScript 타입 체크
npm run clean	빌드 파일 삭제