SamProject/sam-api
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c3de8410ee6a3c8c8bfc93fcff2f86c8d2843f3b
sam-api/public/develop/network-topology-diagram.html
hskwon b7cf045a81 feat: 개발 문서 포털 페이지 생성 
- api.sam.kr/develop/ 접속 시 문서 목록 표시
- 5개 문서 항목 추가:
  * 시스템 아키텍처 다이어그램 (HTML)
  * 서버 사양 및 비용 분석표 (HTML)
  * CI/CD 파이프라인 흐름도 (HTML)
  * 재해복구(DR) 계획서 (Markdown)
  * 네트워크 토폴로지 다이어그램 (HTML)
- 모달 팝업으로 문서 뷰어 구현
- HTML 파일: iframe으로 원본 표시
- Markdown 파일: 자동 HTML 변환 후 표시
- 반응형 디자인 적용 (모바일/태블릿/데스크톱)
- Purple-Blue 그라디언트 UI 테마
2025-10-22 20:39:43 +09:00

505 lines
23 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네트워크 토폴로지 다이어그램</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
}
.network-svg {
width: 100%;
height: auto;
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.info-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.info-card h3 {
margin-bottom: 15px;
border-bottom: 2px solid rgba(255,255,255,0.3);
padding-bottom: 10px;
}
.info-card table {
width: 100%;
color: white;
}
.info-card td {
padding: 5px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.info-card td:first-child {
font-weight: bold;
width: 40%;
}
.security-section {
margin-top: 30px;
padding: 25px;
background: #fff3e0;
border-radius: 15px;
border-left: 5px solid #ff9800;
}
.security-title {
font-size: 1.5em;
color: #ff9800;
margin-bottom: 20px;
}
.security-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.security-item {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.port-table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.port-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.port-table th, .port-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.port-table tbody tr:hover {
background: #f5f5f5;
}
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 15px;
font-size: 0.85em;
font-weight: bold;
}
.badge-public {
background: #4caf50;
color: white;
}
.badge-private {
background: #f44336;
color: white;
}
.badge-internal {
background: #ff9800;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>🌐 네트워크 토폴로지 다이어그램</h1>
<div class="network-svg">
<svg viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg">
<!-- Internet Cloud -->
<ellipse cx="600" cy="80" rx="150" ry="60" fill="#e3f2fd" stroke="#1976d2" stroke-width="2"/>
<text x="600" y="85" font-size="20" font-weight="bold" fill="#1976d2" text-anchor="middle">Internet</text>
<!-- Firewall -->
<rect x="530" y="150" width="140" height="40" fill="#f44336" stroke="#c62828" stroke-width="2" rx="5"/>
<text x="600" y="175" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Firewall / WAF</text>
<!-- Load Balancer -->
<rect x="520" y="220" width="160" height="50" fill="#ff9800" stroke="#e65100" stroke-width="2" rx="8"/>
<text x="600" y="245" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Load Balancer</text>
<text x="600" y="260" font-size="10" fill="white" text-anchor="middle">Public IP: X.X.X.X</text>
<!-- DMZ Zone -->
<rect x="50" y="310" width="500" height="250" fill="#fff3e0" stroke="#ff9800" stroke-width="2" rx="10" stroke-dasharray="5,5" opacity="0.3"/>
<text x="300" y="330" font-size="16" font-weight="bold" fill="#ff9800" text-anchor="middle">DMZ (Public Subnet)</text>
<!-- Private Zone -->
<rect x="650" y="310" width="500" height="250" fill="#e8f5e9" stroke="#4caf50" stroke-width="2" rx="10" stroke-dasharray="5,5" opacity="0.3"/>
<text x="900" y="330" font-size="16" font-weight="bold" fill="#4caf50" text-anchor="middle">Private Subnet</text>
<!-- Web Servers in DMZ -->
<g transform="translate(100, 360)">
<rect width="140" height="100" fill="#2196f3" stroke="#1565c0" stroke-width="2" rx="8"/>
<text x="70" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">운영서버 A</text>
<text x="70" y="45" font-size="11" fill="white" text-anchor="middle">Web Container</text>
<text x="70" y="60" font-size="10" fill="white" text-anchor="middle">10.0.1.10</text>
<rect x="10" y="70" width="120" height="20" fill="#1565c0" rx="3"/>
<text x="70" y="84" font-size="10" fill="white" text-anchor="middle">Nginx + Laravel</text>
</g>
<g transform="translate(270, 360)">
<rect width="140" height="100" fill="#2196f3" stroke="#1565c0" stroke-width="2" rx="8"/>
<text x="70" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">운영서버 B</text>
<text x="70" y="45" font-size="11" fill="white" text-anchor="middle">Web Container</text>
<text x="70" y="60" font-size="10" fill="white" text-anchor="middle">10.0.1.11</text>
<rect x="10" y="70" width="120" height="20" fill="#1565c0" rx="3"/>
<text x="70" y="84" font-size="10" fill="white" text-anchor="middle">Nginx + Laravel</text>
</g>
<!-- Database Servers in Private -->
<g transform="translate(700, 360)">
<rect width="140" height="100" fill="#4caf50" stroke="#2e7d32" stroke-width="2" rx="8"/>
<text x="70" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">DB Master</text>
<text x="70" y="45" font-size="11" fill="white" text-anchor="middle">MySQL Container</text>
<text x="70" y="60" font-size="10" fill="white" text-anchor="middle">10.0.2.20</text>
<rect x="10" y="70" width="120" height="20" fill="#2e7d32" rx="3"/>
<text x="70" y="84" font-size="10" fill="white" text-anchor="middle">Port: 3306</text>
</g>
<g transform="translate(870, 360)">
<rect width="140" height="100" fill="#4caf50" stroke="#2e7d32" stroke-width="2" rx="8"/>
<text x="70" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">DB Slave</text>
<text x="70" y="45" font-size="11" fill="white" text-anchor="middle">MySQL Container</text>
<text x="70" y="60" font-size="10" fill="white" text-anchor="middle">10.0.2.21</text>
<rect x="10" y="70" width="120" height="20" fill="#2e7d32" rx="3"/>
<text x="70" y="84" font-size="10" fill="white" text-anchor="middle">Port: 3306</text>
</g>
<!-- Redis Cache -->
<g transform="translate(950, 490)">
<rect width="120" height="60" fill="#dc382d" stroke="#b71c1c" stroke-width="2" rx="8"/>
<text x="60" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Redis</text>
<text x="60" y="40" font-size="10" fill="white" text-anchor="middle">10.0.2.30</text>
<text x="60" y="52" font-size="10" fill="white" text-anchor="middle">Port: 6379</text>
</g>
<!-- Development Server -->
<g transform="translate(100, 490)">
<rect width="140" height="60" fill="#9c27b0" stroke="#6a1b9a" stroke-width="2" rx="8"/>
<text x="70" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">개발서버 C</text>
<text x="70" y="40" font-size="10" fill="white" text-anchor="middle">10.0.1.50</text>
<text x="70" y="52" font-size="10" fill="white" text-anchor="middle">Staging</text>
</g>
<!-- IDC Colocation -->
<rect x="50" y="600" width="1100" height="250" fill="#e0f2f1" stroke="#00796b" stroke-width="2" rx="10" stroke-dasharray="5,5" opacity="0.3"/>
<text x="600" y="625" font-size="18" font-weight="bold" fill="#00796b" text-anchor="middle">IDC 코로케이션 (VPN 연결)</text>
<!-- IDC Servers -->
<g transform="translate(200, 660)">
<rect width="180" height="120" fill="#607d8b" stroke="#37474f" stroke-width="2" rx="8"/>
<text x="90" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">HP DL360 #1</text>
<text x="90" y="45" font-size="11" fill="white" text-anchor="middle">CI/CD Runner</text>
<text x="90" y="60" font-size="10" fill="white" text-anchor="middle">172.16.1.10</text>
<rect x="10" y="75" width="160" height="20" fill="#37474f" rx="3"/>
<text x="90" y="89" font-size="10" fill="white" text-anchor="middle">Admin Dashboard</text>
<rect x="10" y="95" width="160" height="20" fill="#37474f" rx="3"/>
<text x="90" y="109" font-size="10" fill="white" text-anchor="middle">GitLab Runner</text>
</g>
<g transform="translate(450, 660)">
<rect width="180" height="120" fill="#795548" stroke="#5d4037" stroke-width="2" rx="8"/>
<text x="90" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">HP DL210 #2</text>
<text x="90" y="45" font-size="11" fill="white" text-anchor="middle">Backup Server</text>
<text x="90" y="60" font-size="10" fill="white" text-anchor="middle">172.16.1.11</text>
<rect x="10" y="75" width="160" height="20" fill="#5d4037" rx="3"/>
<text x="90" y="89" font-size="10" fill="white" text-anchor="middle">Central Backup</text>
<rect x="10" y="95" width="160" height="20" fill="#5d4037" rx="3"/>
<text x="90" y="109" font-size="10" fill="white" text-anchor="middle">Monitoring</text>
</g>
<g transform="translate(700, 660)">
<rect width="180" height="120" fill="#ff9800" stroke="#e65100" stroke-width="2" rx="8"/>
<text x="90" y="25" font-size="14" font-weight="bold" fill="white" text-anchor="middle">GitLab Server</text>
<text x="90" y="45" font-size="11" fill="white" text-anchor="middle">Repository</text>
<text x="90" y="60" font-size="10" fill="white" text-anchor="middle">172.16.1.12</text>
<rect x="10" y="75" width="160" height="20" fill="#e65100" rx="3"/>
<text x="90" y="89" font-size="10" fill="white" text-anchor="middle">Source Control</text>
<rect x="10" y="95" width="160" height="20" fill="#e65100" rx="3"/>
<text x="90" y="109" font-size="10" fill="white" text-anchor="middle">CI/CD Pipeline</text>
</g>
<!-- Network Connections -->
<!-- Internet to Firewall -->
<path d="M 600 140 L 600 150" stroke="#1976d2" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<!-- Firewall to LB -->
<path d="M 600 190 L 600 220" stroke="#f44336" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
<!-- LB to Web Servers -->
<path d="M 570 270 L 170 360" stroke="#ff9800" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<path d="M 630 270 L 340 360" stroke="#ff9800" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<!-- Web to DB -->
<path d="M 410 410 L 700 410" stroke="#2196f3" stroke-width="2" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowhead)"/>
<!-- DB Replication -->
<path d="M 840 410 L 870 410" stroke="#4caf50" stroke-width="3" fill="none" marker-end="url(#arrowhead-green)"/>
<text x="855" y="400" font-size="10" fill="#4caf50">Replication</text>
<!-- Web to Redis -->
<path d="M 410 450 L 950 520" stroke="#dc382d" stroke-width="2" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead-red)"/>
<!-- VPN Connection -->
<path d="M 600 560 L 600 600" stroke="#00796b" stroke-width="3" stroke-dasharray="10,5" fill="none" marker-end="url(#arrowhead-green)"/>
<text x="650" y="580" font-size="12" fill="#00796b">VPN Tunnel</text>
<!-- CI/CD to Prod -->
<path d="M 290 660 L 250 560" stroke="#607d8b" stroke-width="2" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead)"/>
<text x="220" y="610" font-size="10" fill="#607d8b">Deploy</text>
<!-- Backup connections -->
<path d="M 540 660 L 770 460" stroke="#795548" stroke-width="2" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead)"/>
<text x="650" y="560" font-size="10" fill="#795548">Backup</text>
<!-- Arrow markers -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#333">
<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-red" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" fill="#dc382d">
<polygon points="0 0, 10 3, 0 6"/>
</marker>
</defs>
</svg>
</div>
<div class="info-grid">
<div class="info-card">
<h3>📡 네트워크 대역 설정</h3>
<table>
<tr>
<td>Public Subnet</td>
<td>10.0.1.0/24</td>
</tr>
<tr>
<td>Private Subnet</td>
<td>10.0.2.0/24</td>
</tr>
<tr>
<td>IDC Network</td>
<td>172.16.1.0/24</td>
</tr>
<tr>
<td>VPN Gateway</td>
<td>10.0.0.1</td>
</tr>
<tr>
<td>DNS Server</td>
<td>8.8.8.8, 8.8.4.4</td>
</tr>
</table>
</div>
<div class="info-card">
<h3>🔐 보안 그룹 설정</h3>
<table>
<tr>
<td>Web SG</td>
<td>80, 443 (Public)</td>
</tr>
<tr>
<td>DB SG</td>
<td>3306 (Private Only)</td>
</tr>
<tr>
<td>Redis SG</td>
<td>6379 (Private Only)</td>
</tr>
<tr>
<td>SSH SG</td>
<td>22 (VPN Only)</td>
</tr>
<tr>
<td>Admin SG</td>
<td>8080 (VPN Only)</td>
</tr>
</table>
</div>
<div class="info-card">
<h3>🌐 트래픽 라우팅</h3>
<table>
<tr>
<td>인바운드</td>
<td>Internet → FW → LB</td>
</tr>
<tr>
<td>웹 트래픽</td>
<td>LB → Web (RR)</td>
</tr>
<tr>
<td>DB 쿼리</td>
<td>Web → DB (Private)</td>
</tr>
<tr>
<td>캐시</td>
<td>Web → Redis</td>
</tr>
<tr>
<td>관리</td>
<td>VPN → Admin</td>
</tr>
</table>
</div>
</div>
<table class="port-table">
<thead>
<tr>
<th>서비스</th>
<th>프로토콜</th>
<th>포트</th>
<th>소스</th>
<th>대상</th>
<th>접근 레벨</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTTP</td>
<td>TCP</td>
<td>80</td>
<td>0.0.0.0/0</td>
<td>Load Balancer</td>
<td><span class="badge badge-public">Public</span></td>
</tr>
<tr>
<td>HTTPS</td>
<td>TCP</td>
<td>443</td>
<td>0.0.0.0/0</td>
<td>Load Balancer</td>
<td><span class="badge badge-public">Public</span></td>
</tr>
<tr>
<td>SSH</td>
<td>TCP</td>
<td>22</td>
<td>172.16.1.10</td>
<td>All Servers</td>
<td><span class="badge badge-private">Private</span></td>
</tr>
<tr>
<td>MySQL</td>
<td>TCP</td>
<td>3306</td>
<td>10.0.1.0/24</td>
<td>DB Servers</td>
<td><span class="badge badge-internal">Internal</span></td>
</tr>
<tr>
<td>Redis</td>
<td>TCP</td>
<td>6379</td>
<td>10.0.1.0/24</td>
<td>Redis Server</td>
<td><span class="badge badge-internal">Internal</span></td>
</tr>
<tr>
<td>Admin Panel</td>
<td>TCP</td>
<td>8080</td>
<td>VPN Users</td>
<td>HP DL360</td>
<td><span class="badge badge-private">Private</span></td>
</tr>
<tr>
<td>GitLab</td>
<td>TCP</td>
<td>8090</td>
<td>VPN Users</td>
<td>GitLab Server</td>
<td><span class="badge badge-private">Private</span></td>
</tr>
<tr>
<td>Monitoring</td>
<td>TCP</td>
<td>3000</td>
<td>VPN Users</td>
<td>HP DL210</td>
<td><span class="badge badge-private">Private</span></td>
</tr>
</tbody>
</table>
<div class="security-section">
<h2 class="security-title">🛡️ 보안 정책 및 네트워크 격리</h2>
<div class="security-grid">
<div class="security-item">
<h4>🔥 Firewall Rules</h4>
<ul style="margin-left: 20px; color: #666;">
<li>DDoS Protection 활성화</li>
<li>Rate Limiting 설정</li>
<li>GeoIP Blocking 적용</li>
<li>WAF 규칙 적용</li>
</ul>
</div>
<div class="security-item">
<h4>🔒 Access Control</h4>
<ul style="margin-left: 20px; color: #666;">
<li>SSH Key 기반 인증</li>
<li>MFA 적용 (Admin)</li>
<li>IP Whitelist 관리</li>
<li>최소 권한 원칙</li>
</ul>
</div>
<div class="security-item">
<h4>📊 Monitoring</h4>
<ul style="margin-left: 20px; color: #666;">
<li>IDS/IPS 구축</li>
<li>로그 중앙화</li>
<li>실시간 알람</li>
<li>트래픽 분석</li>
</ul>
</div>
<div class="security-item">
<h4>🔄 Network Isolation</h4>
<ul style="margin-left: 20px; color: #666;">
<li>VLAN 분리</li>
<li>Subnet 격리</li>
<li>Zero Trust 모델</li>
<li>마이크로 세그먼테이션</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink