headscale-tailscale-replace.../farmq-admin/VNC_Network_Architecture_Issue.md
시골약사 fb00b0a5fd Add multi-host Proxmox support with SSL certificate handling
- Added support for multiple Proxmox hosts (pve7.0bin.in:443, Healthport PVE:8006)
- Enhanced VM management APIs to accept host parameter
- Fixed WebSocket URL generation bug (dynamic port handling)
- Added comprehensive SSL certificate trust help system
- Implemented host selection dropdown in UI
- Added VNC connection failure detection and automatic SSL help redirection
- Updated session management to store host_key information
- Enhanced error handling for different Proxmox configurations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-13 00:03:25 +09:00

161 lines
4.5 KiB
Markdown

# VNC 네트워크 아키텍처 문제 분석 및 해결방안
## 🔍 현재 상황 분석
### 네트워크 구조
```
[외부 사용자 PC]
↓ (인터넷)
[pqadmin.0bin.in] (Let's Encrypt SSL + 리버스 프록시)
↓ (로컬/VPN)
[Headscale 서버 - Flask Admin]
↓ (Headscale VPN: 100.64.x.x)
[Proxmox Hosts]
- pve7.0bin.in (443)
- 100.64.0.6:8006 (Healthport PVE)
```
### 문제 상황
1. **Flask 서버**: Headscale VPN 내부에서 실행 중
2. **외부 사용자**: `pqadmin.0bin.in`을 통해 Flask Admin에 접속
3. **VNC WebSocket URL**: `wss://100.64.0.6:8006/...` (Headscale VPN 내부 IP)
4. **접속 실패**: 외부 사용자는 100.64.x.x 대역에 접근 불가
## ❌ 핵심 문제
### 네트워크 분리 문제
- **Flask Admin**: 인터넷에서 접근 가능 (`pqadmin.0bin.in`)
- **Proxmox VNC**: Headscale VPN 내부에서만 접근 가능 (`100.64.x.x`)
- **사용자**: 두 네트워크를 동시에 접근할 수 없음
### 현재 WebSocket 연결 방식
```javascript
// 문제가 되는 현재 방식
WebSocket URL: wss://100.64.0.6:8006/api2/json/nodes/pev/qemu/103/vncwebsocket
```
## 💡 해결방안
### 1. WebSocket 프록시 구현 (권장)
#### 구조
```
[외부 사용자] → [pqadmin.0bin.in] → [Flask 서버] → [Proxmox VNC]
↓ ↓ ↓ ↓
wss://pqadmin.0bin.in/vnc-proxy/{session_id} → wss://100.64.0.6:8006/...
```
#### 구현 방법
1. **Flask에서 WebSocket 프록시 서버 구현**
- Socket.IO 또는 웹소켓 라이브러리 사용
- 외부 → Flask → Proxmox 중계 역할
2. **URL 변경**
```javascript
// 변경 전
wss://100.64.0.6:8006/api2/json/nodes/pev/qemu/103/vncwebsocket
// 변경 후
wss://pqadmin.0bin.in/vnc-proxy/session_id_here
```
### 2. Nginx 리버스 프록시 확장
#### Nginx 설정 추가
```nginx
# VNC WebSocket 프록시
location /vnc-ws/ {
proxy_pass https://100.64.0.6:8006/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_ssl_verify off;
}
```
#### URL 변경
```javascript
// 변경 전
wss://100.64.0.6:8006/api2/json/nodes/pev/qemu/103/vncwebsocket
// 변경 후
wss://pqadmin.0bin.in/vnc-ws/api2/json/nodes/pev/qemu/103/vncwebsocket
```
### 3. VPN 클라이언트 요구 (비권장)
#### 방법
- 모든 사용자가 Headscale VPN 클라이언트 설치
- 100.64.x.x 대역 직접 접근 가능
#### 단점
- 사용자 부담 증가
- 관리 복잡성
- 보안 위험
## 🎯 권장 솔루션: WebSocket 프록시
### 장점
1. **사용자 친화적**: 별도 설치 없이 웹브라우저로 접근
2. **보안**: Headscale VPN은 내부 트래픽만 처리
3. **확장성**: 다수의 Proxmox 호스트 지원
4. **SSL 인증서**: Let's Encrypt로 안전한 연결
### 구현 우선순위
1. **1단계**: Flask Socket.IO WebSocket 프록시 구현
2. **2단계**: 세션 관리 및 인증 강화
3. **3단계**: 다중 Proxmox 호스트 지원 완성
4. **4단계**: 성능 최적화 및 모니터링
## 🔧 기술 스택
### 현재 사용 중
- **Flask**: Web 서버
- **noVNC**: 브라우저 VNC 클라이언트
- **Headscale**: VPN 서버
- **Nginx**: 리버스 프록시
- **Let's Encrypt**: SSL 인증서
### 추가 필요
- **Flask-SocketIO**: WebSocket 프록시 구현
- **python-websockets**: WebSocket 클라이언트 (Proxmox 연결용)
## 📋 구현 단계
### Phase 1: WebSocket 프록시 서버
1. Flask-SocketIO 설치 및 설정
2. VNC WebSocket 프록시 핸들러 구현
3. 세션 관리 및 인증 연동
### Phase 2: URL 라우팅 변경
1. VNC 연결 URL 생성 로직 수정
2. 프록시 경로로 WebSocket URL 변경
3. noVNC 클라이언트 연결 테스트
### Phase 3: 다중 호스트 지원
1. 호스트별 프록시 라우팅
2. 동적 Proxmox 호스트 추가
3. 로드 밸런싱 고려
## ⚠️ 고려사항
### 성능
- WebSocket 프록시로 인한 지연 시간 증가
- 동시 연결 수 제한
- 서버 리소스 사용량 증가
### 보안
- VNC 트래픽 암호화 상태 유지
- 세션 만료 및 권한 관리
- DDoS 방어 메커니즘
### 확장성
- 다수 사용자 동시 접속
- Proxmox 호스트 동적 추가
- 클러스터 환경 지원
---
**결론**: WebSocket 프록시를 통해 외부 사용자가 안전하게 내부 Proxmox VNC에 접근할 수 있도록 하는 것이 가장 현실적인 해결책입니다.