# 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에 접근할 수 있도록 하는 것이 가장 현실적인 해결책입니다.