시골약사
895b7a8ee7
- Proxmox VNC 티켓 생성 시 패스워드 생성 활성화 - VNC 세션에 생성된 패스워드 저장 및 전달 - noVNC 클라이언트에서 실제 패스워드 사용으로 인증 문제 해결 - ES6 모듈 방식으로 noVNC 라이브러리 로드 - HTML 엔티티 디코딩으로 WebSocket URL 문제 해결 - PharmQ 사용자 포털 서비스 계획서 추가 (KakaoTalk SSO, TossPayments) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
258 lines
8.9 KiB
HTML
258 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ vm_name }} - VNC 콘솔</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vnc-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vnc-toolbar {
|
|
background: #2c3e50;
|
|
padding: 10px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.vnc-screen {
|
|
flex: 1;
|
|
position: relative;
|
|
background: #000;
|
|
}
|
|
|
|
.vnc-status {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
text-align: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-vnc {
|
|
margin: 0 5px;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#vnc-canvas {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.connection-info {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="vnc-container">
|
|
<!-- VNC 툴바 -->
|
|
<div class="vnc-toolbar">
|
|
<div>
|
|
<strong>🖥️ {{ vm_name }}</strong>
|
|
<span class="connection-info">(VM {{ vmid }} @ {{ node }})</span>
|
|
</div>
|
|
|
|
<div class="vnc-controls">
|
|
<button id="fullscreen-btn" class="btn btn-sm btn-primary btn-vnc">
|
|
<i class="fas fa-expand"></i> 전체화면
|
|
</button>
|
|
<button id="clipboard-btn" class="btn btn-sm btn-info btn-vnc">
|
|
<i class="fas fa-clipboard"></i> 클립보드
|
|
</button>
|
|
<button id="ctrl-alt-del-btn" class="btn btn-sm btn-warning btn-vnc">
|
|
<i class="fas fa-keyboard"></i> Ctrl+Alt+Del
|
|
</button>
|
|
<button id="disconnect-btn" class="btn btn-sm btn-danger btn-vnc">
|
|
<i class="fas fa-times"></i> 연결종료
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VNC 화면 -->
|
|
<div class="vnc-screen">
|
|
<div id="vnc-status" class="vnc-status">
|
|
<div class="spinner-border text-light" role="status">
|
|
<span class="visually-hidden">연결 중...</span>
|
|
</div>
|
|
<div class="mt-3">
|
|
<h5>VNC 연결 중...</h5>
|
|
<p>{{ vm_name }}에 연결하고 있습니다.</p>
|
|
<small>WebSocket URL: {{ websocket_url[:50] }}...</small>
|
|
</div>
|
|
</div>
|
|
<canvas id="vnc-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap Icons -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<script type="module">
|
|
// noVNC 라이브러리 import
|
|
import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc/core/rfb.js';
|
|
|
|
// VNC 연결 설정 (HTML 엔티티 디코딩)
|
|
const rawWebsocketUrl = '{{ websocket_url|safe }}';
|
|
const websocketUrl = rawWebsocketUrl.replace(/&/g, '&');
|
|
const vmName = '{{ vm_name }}';
|
|
const vncPassword = '{{ password }}';
|
|
|
|
let rfb;
|
|
let isConnected = false;
|
|
|
|
// DOM 요소
|
|
const statusDiv = document.getElementById('vnc-status');
|
|
const canvas = document.getElementById('vnc-canvas');
|
|
|
|
// VNC 연결 시작
|
|
function connectVNC() {
|
|
try {
|
|
console.log('Raw WebSocket URL:', rawWebsocketUrl);
|
|
console.log('Decoded WebSocket URL:', websocketUrl);
|
|
console.log('VNC Password:', vncPassword);
|
|
console.log('RFB 클래스 사용 가능:', !!RFB);
|
|
|
|
// URL 유효성 검사
|
|
if (!websocketUrl || !websocketUrl.startsWith('wss://')) {
|
|
throw new Error('유효하지 않은 WebSocket URL');
|
|
}
|
|
|
|
// RFB 객체 생성
|
|
rfb = new RFB(canvas, websocketUrl, {
|
|
credentials: { password: vncPassword },
|
|
shared: true
|
|
});
|
|
|
|
// 이벤트 리스너 등록
|
|
rfb.addEventListener('connect', onConnected);
|
|
rfb.addEventListener('disconnect', onDisconnected);
|
|
rfb.addEventListener('credentialsrequired', onCredentialsRequired);
|
|
rfb.addEventListener('securityfailure', onSecurityFailure);
|
|
|
|
// 화면 크기 자동 조정
|
|
rfb.scaleViewport = true;
|
|
rfb.resizeSession = false;
|
|
|
|
} catch (error) {
|
|
console.error('VNC 연결 오류:', error);
|
|
showStatus('❌ 연결 실패', 'VNC 연결 중 오류가 발생했습니다: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
// 연결 성공
|
|
function onConnected() {
|
|
console.log('VNC 연결 성공');
|
|
isConnected = true;
|
|
statusDiv.style.display = 'none';
|
|
canvas.style.display = 'block';
|
|
}
|
|
|
|
// 연결 해제
|
|
function onDisconnected(e) {
|
|
console.log('VNC 연결 해제:', e.detail);
|
|
isConnected = false;
|
|
|
|
if (e.detail.clean) {
|
|
showStatus('🔌 연결 종료', '연결이 정상적으로 종료되었습니다.', 'info');
|
|
} else {
|
|
showStatus('❌ 연결 끊김', '연결이 예기치 않게 끊어졌습니다: ' + (e.detail.reason || 'Unknown'), 'warning');
|
|
}
|
|
}
|
|
|
|
// 인증 정보 필요
|
|
function onCredentialsRequired() {
|
|
console.log('VNC 인증 정보 필요');
|
|
showStatus('🔐 인증 필요', 'VNC 서버에서 인증이 필요합니다.', 'warning');
|
|
}
|
|
|
|
// 보안 실패
|
|
function onSecurityFailure(e) {
|
|
console.log('VNC 보안 실패:', e.detail);
|
|
showStatus('🔒 보안 실패', 'VNC 보안 인증에 실패했습니다: ' + (e.detail.reason || 'Unknown'), 'danger');
|
|
}
|
|
|
|
// 상태 표시
|
|
function showStatus(title, message, type = 'info') {
|
|
statusDiv.innerHTML = `
|
|
<div class="alert alert-${type}" role="alert">
|
|
<h5>${title}</h5>
|
|
<p>${message}</p>
|
|
<button class="btn btn-secondary" onclick="location.reload()">다시 시도</button>
|
|
</div>
|
|
`;
|
|
statusDiv.style.display = 'block';
|
|
}
|
|
|
|
// 전체화면
|
|
document.getElementById('fullscreen-btn').onclick = function() {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
document.body.requestFullscreen();
|
|
}
|
|
};
|
|
|
|
// 클립보드
|
|
document.getElementById('clipboard-btn').onclick = function() {
|
|
if (rfb && isConnected) {
|
|
const text = prompt('클립보드에 보낼 텍스트를 입력하세요:');
|
|
if (text) {
|
|
rfb.clipboardPasteFrom(text);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Ctrl+Alt+Del 전송
|
|
document.getElementById('ctrl-alt-del-btn').onclick = function() {
|
|
if (rfb && isConnected) {
|
|
rfb.sendCtrlAltDel();
|
|
}
|
|
};
|
|
|
|
// 연결 종료
|
|
document.getElementById('disconnect-btn').onclick = function() {
|
|
if (rfb) {
|
|
rfb.disconnect();
|
|
}
|
|
window.close();
|
|
};
|
|
|
|
// 페이지 로드 후 연결 시작 (ES6 모듈은 즉시 사용 가능)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM 로드 완료, VNC 연결 시작...');
|
|
setTimeout(connectVNC, 1000);
|
|
});
|
|
|
|
// 페이지 종료 시 연결 해제
|
|
window.addEventListener('beforeunload', function() {
|
|
if (rfb) {
|
|
rfb.disconnect();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |