417 lines
15 KiB
HTML
417 lines
15 KiB
HTML
|
<!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>
|