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>
This commit is contained in:
291
farmq-admin/templates/vnc_ssl_help.html
Normal file
291
farmq-admin/templates/vnc_ssl_help.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SSL 인증서 문제 해결 - {{ vm_name }}</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.ssl-help-container {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
margin: 50px auto;
|
||||
max-width: 800px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ssl-help-header {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ffd93d);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ssl-help-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.step-header {
|
||||
background: #f8f9fa;
|
||||
padding: 15px 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.url-box {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
margin-left: 10px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.success-box {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="ssl-help-container">
|
||||
<div class="ssl-help-header">
|
||||
<i class="fas fa-shield-alt fa-3x mb-3"></i>
|
||||
<h2>SSL 인증서 신뢰 설정이 필요합니다</h2>
|
||||
<p class="mb-0">{{ vm_name }} VNC 연결을 위해 Proxmox 서버의 SSL 인증서를 신뢰해야 합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="ssl-help-body">
|
||||
<div class="warning-box">
|
||||
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
|
||||
<strong>연결 실패 원인:</strong> 브라우저가 Proxmox 서버의 자체 서명된 SSL 인증서를 신뢰하지 않아 WebSocket 연결이 차단되고 있습니다.
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">1</div>
|
||||
SSL 인증서 신뢰 설정
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<p>아래 링크를 <strong>새 탭</strong>에서 열어 Proxmox 서버의 SSL 인증서를 신뢰하도록 설정하세요:</p>
|
||||
|
||||
<div class="url-box">
|
||||
<a href="https://{{ proxmox_host }}:{{ proxmox_port }}" target="_blank" id="proxmoxUrl">
|
||||
https://{{ proxmox_host }}:{{ proxmox_port }}
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-secondary btn-copy" onclick="copyUrl()">
|
||||
<i class="fas fa-copy"></i> 복사
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h6><i class="fas fa-info-circle text-info me-2"></i>브라우저별 설정 방법:</h6>
|
||||
<ul class="list-unstyled ms-3">
|
||||
<li><strong>Chrome/Edge:</strong> "고급" → "{{ proxmox_host }}(으)로 이동(안전하지 않음)" 클릭</li>
|
||||
<li><strong>Firefox:</strong> "고급" → "위험을 감수하고 계속" 클릭</li>
|
||||
<li><strong>Safari:</strong> "세부 정보 표시" → "웹 사이트 방문" 클릭</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">2</div>
|
||||
Proxmox 웹 인터페이스 확인
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<p>링크를 클릭하면 Proxmox VE 웹 인터페이스가 표시됩니다. 로그인할 필요는 없으며, 페이지가 정상적으로 로드되면 SSL 인증서 신뢰 설정이 완료된 것입니다.</p>
|
||||
|
||||
<div class="success-box">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<strong>성공 확인:</strong> Proxmox 로그인 페이지가 보이면 인증서 신뢰 설정이 완료되었습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">3</div>
|
||||
VNC 연결 재시도
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<p>SSL 인증서 신뢰 설정이 완료되면, 아래 버튼을 클릭하여 VNC 연결을 다시 시도하세요:</p>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-primary btn-lg" onclick="retryVncConnection()">
|
||||
<i class="fas fa-desktop me-2"></i>VNC 연결 재시도
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline-secondary btn-lg ms-3" onclick="testWebSocket()">
|
||||
<i class="fas fa-wifi me-2"></i>연결 테스트
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="connectionStatus" class="mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">4</div>
|
||||
문제 해결
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<p>위 단계를 완료했는데도 연결이 되지 않는다면:</p>
|
||||
<ul>
|
||||
<li>브라우저를 완전히 닫고 다시 열어보세요</li>
|
||||
<li>시크릿/인코그니토 모드에서 시도해보세요</li>
|
||||
<li>다른 브라우저를 사용해보세요</li>
|
||||
<li>방화벽이나 프록시 설정을 확인하세요</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<a href="/vms?host={{ host_key }}" class="btn btn-outline-dark">
|
||||
<i class="fas fa-arrow-left me-2"></i>VM 목록으로 돌아가기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
// URL 복사 함수
|
||||
function copyUrl() {
|
||||
const url = document.getElementById('proxmoxUrl').href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
alert('URL이 클립보드에 복사되었습니다.');
|
||||
});
|
||||
}
|
||||
|
||||
// VNC 연결 재시도
|
||||
function retryVncConnection() {
|
||||
const sessionId = '{{ session_id }}';
|
||||
window.location.href = `/vnc/${sessionId}`;
|
||||
}
|
||||
|
||||
// WebSocket 연결 테스트
|
||||
function testWebSocket() {
|
||||
const statusDiv = document.getElementById('connectionStatus');
|
||||
statusDiv.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> 연결 테스트 중...</div>';
|
||||
|
||||
try {
|
||||
const websocketUrl = '{{ websocket_url }}';
|
||||
const ws = new WebSocket(websocketUrl);
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
ws.close();
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
<strong>연결 시간 초과</strong><br>
|
||||
SSL 인증서 신뢰 설정을 먼저 완료해주세요.
|
||||
</div>`;
|
||||
}, 5000);
|
||||
|
||||
ws.onopen = function() {
|
||||
clearTimeout(timeout);
|
||||
ws.close();
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
<strong>연결 성공!</strong><br>
|
||||
VNC 연결 재시도 버튼을 클릭하세요.
|
||||
</div>`;
|
||||
};
|
||||
|
||||
ws.onerror = function() {
|
||||
clearTimeout(timeout);
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-times-circle me-2"></i>
|
||||
<strong>연결 실패</strong><br>
|
||||
SSL 인증서 신뢰 설정이 필요합니다.
|
||||
</div>`;
|
||||
};
|
||||
|
||||
ws.onclose = function(event) {
|
||||
if (event.code !== 1000) {
|
||||
clearTimeout(timeout);
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
<strong>연결 종료</strong><br>
|
||||
SSL 인증서를 신뢰한 후 다시 시도해주세요.
|
||||
</div>`;
|
||||
}
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-times-circle me-2"></i>
|
||||
<strong>테스트 오류</strong><br>
|
||||
${error.message}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user