feat: 개발 문서 포털 페이지 생성
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
This commit is contained in:
417
public/develop/cicd-pipeline-flow.html
Normal file
417
public/develop/cicd-pipeline-flow.html
Normal file
@@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CI/CD 파이프라인 흐름도</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;
|
||||
}
|
||||
.pipeline-container {
|
||||
background: #f8f9fa;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.pipeline-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
.stage-number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.stage-content {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.stage-content:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
.stage-title {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.stage-description {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.stage-tasks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.task-badge {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9em;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.arrow-down {
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
color: #667eea;
|
||||
font-size: 2em;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(10px); }
|
||||
}
|
||||
.branch-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
.branch-card {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||||
border-top: 5px solid;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.branch-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
.branch-develop {
|
||||
border-top-color: #4caf50;
|
||||
}
|
||||
.branch-main {
|
||||
border-top-color: #f44336;
|
||||
}
|
||||
.branch-feature {
|
||||
border-top-color: #ff9800;
|
||||
}
|
||||
.branch-title {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.branch-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tools-section {
|
||||
margin-top: 40px;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
}
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tool-item {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.tool-item:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.tool-icon {
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.metrics-section {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.metric-card {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.metric-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.metric-label {
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🚀 CI/CD 파이프라인 흐름도</h1>
|
||||
|
||||
<div class="pipeline-container">
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">1</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">🔧 Code Commit</div>
|
||||
<div class="stage-description">개발자가 코드를 GitLab Repository에 Push</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">Git Push</span>
|
||||
<span class="task-badge">Branch 전략</span>
|
||||
<span class="task-badge">Merge Request</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">2</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">🏗️ Build Stage</div>
|
||||
<div class="stage-description">Docker 이미지 빌드 및 의존성 설치</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">Composer Install</span>
|
||||
<span class="task-badge">NPM Build</span>
|
||||
<span class="task-badge">Docker Build</span>
|
||||
<span class="task-badge">Asset Compile</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">3</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">🧪 Test Stage</div>
|
||||
<div class="stage-description">자동화된 테스트 실행</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">Unit Test</span>
|
||||
<span class="task-badge">Integration Test</span>
|
||||
<span class="task-badge">Code Quality</span>
|
||||
<span class="task-badge">Security Scan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">4</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">📦 Package & Registry</div>
|
||||
<div class="stage-description">빌드된 이미지를 Container Registry에 Push</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">Image Tag</span>
|
||||
<span class="task-badge">Registry Push</span>
|
||||
<span class="task-badge">Version Tag</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">5</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">🚀 Deploy Stage</div>
|
||||
<div class="stage-description">대상 서버에 자동 배포</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">SSH Connect</span>
|
||||
<span class="task-badge">Docker Pull</span>
|
||||
<span class="task-badge">Container Update</span>
|
||||
<span class="task-badge">Health Check</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">↓</div>
|
||||
|
||||
<div class="pipeline-stage">
|
||||
<div class="stage-number">6</div>
|
||||
<div class="stage-content">
|
||||
<div class="stage-title">✅ Post-Deploy</div>
|
||||
<div class="stage-description">배포 후 검증 및 알림</div>
|
||||
<div class="stage-tasks">
|
||||
<span class="task-badge">Smoke Test</span>
|
||||
<span class="task-badge">Monitoring</span>
|
||||
<span class="task-badge">Notification</span>
|
||||
<span class="task-badge">Rollback Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="branch-section">
|
||||
<div class="branch-card branch-develop">
|
||||
<div class="branch-title">
|
||||
<div class="branch-icon" style="background: #4caf50;">D</div>
|
||||
Develop Branch
|
||||
</div>
|
||||
<ul>
|
||||
<li>개발 환경 자동 배포</li>
|
||||
<li>모든 Push에 대해 파이프라인 실행</li>
|
||||
<li>Staging 서버 (Play) 배포</li>
|
||||
<li>개발팀 테스트 환경</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="branch-card branch-main">
|
||||
<div class="branch-title">
|
||||
<div class="branch-icon" style="background: #f44336;">M</div>
|
||||
Main/Master Branch
|
||||
</div>
|
||||
<ul>
|
||||
<li>운영 환경 배포</li>
|
||||
<li>수동 승인 후 배포</li>
|
||||
<li>Blue-Green 배포 전략</li>
|
||||
<li>Production 서버 (A/B) 배포</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="branch-card branch-feature">
|
||||
<div class="branch-title">
|
||||
<div class="branch-icon" style="background: #ff9800;">F</div>
|
||||
Feature Branches
|
||||
</div>
|
||||
<ul>
|
||||
<li>기능 개발용 브랜치</li>
|
||||
<li>Build & Test만 실행</li>
|
||||
<li>Merge Request 시 검증</li>
|
||||
<li>배포 단계는 건너뜀</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tools-section">
|
||||
<h2 style="text-align: center; margin-bottom: 20px;">🛠️ 사용 도구 및 기술</h2>
|
||||
<div class="tools-grid">
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🦊</div>
|
||||
<div>GitLab</div>
|
||||
<small>소스 관리 & CI/CD</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🐳</div>
|
||||
<div>Docker</div>
|
||||
<small>컨테이너화</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🐘</div>
|
||||
<div>PHP/Laravel</div>
|
||||
<small>백엔드 프레임워크</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">⚛️</div>
|
||||
<div>React</div>
|
||||
<small>프론트엔드</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🗄️</div>
|
||||
<div>MySQL</div>
|
||||
<small>데이터베이스</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">⚡</div>
|
||||
<div>Redis</div>
|
||||
<small>캐시 서버</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🌐</div>
|
||||
<div>Nginx</div>
|
||||
<small>웹 서버</small>
|
||||
</div>
|
||||
<div class="tool-item">
|
||||
<div class="tool-icon">🔐</div>
|
||||
<div>SSH</div>
|
||||
<small>보안 접속</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-section">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">~5분</div>
|
||||
<div class="metric-label">평균 빌드 시간</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">~2분</div>
|
||||
<div class="metric-label">평균 배포 시간</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">95%+</div>
|
||||
<div class="metric-label">배포 성공률</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">< 30초</div>
|
||||
<div class="metric-label">롤백 시간</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
370
public/develop/disaster-recovery-plan.md
Normal file
370
public/develop/disaster-recovery-plan.md
Normal file
@@ -0,0 +1,370 @@
|
||||
# 🔥 재해복구(DR) 계획서
|
||||
|
||||
## 1. 개요 및 목적
|
||||
|
||||
### 1.1 문서 목적
|
||||
- 시스템 장애 발생 시 신속한 복구를 위한 체계적인 절차 수립
|
||||
- 데이터 손실 최소화 및 서비스 연속성 보장
|
||||
- 비상 상황 대응 프로세스 표준화
|
||||
|
||||
### 1.2 적용 범위
|
||||
- **대상 시스템**: 운영 서버 A/B, DB Master/Slave, 개발 서버
|
||||
- **대상 서비스**: 웹 애플리케이션, API, 데이터베이스
|
||||
- **관련 팀**: 개발팀, 인프라팀, 운영팀
|
||||
|
||||
---
|
||||
|
||||
## 2. 복구 목표 설정
|
||||
|
||||
### 2.1 RTO/RPO 목표
|
||||
|
||||
| 구분 | 목표 시간 | 설명 |
|
||||
|------|-----------|------|
|
||||
| **RTO** (Recovery Time Objective) | 4시간 | 장애 발생 후 서비스 정상화까지 목표 시간 |
|
||||
| **RPO** (Recovery Point Objective) | 1시간 | 허용 가능한 최대 데이터 손실 시간 |
|
||||
|
||||
### 2.2 서비스별 우선순위
|
||||
|
||||
| 우선순위 | 서비스 | RTO | RPO | 비고 |
|
||||
|---------|--------|-----|-----|------|
|
||||
| **P0 (Critical)** | 결제 시스템 | 1시간 | 0분 | 실시간 백업 |
|
||||
| **P1 (High)** | 사용자 인증 | 2시간 | 30분 | 핵심 기능 |
|
||||
| **P2 (Medium)** | API 서비스 | 4시간 | 1시간 | 일반 서비스 |
|
||||
| **P3 (Low)** | 통계/리포트 | 8시간 | 4시간 | 비핵심 기능 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 재해 시나리오 및 대응 전략
|
||||
|
||||
### 3.1 시나리오별 대응 방안
|
||||
|
||||
#### 🔴 시나리오 1: 단일 서버 장애
|
||||
**상황**: 운영 서버 A 또는 B 중 1대 장애
|
||||
```
|
||||
대응 절차:
|
||||
1. 로드밸런서에서 장애 서버 제외 (자동)
|
||||
2. 정상 서버로 모든 트래픽 라우팅
|
||||
3. 장애 서버 재시작 시도
|
||||
4. 복구 실패 시 새 인스턴스 생성
|
||||
5. 서비스 정상화 확인
|
||||
```
|
||||
**예상 복구 시간**: 5분 (자동) ~ 30분 (수동)
|
||||
|
||||
#### 🔴 시나리오 2: 데이터베이스 장애
|
||||
**상황**: DB Master 장애 발생
|
||||
```
|
||||
대응 절차:
|
||||
1. DB 모니터링 알람 감지
|
||||
2. Slave DB를 Master로 승격
|
||||
3. 애플리케이션 DB 연결 정보 변경
|
||||
4. 기존 Master 복구 또는 재구축
|
||||
5. 새로운 Slave 구성
|
||||
```
|
||||
**예상 복구 시간**: 30분 ~ 1시간
|
||||
|
||||
#### 🔴 시나리오 3: 네트워크 장애
|
||||
**상황**: 클라우드 리전 전체 네트워크 장애
|
||||
```
|
||||
대응 절차:
|
||||
1. DR 사이트 활성화 (IDC 백업 서버)
|
||||
2. DNS 전환 (TTL 5분)
|
||||
3. 백업 데이터로 서비스 구동
|
||||
4. 임시 운영 모드 전환
|
||||
5. 주 사이트 복구 시 데이터 동기화
|
||||
```
|
||||
**예상 복구 시간**: 1시간 ~ 2시간
|
||||
|
||||
#### 🔴 시나리오 4: 랜섬웨어/보안 침해
|
||||
**상황**: 악성코드 감염 또는 보안 침해
|
||||
```
|
||||
대응 절차:
|
||||
1. 감염 시스템 즉시 격리
|
||||
2. 네트워크 차단
|
||||
3. 클린 백업에서 복구
|
||||
4. 보안 패치 적용
|
||||
5. 침해 분석 및 보고서 작성
|
||||
```
|
||||
**예상 복구 시간**: 4시간 ~ 8시간
|
||||
|
||||
### 3.2 데이터 백업 전략
|
||||
|
||||
#### 백업 정책
|
||||
| 백업 유형 | 주기 | 보관 기간 | 저장 위치 | 자동화 |
|
||||
|-----------|------|-----------|-----------|---------|
|
||||
| **전체 백업** | 주 1회 (일요일) | 3개월 | IDC 백업서버 | ✅ |
|
||||
| **증분 백업** | 일 1회 (새벽 2시) | 1개월 | 클라우드 스토리지 | ✅ |
|
||||
| **실시간 복제** | 지속 | - | DB Slave | ✅ |
|
||||
| **스냅샷** | 4시간마다 | 7일 | 클라우드 스냅샷 | ✅ |
|
||||
|
||||
#### 백업 스크립트 예시
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# Daily Backup Script
|
||||
DATE=$(date +%Y%m%d)
|
||||
BACKUP_DIR="/backup/daily/${DATE}"
|
||||
|
||||
# Database Backup
|
||||
mysqldump -h 10.0.2.20 -u backup -p$DB_PASS \
|
||||
--all-databases --single-transaction \
|
||||
> ${BACKUP_DIR}/db_backup.sql
|
||||
|
||||
# Application Files Backup
|
||||
tar -czf ${BACKUP_DIR}/app_backup.tar.gz \
|
||||
/var/www/html
|
||||
|
||||
# Upload to Remote Storage
|
||||
rsync -avz ${BACKUP_DIR}/ \
|
||||
backup@172.16.1.11:/central-backup/
|
||||
|
||||
# Verify Backup
|
||||
if [ $? -eq 0 ]; then
|
||||
echo "Backup successful: ${DATE}"
|
||||
# Send success notification
|
||||
else
|
||||
echo "Backup failed: ${DATE}"
|
||||
# Send alert
|
||||
fi
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 복구 절차서
|
||||
|
||||
### 4.1 웹 서버 복구
|
||||
|
||||
```markdown
|
||||
## 웹 서버 복구 체크리스트
|
||||
- [ ] 1. 장애 서버 상태 확인
|
||||
- [ ] 2. 로드밸런서에서 제외 확인
|
||||
- [ ] 3. 새 인스턴스 생성 (필요시)
|
||||
- [ ] 4. Docker 환경 구성
|
||||
- [ ] 5. 최신 이미지 Pull
|
||||
- [ ] 6. 환경 변수 설정 (.env)
|
||||
- [ ] 7. 컨테이너 실행
|
||||
- [ ] 8. Health Check 확인
|
||||
- [ ] 9. 로드밸런서 재등록
|
||||
- [ ] 10. 모니터링 확인
|
||||
```
|
||||
|
||||
### 4.2 데이터베이스 복구
|
||||
|
||||
```markdown
|
||||
## DB 복구 체크리스트
|
||||
- [ ] 1. 백업 파일 확인 (최신 시점)
|
||||
- [ ] 2. 새 DB 인스턴스 준비
|
||||
- [ ] 3. 백업 데이터 복원
|
||||
```sql
|
||||
mysql -u root -p < backup.sql
|
||||
```
|
||||
- [ ] 4. 데이터 정합성 검증
|
||||
- [ ] 5. Replication 재설정
|
||||
- [ ] 6. 애플리케이션 연결 테스트
|
||||
- [ ] 7. 성능 테스트
|
||||
- [ ] 8. 모니터링 설정
|
||||
```
|
||||
|
||||
### 4.3 전체 시스템 복구 (Full DR)
|
||||
|
||||
```markdown
|
||||
## 전체 시스템 복구 순서
|
||||
1. **네트워크 인프라** (10분)
|
||||
- [ ] VPC/Subnet 구성
|
||||
- [ ] Security Group 설정
|
||||
- [ ] Load Balancer 생성
|
||||
|
||||
2. **컴퓨팅 리소스** (20분)
|
||||
- [ ] EC2 인스턴스 생성
|
||||
- [ ] Docker 설치
|
||||
- [ ] 기본 패키지 설치
|
||||
|
||||
3. **데이터 복원** (30분)
|
||||
- [ ] 최신 백업 확인
|
||||
- [ ] DB 복원
|
||||
- [ ] 파일 시스템 복원
|
||||
|
||||
4. **애플리케이션 배포** (20분)
|
||||
- [ ] 컨테이너 이미지 Pull
|
||||
- [ ] 환경 설정
|
||||
- [ ] 서비스 시작
|
||||
|
||||
5. **검증 및 전환** (20분)
|
||||
- [ ] 서비스 테스트
|
||||
- [ ] DNS 전환
|
||||
- [ ] 모니터링 확인
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 비상 연락망
|
||||
|
||||
### 5.1 에스컬레이션 매트릭스
|
||||
|
||||
| 레벨 | 담당자 | 역할 | 연락처 | 대응 시간 |
|
||||
|------|--------|------|---------|-----------|
|
||||
| L1 | 운영팀 | 1차 대응 | 010-xxxx-xxxx | 24/7 |
|
||||
| L2 | 인프라팀장 | 인프라 복구 | 010-xxxx-xxxx | 15분 이내 |
|
||||
| L3 | 개발팀장 | 애플리케이션 복구 | 010-xxxx-xxxx | 30분 이내 |
|
||||
| L4 | CTO | 최종 의사결정 | 010-xxxx-xxxx | 1시간 이내 |
|
||||
|
||||
### 5.2 외부 지원 연락처
|
||||
|
||||
| 구분 | 업체명 | 담당자 | 연락처 | 계약 SLA |
|
||||
|------|--------|--------|---------|----------|
|
||||
| 클라우드 | 호스팅사 | 기술지원 | 1544-xxxx | 4시간 |
|
||||
| IDC | 코로케이션 | 24시간 NOC | 02-xxxx-xxxx | 2시간 |
|
||||
| 보안 | 보안업체 | CERT팀 | 02-xxxx-xxxx | 1시간 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 복구 테스트 계획
|
||||
|
||||
### 6.1 정기 DR 훈련
|
||||
|
||||
| 훈련 유형 | 주기 | 범위 | 소요 시간 |
|
||||
|-----------|------|------|-----------|
|
||||
| **Table Top** | 분기 1회 | 시나리오 검토 | 2시간 |
|
||||
| **부분 복구** | 반기 1회 | 단일 시스템 | 4시간 |
|
||||
| **전체 복구** | 연 1회 | 전체 시스템 | 8시간 |
|
||||
|
||||
### 6.2 테스트 시나리오
|
||||
|
||||
```markdown
|
||||
## DR 테스트 시나리오 예시
|
||||
1. **준비 단계** (30분)
|
||||
- 테스트 환경 격리
|
||||
- 백업 확인
|
||||
- 팀 준비 상태 확인
|
||||
|
||||
2. **장애 시뮬레이션** (10분)
|
||||
- Production 서버 A 강제 종료
|
||||
- DB Master 연결 차단
|
||||
|
||||
3. **복구 실행** (60분)
|
||||
- 절차서에 따른 복구
|
||||
- 시간 측정
|
||||
- 이슈 기록
|
||||
|
||||
4. **검증** (30분)
|
||||
- 서비스 정상 동작 확인
|
||||
- 데이터 정합성 검증
|
||||
- 성능 테스트
|
||||
|
||||
5. **원복** (30분)
|
||||
- 원래 상태로 복구
|
||||
- 테스트 데이터 정리
|
||||
|
||||
6. **리뷰** (60분)
|
||||
- 결과 분석
|
||||
- 개선점 도출
|
||||
- 문서 업데이트
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 복구 후 조치사항
|
||||
|
||||
### 7.1 Post-Incident 체크리스트
|
||||
|
||||
- [ ] **즉시 조치** (1시간 이내)
|
||||
- [ ] 서비스 정상화 공지
|
||||
- [ ] 임시 조치사항 문서화
|
||||
- [ ] 긴급 패치 적용
|
||||
|
||||
- [ ] **단기 조치** (24시간 이내)
|
||||
- [ ] 장애 보고서 작성
|
||||
- [ ] 근본 원인 분석 (RCA)
|
||||
- [ ] 임시 조치 → 영구 조치 전환
|
||||
|
||||
- [ ] **장기 조치** (1주일 이내)
|
||||
- [ ] 재발 방지 대책 수립
|
||||
- [ ] 프로세스 개선
|
||||
- [ ] 교육/훈련 계획
|
||||
|
||||
### 7.2 장애 보고서 템플릿
|
||||
|
||||
```markdown
|
||||
# 장애 보고서
|
||||
|
||||
## 1. 장애 개요
|
||||
- **발생 일시**: 2025-XX-XX HH:MM
|
||||
- **복구 일시**: 2025-XX-XX HH:MM
|
||||
- **영향 범위**:
|
||||
- **심각도**: P0 / P1 / P2 / P3
|
||||
|
||||
## 2. 타임라인
|
||||
| 시간 | 내용 |
|
||||
|------|------|
|
||||
| HH:MM | 장애 감지 |
|
||||
| HH:MM | 1차 대응 시작 |
|
||||
| HH:MM | 원인 파악 |
|
||||
| HH:MM | 복구 작업 시작 |
|
||||
| HH:MM | 서비스 정상화 |
|
||||
|
||||
## 3. 근본 원인
|
||||
-
|
||||
|
||||
## 4. 대응 내역
|
||||
-
|
||||
|
||||
## 5. 개선 사항
|
||||
- [ ] Action Item 1
|
||||
- [ ] Action Item 2
|
||||
- [ ] Action Item 3
|
||||
|
||||
## 6. 교훈 (Lessons Learned)
|
||||
-
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 부록
|
||||
|
||||
### 8.1 주요 명령어 모음
|
||||
|
||||
```bash
|
||||
# 서버 상태 확인
|
||||
docker ps -a
|
||||
systemctl status nginx
|
||||
netstat -tlnp
|
||||
|
||||
# DB 상태 확인
|
||||
mysql -e "SHOW SLAVE STATUS\G"
|
||||
mysql -e "SHOW PROCESSLIST"
|
||||
|
||||
# 백업/복원
|
||||
tar -xzf backup.tar.gz -C /restore/
|
||||
mysql < backup.sql
|
||||
|
||||
# 네트워크 진단
|
||||
ping -c 4 10.0.1.10
|
||||
traceroute 10.0.1.10
|
||||
nslookup domain.com
|
||||
|
||||
# 로그 확인
|
||||
tail -f /var/log/nginx/error.log
|
||||
docker logs container_name
|
||||
journalctl -u docker -f
|
||||
```
|
||||
|
||||
### 8.2 유용한 도구
|
||||
|
||||
| 도구 | 용도 | URL/명령어 |
|
||||
|------|------|------------|
|
||||
| htop | 시스템 모니터링 | `htop` |
|
||||
| netdata | 실시간 모니터링 | http://server:19999 |
|
||||
| mysqltuner | DB 성능 분석 | `perl mysqltuner.pl` |
|
||||
| docker stats | 컨테이너 모니터링 | `docker stats` |
|
||||
|
||||
### 8.3 참고 문서
|
||||
|
||||
- AWS Disaster Recovery Whitepaper
|
||||
- MySQL Replication Best Practices
|
||||
- Docker Swarm DR Guide
|
||||
- Laravel Backup Package Documentation
|
||||
|
||||
---
|
||||
|
||||
**문서 버전**: v1.0
|
||||
**최종 수정일**: 2025-01-XX
|
||||
**다음 검토일**: 2025-04-XX
|
||||
**담당자**: 인프라팀
|
||||
343
public/develop/index.php
Normal file
343
public/develop/index.php
Normal file
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SAM 개발 문서 - Development Documentation</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.docs-list {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.doc-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.doc-item:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.doc-file {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
max-width: 1400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-body iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.doc-item {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>📚 SAM 개발 문서</h1>
|
||||
<p>Development Documentation Portal</p>
|
||||
</div>
|
||||
|
||||
<div class="docs-list">
|
||||
<div class="doc-item" onclick="openDoc('system-architecture-diagram.html', '시스템 아키텍처 다이어그램')">
|
||||
<div class="doc-icon">🏗️</div>
|
||||
<div class="doc-content">
|
||||
<div class="doc-title">시스템 아키텍처 다이어그램</div>
|
||||
<div class="doc-file">system-architecture-diagram.html</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-item" onclick="openDoc('server-spec-cost-analysis.html', '서버 사양 및 비용 분석표')">
|
||||
<div class="doc-icon">💰</div>
|
||||
<div class="doc-content">
|
||||
<div class="doc-title">서버 사양 및 비용 분석표</div>
|
||||
<div class="doc-file">server-spec-cost-analysis.html</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-item" onclick="openDoc('cicd-pipeline-flow.html', 'CI/CD 파이프라인 흐름도')">
|
||||
<div class="doc-icon">🔄</div>
|
||||
<div class="doc-content">
|
||||
<div class="doc-title">CI/CD 파이프라인 흐름도</div>
|
||||
<div class="doc-file">cicd-pipeline-flow.html</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-item" onclick="openMarkdown('disaster-recovery-plan.md', '재해복구(DR) 계획서')">
|
||||
<div class="doc-icon">🛡️</div>
|
||||
<div class="doc-content">
|
||||
<div class="doc-title">재해복구(DR) 계획서</div>
|
||||
<div class="doc-file">disaster-recovery-plan.md</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-item" onclick="openDoc('network-topology-diagram.html', '네트워크 토폴로지 다이어그램')">
|
||||
<div class="doc-icon">🌐</div>
|
||||
<div class="doc-content">
|
||||
<div class="doc-title">네트워크 토폴로지 다이어그램</div>
|
||||
<div class="doc-file">network-topology-diagram.html</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
© 2025 SAM Project - Smart Automation Management
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal" id="docModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title" id="modalTitle">문서 제목</div>
|
||||
<button class="close-btn" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modalBody">
|
||||
<!-- Content will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openDoc(filename, title) {
|
||||
const modal = document.getElementById('docModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalBody = document.getElementById('modalBody');
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalBody.innerHTML = `<iframe src="${filename}"></iframe>`;
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
function openMarkdown(filename, title) {
|
||||
const modal = document.getElementById('docModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalBody = document.getElementById('modalBody');
|
||||
|
||||
modalTitle.textContent = title;
|
||||
|
||||
// Fetch markdown and convert to HTML
|
||||
fetch(filename)
|
||||
.then(response => response.text())
|
||||
.then(text => {
|
||||
// Simple markdown to HTML conversion
|
||||
let html = text
|
||||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||||
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
|
||||
.replace(/\*(.*)\*/gim, '<em>$1</em>')
|
||||
.replace(/!\[(.*?)\]\((.*?)\)/gim, '<img alt="$1" src="$2" />')
|
||||
.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>')
|
||||
.replace(/\n$/gim, '<br />');
|
||||
|
||||
modalBody.innerHTML = `
|
||||
<div style="padding: 40px; max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.8; color: #333;">
|
||||
${html}
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.catch(error => {
|
||||
modalBody.innerHTML = `
|
||||
<div style="padding: 40px; text-align: center; color: #dc3545;">
|
||||
<h3>⚠️ 문서를 불러올 수 없습니다</h3>
|
||||
<p>${error.message}</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
const modal = document.getElementById('docModal');
|
||||
modal.classList.remove('active');
|
||||
document.getElementById('modalBody').innerHTML = '';
|
||||
}
|
||||
|
||||
// ESC 키로 모달 닫기
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 모달 배경 클릭시 닫기
|
||||
document.getElementById('docModal').addEventListener('click', function(event) {
|
||||
if (event.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
662
public/develop/meeting-presentation-summary.html
Normal file
662
public/develop/meeting-presentation-summary.html
Normal file
@@ -0,0 +1,662 @@
|
||||
<!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;
|
||||
}
|
||||
.presentation-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.slide {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
page-break-after: always;
|
||||
}
|
||||
.slide-header {
|
||||
border-bottom: 3px solid #667eea;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.slide-number {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.slide-title {
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.key-point {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
margin: 20px 0;
|
||||
font-size: 1.2em;
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
}
|
||||
.highlight-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.highlight-card {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
border-left: 5px solid #667eea;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.highlight-card:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
.metric-box {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.metric-label {
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.phase-timeline {
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.phase-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
.phase-number {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phase-content {
|
||||
margin-left: 30px;
|
||||
flex: 1;
|
||||
}
|
||||
.phase-title {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.phase-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 70px;
|
||||
bottom: 50px;
|
||||
width: 2px;
|
||||
background: #667eea;
|
||||
}
|
||||
.cost-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.cost-column {
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.cost-current {
|
||||
background: #fff3e0;
|
||||
border: 2px solid #ff9800;
|
||||
}
|
||||
.cost-future {
|
||||
background: #e8f5e9;
|
||||
border: 2px solid #4caf50;
|
||||
}
|
||||
.benefit-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.benefit-list li {
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
background: #f0f0f0;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.benefit-list li:before {
|
||||
content: '✅';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.risk-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.risk-table th {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.risk-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.risk-high {
|
||||
background: #ffebee;
|
||||
}
|
||||
.risk-medium {
|
||||
background: #fff3e0;
|
||||
}
|
||||
.risk-low {
|
||||
background: #e8f5e9;
|
||||
}
|
||||
.next-steps {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.step-number {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
margin-right: 15px;
|
||||
}
|
||||
@media print {
|
||||
.slide {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="presentation-container">
|
||||
|
||||
<!-- Slide 1: Title -->
|
||||
<div class="slide">
|
||||
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<h1 style="font-size: 3em; color: #333; text-align: center; margin-bottom: 30px;">
|
||||
🚀 클라우드 하이브리드<br>인프라 구축 제안
|
||||
</h1>
|
||||
<p style="font-size: 1.5em; color: #666; text-align: center;">
|
||||
안정적이고 확장 가능한 시스템 아키텍처
|
||||
</p>
|
||||
<div style="margin-top: 50px; padding: 20px; background: #f8f9fa; border-radius: 15px;">
|
||||
<p style="color: #666; text-align: center;">
|
||||
<strong>제안일:</strong> 2025년 1월<br>
|
||||
<strong>대상:</strong> 서비스 초기 운영 ~ 성장 단계<br>
|
||||
<strong>목표:</strong> 비용 효율적인 고가용성 시스템 구축
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: 현재 상황 및 목표 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">1</span>
|
||||
<h2 class="slide-title">현재 상황 및 목표</h2>
|
||||
</div>
|
||||
|
||||
<div class="highlight-grid">
|
||||
<div class="highlight-card">
|
||||
<h3 style="color: #667eea; margin-bottom: 15px;">📍 현재 상황</h3>
|
||||
<ul style="color: #666; margin-left: 20px;">
|
||||
<li>개발 서버 1대 보유</li>
|
||||
<li>사무실 내 유휴 서버 2대</li>
|
||||
<li>GitLab 기반 개발 환경</li>
|
||||
<li>초기 서비스 준비 단계</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<h3 style="color: #667eea; margin-bottom: 15px;">🎯 구축 목표</h3>
|
||||
<ul style="color: #666; margin-left: 20px;">
|
||||
<li>24/7 고가용성 확보</li>
|
||||
<li>자동화된 CI/CD 파이프라인</li>
|
||||
<li>비용 효율적 구성</li>
|
||||
<li>단계적 확장 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-point">
|
||||
💡 핵심 전략: 클라우드와 온프레미스를 결합한 하이브리드 구조로 비용 절감과 안정성 동시 확보
|
||||
</div>
|
||||
|
||||
<div class="highlight-grid" style="margin-top: 30px;">
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">5대</div>
|
||||
<div class="metric-label">총 서버 구성</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">99.9%</div>
|
||||
<div class="metric-label">목표 가용성</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">60만원</div>
|
||||
<div class="metric-label">월 예상 비용</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">10주</div>
|
||||
<div class="metric-label">구축 기간</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: 시스템 구성안 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">2</span>
|
||||
<h2 class="slide-title">제안 시스템 구성</h2>
|
||||
</div>
|
||||
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
|
||||
<thead>
|
||||
<tr style="background: #667eea; color: white;">
|
||||
<th style="padding: 15px;">구분</th>
|
||||
<th style="padding: 15px;">서버</th>
|
||||
<th style="padding: 15px;">사양</th>
|
||||
<th style="padding: 15px;">역할</th>
|
||||
<th style="padding: 15px;">위치</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="background: #e3f2fd;">
|
||||
<td style="padding: 12px;" rowspan="3"><strong>클라우드</strong></td>
|
||||
<td style="padding: 12px;">운영 A</td>
|
||||
<td style="padding: 12px;">4vCore/8GB</td>
|
||||
<td style="padding: 12px;">Service + DB Master</td>
|
||||
<td style="padding: 12px;">Cloud</td>
|
||||
</tr>
|
||||
<tr style="background: #e3f2fd;">
|
||||
<td style="padding: 12px;">운영 B</td>
|
||||
<td style="padding: 12px;">4vCore/8GB</td>
|
||||
<td style="padding: 12px;">Service + DB Slave</td>
|
||||
<td style="padding: 12px;">Cloud</td>
|
||||
</tr>
|
||||
<tr style="background: #e3f2fd;">
|
||||
<td style="padding: 12px;">개발 C</td>
|
||||
<td style="padding: 12px;">2vCore/4GB</td>
|
||||
<td style="padding: 12px;">Staging</td>
|
||||
<td style="padding: 12px;">Cloud</td>
|
||||
</tr>
|
||||
<tr style="background: #fff3e0;">
|
||||
<td style="padding: 12px;" rowspan="2"><strong>코로케이션</strong></td>
|
||||
<td style="padding: 12px;">HP DL360</td>
|
||||
<td style="padding: 12px;">기존 장비</td>
|
||||
<td style="padding: 12px;">CI/CD, Admin</td>
|
||||
<td style="padding: 12px;">IDC</td>
|
||||
</tr>
|
||||
<tr style="background: #fff3e0;">
|
||||
<td style="padding: 12px;">HP DL210</td>
|
||||
<td style="padding: 12px;">기존 장비</td>
|
||||
<td style="padding: 12px;">Backup, Monitoring</td>
|
||||
<td style="padding: 12px;">IDC</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="key-point">
|
||||
🔄 핵심 기능: 로드밸런싱, DB Master-Slave 복제, 자동 백업, 24/7 모니터링
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: 구축 로드맵 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">3</span>
|
||||
<h2 class="slide-title">단계별 구축 로드맵</h2>
|
||||
</div>
|
||||
|
||||
<div class="phase-timeline">
|
||||
<div class="phase-item">
|
||||
<div class="phase-number">1</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">Phase 1: 기초 인프라 (1-2주)</div>
|
||||
<div style="color: #666;">개발 서버 구축, Docker 환경, 기본 CI/CD 구성</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phase-item">
|
||||
<div class="phase-number">2</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">Phase 2: 운영 환경 (3-4주)</div>
|
||||
<div style="color: #666;">운영 서버 2대 구축, 로드밸런서, DB 이중화</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phase-item">
|
||||
<div class="phase-number">3</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">Phase 3: CI/CD 고도화 (5-6주)</div>
|
||||
<div style="color: #666;">Runner 서버 구축, 무중단 배포 구현</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phase-item">
|
||||
<div class="phase-number">4</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">Phase 4: 백업/모니터링 (7-8주)</div>
|
||||
<div style="color: #666;">자동 백업, DR 환경, 모니터링 시스템</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phase-item">
|
||||
<div class="phase-number">5</div>
|
||||
<div class="phase-content">
|
||||
<div class="phase-title">Phase 5: 최적화 (9-10주)</div>
|
||||
<div style="color: #666;">성능 튜닝, 문서화, 팀 교육</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-grid" style="margin-top: 40px;">
|
||||
<div class="highlight-card">
|
||||
<h4 style="color: #667eea;">🎯 2주차 목표</h4>
|
||||
<p style="color: #666;">개발 환경 자동 배포</p>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<h4 style="color: #667eea;">🎯 6주차 목표</h4>
|
||||
<p style="color: #666;">무중단 운영 배포</p>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<h4 style="color: #667eea;">🎯 10주차 목표</h4>
|
||||
<p style="color: #666;">정식 서비스 오픈</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: 비용 분석 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">4</span>
|
||||
<h2 class="slide-title">비용 분석</h2>
|
||||
</div>
|
||||
|
||||
<div class="cost-comparison">
|
||||
<div class="cost-column cost-current">
|
||||
<h3 style="text-align: center; margin-bottom: 20px;">📊 초기 운영 비용</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="padding: 10px;">클라우드 (3대)</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>22만원</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px;">IDC 코로케이션</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>30만원</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px;">네트워크/기타</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>8만원</strong></td>
|
||||
</tr>
|
||||
<tr style="border-top: 2px solid #ff9800;">
|
||||
<td style="padding: 10px;"><strong>월 총액</strong></td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>60만원</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="cost-column cost-future">
|
||||
<h3 style="text-align: center; margin-bottom: 20px;">📈 6개월 후 예상</h3>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="padding: 10px;">클라우드 확장</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>+20만원</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px;">Managed DB</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>+15만원</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px;">CDN/캐싱</td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>+5만원</strong></td>
|
||||
</tr>
|
||||
<tr style="border-top: 2px solid #4caf50;">
|
||||
<td style="padding: 10px;"><strong>예상 총액</strong></td>
|
||||
<td style="text-align: right; padding: 10px;"><strong>100만원</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-point">
|
||||
💰 비용 절감 전략: 기존 서버 활용으로 월 40만원 절감, Reserved Instance로 추가 20-30% 할인 가능
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: 기대 효과 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">5</span>
|
||||
<h2 class="slide-title">기대 효과</h2>
|
||||
</div>
|
||||
|
||||
<ul class="benefit-list">
|
||||
<li>
|
||||
<strong>고가용성 확보</strong><br>
|
||||
이중화 구성으로 99.9% 가용성 달성, 단일 장애점(SPOF) 제거
|
||||
</li>
|
||||
<li>
|
||||
<strong>개발 생산성 향상</strong><br>
|
||||
자동화된 CI/CD로 배포 시간 90% 단축 (30분 → 3분)
|
||||
</li>
|
||||
<li>
|
||||
<strong>비용 효율성</strong><br>
|
||||
하이브리드 구성으로 순수 클라우드 대비 40% 비용 절감
|
||||
</li>
|
||||
<li>
|
||||
<strong>확장 유연성</strong><br>
|
||||
트래픽 증가에 따른 단계적 확장 가능, 오토스케일링 준비
|
||||
</li>
|
||||
<li>
|
||||
<strong>안정적 운영</strong><br>
|
||||
24/7 모니터링, 자동 백업, DR 환경으로 데이터 손실 방지
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="highlight-grid" style="margin-top: 30px;">
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">5분</div>
|
||||
<div class="metric-label">평균 배포 시간</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">30초</div>
|
||||
<div class="metric-label">장애 복구 시간</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">95%</div>
|
||||
<div class="metric-label">자동화율</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7: 리스크 관리 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">6</span>
|
||||
<h2 class="slide-title">리스크 관리</h2>
|
||||
</div>
|
||||
|
||||
<table class="risk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>리스크</th>
|
||||
<th>영향도</th>
|
||||
<th>대응 방안</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="risk-high">
|
||||
<td><strong>클라우드 장애</strong></td>
|
||||
<td>높음</td>
|
||||
<td>
|
||||
• 멀티 AZ 구성<br>
|
||||
• IDC 백업 사이트 활성화<br>
|
||||
• 1시간 내 DR 전환
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="risk-medium">
|
||||
<td><strong>비용 초과</strong></td>
|
||||
<td>중간</td>
|
||||
<td>
|
||||
• 일일 비용 모니터링<br>
|
||||
• Reserved Instance 활용<br>
|
||||
• 단계적 확장 전략
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="risk-low">
|
||||
<td><strong>기술 부채</strong></td>
|
||||
<td>낮음</td>
|
||||
<td>
|
||||
• 정기적 리팩토링<br>
|
||||
• 코드 리뷰 프로세스<br>
|
||||
• 기술 문서화
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="risk-medium">
|
||||
<td><strong>보안 위협</strong></td>
|
||||
<td>중간</td>
|
||||
<td>
|
||||
• WAF 적용<br>
|
||||
• 정기 보안 점검<br>
|
||||
• 침입 탐지 시스템
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="key-point" style="margin-top: 30px;">
|
||||
🛡️ 핵심 전략: 각 리스크별 대응 계획 수립 및 정기적인 DR 훈련으로 대응 능력 향상
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 8: 다음 단계 -->
|
||||
<div class="slide">
|
||||
<div class="slide-header">
|
||||
<span class="slide-number">7</span>
|
||||
<h2 class="slide-title">다음 단계 액션 플랜</h2>
|
||||
</div>
|
||||
|
||||
<div class="next-steps">
|
||||
<h3 style="margin-bottom: 20px;">즉시 시작 가능한 작업</h3>
|
||||
<div class="step-item">
|
||||
<div class="step-number">1</div>
|
||||
<div>클라우드 계정 생성 및 네트워크 대역 할당</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-number">2</div>
|
||||
<div>개발 서버 (Play) 인스턴스 생성 및 Docker 환경 구축</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-number">3</div>
|
||||
<div>GitLab CI/CD 파이프라인 기본 설정</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-number">4</div>
|
||||
<div>IDC 코로케이션 계약 및 서버 입고 준비</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 15px;">
|
||||
<h3 style="color: #667eea; margin-bottom: 15px;">📅 1주차 체크포인트</h3>
|
||||
<ul style="margin-left: 20px; color: #666;">
|
||||
<li>개발 서버 구동 완료</li>
|
||||
<li>기본 CI/CD 파이프라인 테스트</li>
|
||||
<li>팀 권한 및 접근 설정</li>
|
||||
<li>초기 비용 모니터링 시작</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="key-point" style="margin-top: 30px;">
|
||||
🚀 목표: 2주 내 개발 환경 완성 → 10주 내 정식 서비스 오픈
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 9: Q&A -->
|
||||
<div class="slide">
|
||||
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<h1 style="font-size: 3em; color: #333; margin-bottom: 30px;">Q&A</h1>
|
||||
<p style="font-size: 1.5em; color: #666; text-align: center; margin-bottom: 40px;">
|
||||
추가 질문이나 논의사항이 있으신가요?
|
||||
</p>
|
||||
|
||||
<div style="background: #f8f9fa; padding: 30px; border-radius: 15px; width: 100%; max-width: 600px;">
|
||||
<h3 style="color: #667eea; margin-bottom: 20px;">💬 주요 검토 사항</h3>
|
||||
<ul style="color: #666; line-height: 2;">
|
||||
<li>구체적인 일정 조정</li>
|
||||
<li>초기 투자 비용 승인</li>
|
||||
<li>팀 역할 및 책임 분담</li>
|
||||
<li>우선순위 조정</li>
|
||||
<li>추가 요구사항</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<p style="color: #666;">
|
||||
<strong>연락처:</strong> infrastructure@company.com<br>
|
||||
<strong>문서:</strong> 상세 기술 문서 제공 가능
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
505
public/develop/network-topology-diagram.html
Normal file
505
public/develop/network-topology-diagram.html
Normal file
@@ -0,0 +1,505 @@
|
||||
<!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>
|
||||
314
public/develop/server-spec-cost-analysis.html
Normal file
314
public/develop/server-spec-cost-analysis.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!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: 1200px;
|
||||
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;
|
||||
}
|
||||
.spec-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 30px 0;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spec-table thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.spec-table th {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
.spec-table td {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.spec-table tbody tr:hover {
|
||||
background: #f5f5f5;
|
||||
transform: scale(1.01);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cloud-server {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
.idc-server {
|
||||
background: #fff3e0;
|
||||
}
|
||||
.cost-summary {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.cost-card {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
transform: translateY(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cost-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.cost-card h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
border-bottom: 2px solid rgba(255,255,255,0.3);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.cost-value {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.cost-detail {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.phase-section {
|
||||
margin-top: 40px;
|
||||
padding: 25px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
border-left: 5px solid #667eea;
|
||||
}
|
||||
.phase-title {
|
||||
font-size: 1.5em;
|
||||
color: #667eea;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.resource-item {
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.resource-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
.resource-label {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.resource-value {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.note-section {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background: #fffbf0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ffc107;
|
||||
}
|
||||
.note-section h3 {
|
||||
color: #f57c00;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.note-section ul {
|
||||
margin-left: 20px;
|
||||
color: #666;
|
||||
}
|
||||
.note-section li {
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>💰 서버 사양 및 비용 분석</h1>
|
||||
|
||||
<table class="spec-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>구분</th>
|
||||
<th>서버명</th>
|
||||
<th>타입/모델</th>
|
||||
<th>사양</th>
|
||||
<th>용도</th>
|
||||
<th>위치</th>
|
||||
<th>예상 월 비용</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="cloud-server">
|
||||
<td>클라우드</td>
|
||||
<td>운영 서버 A</td>
|
||||
<td>Standard</td>
|
||||
<td>4vCore / 8GB RAM</td>
|
||||
<td>Web Service + DB Master</td>
|
||||
<td>Cloud</td>
|
||||
<td>₩88,000</td>
|
||||
</tr>
|
||||
<tr class="cloud-server">
|
||||
<td>클라우드</td>
|
||||
<td>운영 서버 B</td>
|
||||
<td>Standard</td>
|
||||
<td>4vCore / 8GB RAM</td>
|
||||
<td>Web Service + DB Standby</td>
|
||||
<td>Cloud</td>
|
||||
<td>₩88,000</td>
|
||||
</tr>
|
||||
<tr class="cloud-server">
|
||||
<td>클라우드</td>
|
||||
<td>개발 서버 C</td>
|
||||
<td>Play</td>
|
||||
<td>2vCore / 4GB RAM</td>
|
||||
<td>Staging Service</td>
|
||||
<td>Cloud</td>
|
||||
<td>₩44,000</td>
|
||||
</tr>
|
||||
<tr class="idc-server">
|
||||
<td>코로케이션</td>
|
||||
<td>HP DL360 #1</td>
|
||||
<td>Physical</td>
|
||||
<td>기존 보유 장비</td>
|
||||
<td>CI/CD Runner, Admin(통계)</td>
|
||||
<td>IDC</td>
|
||||
<td>₩150,000 (상면비)</td>
|
||||
</tr>
|
||||
<tr class="idc-server">
|
||||
<td>코로케이션</td>
|
||||
<td>HP DL210 #2</td>
|
||||
<td>Physical</td>
|
||||
<td>기존 보유 장비</td>
|
||||
<td>백업, DR, 모니터링</td>
|
||||
<td>IDC</td>
|
||||
<td>₩150,000 (상면비)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="cost-summary">
|
||||
<div class="cost-card">
|
||||
<h3>💵 클라우드 비용</h3>
|
||||
<div class="cost-value">₩220,000</div>
|
||||
<div class="cost-detail">월간 클라우드 서버 3대</div>
|
||||
</div>
|
||||
<div class="cost-card">
|
||||
<h3>🏢 IDC 코로케이션</h3>
|
||||
<div class="cost-value">₩300,000</div>
|
||||
<div class="cost-detail">월간 상면비 (2U 기준)</div>
|
||||
</div>
|
||||
<div class="cost-card">
|
||||
<h3>🌐 네트워크/기타</h3>
|
||||
<div class="cost-value">₩80,000</div>
|
||||
<div class="cost-detail">트래픽, 로드밸런서, 백업</div>
|
||||
</div>
|
||||
<div class="cost-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||||
<h3>📊 총 예상 비용</h3>
|
||||
<div class="cost-value">₩600,000</div>
|
||||
<div class="cost-detail">월간 인프라 총 비용</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phase-section">
|
||||
<div class="phase-title">🚀 초기 단계 (현재)</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">총 vCore</div>
|
||||
<div class="resource-value">10 vCore</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">총 메모리</div>
|
||||
<div class="resource-value">20 GB</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">서버 대수</div>
|
||||
<div class="resource-value">5대</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">예상 동시접속</div>
|
||||
<div class="resource-value">~1,000명</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phase-section">
|
||||
<div class="phase-title">📈 확장 단계 (6개월 후)</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">추가 운영 서버</div>
|
||||
<div class="resource-value">+2대</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">DB 분리</div>
|
||||
<div class="resource-value">Managed DB</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">캐시 서버</div>
|
||||
<div class="resource-value">Redis Cluster</div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">예상 비용 증가</div>
|
||||
<div class="resource-value">+₩400,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-section">
|
||||
<h3>📝 비용 최적화 전략</h3>
|
||||
<ul>
|
||||
<li>초기 3개월: 현재 구성으로 서비스 안정화에 집중</li>
|
||||
<li>트래픽 증가 시: 클라우드 서버만 우선 증설 (유연한 확장)</li>
|
||||
<li>DB 부하 증가 시: Managed DB 서비스 전환 검토</li>
|
||||
<li>코로케이션 서버: 변경 없이 백업/모니터링 전용으로 유지</li>
|
||||
<li>Reserved Instance 계약으로 클라우드 비용 20-30% 절감 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="note-section">
|
||||
<h3>⚠️ 추가 고려사항</h3>
|
||||
<ul>
|
||||
<li>SSL 인증서 비용 (연간)</li>
|
||||
<li>도메인 유지비용</li>
|
||||
<li>모니터링 도구 라이센스 (Datadog, New Relic 등)</li>
|
||||
<li>백업 스토리지 추가 비용 (클라우드 스토리지)</li>
|
||||
<li>DDoS 방어 서비스 (필요시)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
305
public/develop/system-architecture-diagram.html
Normal file
305
public/develop/system-architecture-diagram.html
Normal file
@@ -0,0 +1,305 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user