hskwon
b7cf045a81
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
305 lines
16 KiB
HTML
305 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>시스템 아키텍처 다이어그램</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 40px;
|
|
font-size: 2.5em;
|
|
}
|
|
.architecture-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
background: #f8f9fa;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.legend {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #f0f0f0;
|
|
border-radius: 10px;
|
|
}
|
|
.legend-item {
|
|
display: inline-block;
|
|
margin: 10px 20px;
|
|
}
|
|
.legend-color {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
border-radius: 3px;
|
|
}
|
|
.network-info {
|
|
margin-top: 30px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.info-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
}
|
|
.info-card h3 {
|
|
margin-top: 0;
|
|
border-bottom: 2px solid rgba(255,255,255,0.3);
|
|
padding-bottom: 10px;
|
|
}
|
|
.info-card ul {
|
|
margin: 10px 0;
|
|
padding-left: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🏗️ 클라우드 하이브리드 시스템 아키텍처</h1>
|
|
|
|
<div class="architecture-svg">
|
|
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background zones -->
|
|
<rect x="20" y="20" width="560" height="760" fill="#e3f2fd" stroke="#1976d2" stroke-width="2" rx="10" opacity="0.3"/>
|
|
<rect x="600" y="20" width="580" height="360" fill="#fff3e0" stroke="#f57c00" stroke-width="2" rx="10" opacity="0.3"/>
|
|
<rect x="600" y="400" width="580" height="380" fill="#e8f5e9" stroke="#388e3c" stroke-width="2" rx="10" opacity="0.3"/>
|
|
|
|
<!-- Zone labels -->
|
|
<text x="300" y="50" font-size="20" font-weight="bold" fill="#1976d2" text-anchor="middle">클라우드 영역</text>
|
|
<text x="890" y="50" font-size="20" font-weight="bold" fill="#f57c00" text-anchor="middle">IDC 코로케이션 영역</text>
|
|
<text x="890" y="430" font-size="20" font-weight="bold" fill="#388e3c" text-anchor="middle">사용자 접근 영역</text>
|
|
|
|
<!-- Load Balancer -->
|
|
<rect x="250" y="100" width="100" height="60" fill="#ff5722" stroke="#d84315" stroke-width="2" rx="5"/>
|
|
<text x="300" y="135" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Load</text>
|
|
<text x="300" y="150" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Balancer</text>
|
|
|
|
<!-- Cloud Servers -->
|
|
<!-- 운영 서버 A -->
|
|
<g transform="translate(150, 220)">
|
|
<rect width="160" height="120" fill="#2196f3" stroke="#1565c0" stroke-width="2" rx="8"/>
|
|
<text x="80" y="25" font-size="16" font-weight="bold" fill="white" text-anchor="middle">운영 서버 A</text>
|
|
<text x="80" y="45" font-size="12" fill="white" text-anchor="middle">Standard (4vCore/8GB)</text>
|
|
<rect x="10" y="60" width="140" height="25" fill="#1565c0" rx="3"/>
|
|
<text x="80" y="77" font-size="11" fill="white" text-anchor="middle">Web Service</text>
|
|
<rect x="10" y="90" width="140" height="25" fill="#0d47a1" rx="3"/>
|
|
<text x="80" y="107" font-size="11" fill="white" text-anchor="middle">DB Master (Active)</text>
|
|
</g>
|
|
|
|
<!-- 운영 서버 B -->
|
|
<g transform="translate(340, 220)">
|
|
<rect width="160" height="120" fill="#2196f3" stroke="#1565c0" stroke-width="2" rx="8"/>
|
|
<text x="80" y="25" font-size="16" font-weight="bold" fill="white" text-anchor="middle">운영 서버 B</text>
|
|
<text x="80" y="45" font-size="12" fill="white" text-anchor="middle">Standard (4vCore/8GB)</text>
|
|
<rect x="10" y="60" width="140" height="25" fill="#1565c0" rx="3"/>
|
|
<text x="80" y="77" font-size="11" fill="white" text-anchor="middle">Web Service</text>
|
|
<rect x="10" y="90" width="140" height="25" fill="#0d47a1" rx="3"/>
|
|
<text x="80" y="107" font-size="11" fill="white" text-anchor="middle">DB Standby</text>
|
|
</g>
|
|
|
|
<!-- 개발 서버 C -->
|
|
<g transform="translate(250, 400)">
|
|
<rect width="160" height="120" fill="#9c27b0" stroke="#6a1b9a" stroke-width="2" rx="8"/>
|
|
<text x="80" y="25" font-size="16" font-weight="bold" fill="white" text-anchor="middle">개발 서버 C</text>
|
|
<text x="80" y="45" font-size="12" fill="white" text-anchor="middle">Play (2vCore/4GB)</text>
|
|
<rect x="10" y="60" width="140" height="25" fill="#6a1b9a" rx="3"/>
|
|
<text x="80" y="77" font-size="11" fill="white" text-anchor="middle">Staging Service</text>
|
|
<rect x="10" y="90" width="140" height="25" fill="#4a148c" rx="3"/>
|
|
<text x="80" y="107" font-size="11" fill="white" text-anchor="middle">Dev DB</text>
|
|
</g>
|
|
|
|
<!-- GitLab -->
|
|
<g transform="translate(80, 580)">
|
|
<rect width="140" height="80" fill="#ff9800" stroke="#e65100" stroke-width="2" rx="8"/>
|
|
<text x="70" y="30" font-size="16" font-weight="bold" fill="white" text-anchor="middle">GitLab</text>
|
|
<text x="70" y="50" font-size="12" fill="white" text-anchor="middle">Repository</text>
|
|
<text x="70" y="65" font-size="12" fill="white" text-anchor="middle">CI/CD Pipeline</text>
|
|
</g>
|
|
|
|
<!-- IDC Servers -->
|
|
<!-- HP DL360 -->
|
|
<g transform="translate(650, 120)">
|
|
<rect width="200" height="140" fill="#4caf50" stroke="#2e7d32" stroke-width="2" rx="8"/>
|
|
<text x="100" y="25" font-size="16" font-weight="bold" fill="white" text-anchor="middle">HP DL360 #1</text>
|
|
<rect x="10" y="40" width="180" height="25" fill="#2e7d32" rx="3"/>
|
|
<text x="100" y="57" font-size="11" fill="white" text-anchor="middle">CI/CD Runner</text>
|
|
<rect x="10" y="70" width="180" height="25" fill="#2e7d32" rx="3"/>
|
|
<text x="100" y="87" font-size="11" fill="white" text-anchor="middle">GitLab 중앙 거점</text>
|
|
<rect x="10" y="100" width="180" height="25" fill="#2e7d32" rx="3"/>
|
|
<text x="100" y="117" font-size="11" fill="white" text-anchor="middle">Admin (통계) - Standby DB 사용</text>
|
|
</g>
|
|
|
|
<!-- HP DL210 -->
|
|
<g transform="translate(900, 120)">
|
|
<rect width="200" height="140" fill="#607d8b" stroke="#37474f" stroke-width="2" rx="8"/>
|
|
<text x="100" y="25" font-size="16" font-weight="bold" fill="white" text-anchor="middle">HP DL210 #2</text>
|
|
<rect x="10" y="40" width="180" height="25" fill="#37474f" rx="3"/>
|
|
<text x="100" y="57" font-size="11" fill="white" text-anchor="middle">중앙 백업 저장소</text>
|
|
<rect x="10" y="70" width="180" height="25" fill="#37474f" rx="3"/>
|
|
<text x="100" y="87" font-size="11" fill="white" text-anchor="middle">DR 환경</text>
|
|
<rect x="10" y="100" width="180" height="25" fill="#37474f" rx="3"/>
|
|
<text x="100" y="117" font-size="11" fill="white" text-anchor="middle">중앙 모니터링/로깅</text>
|
|
</g>
|
|
|
|
<!-- Users -->
|
|
<g transform="translate(700, 500)">
|
|
<circle cx="50" cy="50" r="30" fill="#795548" stroke="#5d4037" stroke-width="2"/>
|
|
<text x="50" y="55" font-size="14" fill="white" text-anchor="middle">Users</text>
|
|
<text x="50" y="100" font-size="12" fill="#333" text-anchor="middle">일반 사용자</text>
|
|
</g>
|
|
|
|
<g transform="translate(850, 500)">
|
|
<circle cx="50" cy="50" r="30" fill="#795548" stroke="#5d4037" stroke-width="2"/>
|
|
<text x="50" y="55" font-size="14" fill="white" text-anchor="middle">Admin</text>
|
|
<text x="50" y="100" font-size="12" fill="#333" text-anchor="middle">관리자</text>
|
|
</g>
|
|
|
|
<g transform="translate(1000, 500)">
|
|
<circle cx="50" cy="50" r="30" fill="#795548" stroke="#5d4037" stroke-width="2"/>
|
|
<text x="50" y="55" font-size="14" fill="white" text-anchor="middle">Dev</text>
|
|
<text x="50" y="100" font-size="12" fill="#333" text-anchor="middle">개발자</text>
|
|
</g>
|
|
|
|
<!-- Connections -->
|
|
<!-- LB to Servers -->
|
|
<path d="M 300 160 L 230 220" stroke="#ff5722" stroke-width="3" fill="none" marker-end="url(#arrowhead-orange)"/>
|
|
<path d="M 300 160 L 420 220" stroke="#ff5722" stroke-width="3" fill="none" marker-end="url(#arrowhead-orange)"/>
|
|
|
|
<!-- DB Replication -->
|
|
<path d="M 310 310 L 340 310" stroke="#0d47a1" stroke-width="3" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowhead-blue)"/>
|
|
<text x="325" y="300" font-size="10" fill="#0d47a1">Replication</text>
|
|
|
|
<!-- GitLab to Dev Server -->
|
|
<path d="M 220 600 L 300 520" stroke="#ff9800" stroke-width="2" fill="none" marker-end="url(#arrowhead-orange2)"/>
|
|
|
|
<!-- GitLab to CI/CD -->
|
|
<path d="M 220 620 L 650 190" stroke="#ff9800" stroke-width="2" fill="none" marker-end="url(#arrowhead-orange2)"/>
|
|
|
|
<!-- CI/CD to Production -->
|
|
<path d="M 650 190 L 500 280" stroke="#4caf50" stroke-width="2" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead-green)"/>
|
|
<text x="570" y="230" font-size="10" fill="#4caf50">Deploy</text>
|
|
|
|
<!-- Backup connections -->
|
|
<path d="M 900 190 L 500 280" stroke="#607d8b" stroke-width="2" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead-gray)"/>
|
|
<text x="700" y="230" font-size="10" fill="#607d8b">Backup</text>
|
|
|
|
<!-- User connections -->
|
|
<path d="M 750 500 L 300 160" stroke="#795548" stroke-width="2" fill="none" marker-end="url(#arrowhead-brown)"/>
|
|
<path d="M 900 500 L 750 260" stroke="#795548" stroke-width="2" fill="none" marker-end="url(#arrowhead-brown)"/>
|
|
<path d="M 1050 500 L 330 520" stroke="#795548" stroke-width="2" fill="none" marker-end="url(#arrowhead-brown)"/>
|
|
|
|
<!-- Arrow markers -->
|
|
<defs>
|
|
<marker id="arrowhead-orange" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#ff5722">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
<marker id="arrowhead-blue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#0d47a1">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
<marker id="arrowhead-orange2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#ff9800">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
<marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#4caf50">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
<marker id="arrowhead-gray" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#607d8b">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
<marker id="arrowhead-brown" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#795548">
|
|
<polygon points="0 0, 10 3, 0 6"/>
|
|
</marker>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #2196f3;"></span>
|
|
<span>운영 서버</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #9c27b0;"></span>
|
|
<span>개발 서버</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #4caf50;"></span>
|
|
<span>CI/CD 서버</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #607d8b;"></span>
|
|
<span>백업 서버</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #ff5722;"></span>
|
|
<span>로드밸런서</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-color" style="background: #ff9800;"></span>
|
|
<span>GitLab</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="network-info">
|
|
<div class="info-card">
|
|
<h3>📡 네트워크 구성</h3>
|
|
<ul>
|
|
<li>Public Subnet: Web Service Layer</li>
|
|
<li>Private Network: Database Layer</li>
|
|
<li>VPN: Admin Access</li>
|
|
<li>Load Balancing: Round Robin / Health Check</li>
|
|
</ul>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>🔐 보안 구성</h3>
|
|
<ul>
|
|
<li>SSH: Runner 서버만 운영 서버 접근 허용</li>
|
|
<li>DB: 외부 직접 접근 차단</li>
|
|
<li>Admin: VPN 통한 접근</li>
|
|
<li>Firewall: 각 서버별 Security Group 적용</li>
|
|
</ul>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>💾 데이터 흐름</h3>
|
|
<ul>
|
|
<li>Master-Slave DB Replication</li>
|
|
<li>중앙 백업 서버로 일일 백업</li>
|
|
<li>DR 환경 구성</li>
|
|
<li>로깅 데이터 중앙 집중화</li>
|
|
</ul>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>🚀 CI/CD 파이프라인</h3>
|
|
<ul>
|
|
<li>GitLab → Runner → Deploy</li>
|
|
<li>자동 테스트 및 빌드</li>
|
|
<li>Blue-Green 배포 (향후)</li>
|
|
<li>롤백 전략 구현</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |