시골약사
fb00b0a5fd
- 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>
291 lines
12 KiB
HTML
291 lines
12 KiB
HTML
<!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> |