feat: [academy] Docker 환경이해 교육 페이지 SVG 이미지 5개 추가
- 1.svg: Hero 이미지 (Docker 고래 로고 + 컨테이너 비유) - 2.svg: 컨테이너 vs VM 비교 다이어그램 - 3.svg: SAM 전체 아키텍처 다이어그램 (9개 서비스) - 4.svg: 요청 흐름 5단계 시각화 - 5.svg: 서비스별 내부 프로세스 구조 (Supervisor)
This commit is contained in:
김보곤
131
public/images/academy/docker-environment/1.svg
Normal file
131
public/images/academy/docker-environment/1.svg
Normal file
@@ -0,0 +1,131 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="whaleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#2196F3"/>
|
||||
<stop offset="100%" style="stop-color:#1565C0"/>
|
||||
</linearGradient>
|
||||
<filter id="glow1">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="softGlow">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg1)"/>
|
||||
|
||||
<!-- Particle dots -->
|
||||
<circle cx="50" cy="60" r="2" fill="#2196F3" opacity="0.3"/>
|
||||
<circle cx="120" cy="30" r="1.5" fill="#2196F3" opacity="0.4"/>
|
||||
<circle cx="200" cy="80" r="2.5" fill="#2196F3" opacity="0.2"/>
|
||||
<circle cx="680" cy="45" r="2" fill="#2196F3" opacity="0.35"/>
|
||||
<circle cx="740" cy="90" r="1.5" fill="#2196F3" opacity="0.25"/>
|
||||
<circle cx="600" cy="25" r="2" fill="#2196F3" opacity="0.3"/>
|
||||
<circle cx="350" cy="50" r="1.8" fill="#2196F3" opacity="0.2"/>
|
||||
<circle cx="450" cy="35" r="2.2" fill="#2196F3" opacity="0.3"/>
|
||||
<circle cx="100" cy="450" r="2" fill="#2196F3" opacity="0.2"/>
|
||||
<circle cx="700" cy="460" r="1.5" fill="#2196F3" opacity="0.3"/>
|
||||
<circle cx="300" cy="470" r="2" fill="#2196F3" opacity="0.15"/>
|
||||
<circle cx="550" cy="480" r="1.8" fill="#2196F3" opacity="0.25"/>
|
||||
<circle cx="30" cy="250" r="2" fill="#2196F3" opacity="0.2"/>
|
||||
<circle cx="770" cy="200" r="2.5" fill="#2196F3" opacity="0.15"/>
|
||||
<circle cx="60" cy="350" r="1.5" fill="#2196F3" opacity="0.3"/>
|
||||
<circle cx="750" cy="350" r="2" fill="#2196F3" opacity="0.2"/>
|
||||
|
||||
<!-- Docker Whale Body -->
|
||||
<g transform="translate(280, 140)" filter="url(#softGlow)">
|
||||
<!-- Whale body -->
|
||||
<path d="M20,100 C20,100 10,80 30,60 C50,40 80,35 110,35 C140,35 170,40 190,55 C210,70 220,90 220,100 C220,120 200,140 170,145 C140,150 60,150 40,140 C20,130 20,120 20,100 Z" fill="url(#whaleGrad)" opacity="0.9"/>
|
||||
<!-- Whale tail -->
|
||||
<path d="M20,100 C20,100 -10,75 -15,55 C-20,35 -5,30 5,45 C15,60 20,80 20,100 Z" fill="url(#whaleGrad)" opacity="0.85"/>
|
||||
<!-- Whale eye -->
|
||||
<circle cx="55" cy="85" r="5" fill="#fff"/>
|
||||
<circle cx="56" cy="84" r="2.5" fill="#0f172a"/>
|
||||
<!-- Water spout -->
|
||||
<path d="M160,35 C160,20 155,10 165,5 M165,35 C170,15 175,8 170,0 M170,38 C180,22 185,12 178,2" stroke="#64B5F6" stroke-width="2" fill="none" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Container boxes on whale -->
|
||||
<g transform="translate(310, 105)">
|
||||
<!-- Container 1: MNG -->
|
||||
<rect x="0" y="0" width="50" height="35" rx="4" fill="#4fc3f7" opacity="0.9" stroke="#81D4FA" stroke-width="1"/>
|
||||
<text x="25" y="22" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#0f172a" text-anchor="middle">MNG</text>
|
||||
|
||||
<!-- Container 2: API -->
|
||||
<rect x="58" y="0" width="50" height="35" rx="4" fill="#2196F3" opacity="0.9" stroke="#64B5F6" stroke-width="1"/>
|
||||
<text x="83" y="22" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">API</text>
|
||||
|
||||
<!-- Container 3: MySQL -->
|
||||
<rect x="116" y="0" width="50" height="35" rx="4" fill="#1565C0" opacity="0.9" stroke="#42A5F5" stroke-width="1"/>
|
||||
<text x="141" y="22" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">MySQL</text>
|
||||
</g>
|
||||
|
||||
<!-- Laptop icon (left) -->
|
||||
<g transform="translate(80, 180)">
|
||||
<!-- Screen -->
|
||||
<rect x="0" y="0" width="70" height="48" rx="4" fill="#1e293b" stroke="#64B5F6" stroke-width="2"/>
|
||||
<rect x="5" y="5" width="60" height="35" rx="2" fill="#0f172a"/>
|
||||
<text x="35" y="27" font-family="Arial, sans-serif" font-size="9" fill="#64B5F6" text-anchor="middle">LOCAL</text>
|
||||
<!-- Base -->
|
||||
<path d="M-5,48 L75,48 L70,55 L0,55 Z" fill="#334155"/>
|
||||
<!-- Label -->
|
||||
<text x="35" y="80" font-family="Arial, sans-serif" font-size="13" fill="#94a3b8" text-anchor="middle">내 노트북</text>
|
||||
</g>
|
||||
|
||||
<!-- Equals sign -->
|
||||
<g transform="translate(370, 210)" filter="url(#glow1)">
|
||||
<rect x="0" y="0" width="40" height="8" rx="3" fill="#2196F3"/>
|
||||
<rect x="0" y="16" width="40" height="8" rx="3" fill="#2196F3"/>
|
||||
</g>
|
||||
|
||||
<!-- Server icon (right) -->
|
||||
<g transform="translate(640, 170)">
|
||||
<!-- Server body -->
|
||||
<rect x="0" y="0" width="70" height="65" rx="4" fill="#1e293b" stroke="#64B5F6" stroke-width="2"/>
|
||||
<!-- Server rows -->
|
||||
<rect x="8" y="8" width="54" height="14" rx="2" fill="#0f172a"/>
|
||||
<circle cx="52" cy="15" r="3" fill="#4caf50"/>
|
||||
<rect x="8" y="26" width="54" height="14" rx="2" fill="#0f172a"/>
|
||||
<circle cx="52" cy="33" r="3" fill="#4caf50"/>
|
||||
<rect x="8" y="44" width="54" height="14" rx="2" fill="#0f172a"/>
|
||||
<circle cx="52" cy="51" r="3" fill="#4caf50"/>
|
||||
<!-- Label -->
|
||||
<text x="35" y="88" font-family="Arial, sans-serif" font-size="13" fill="#94a3b8" text-anchor="middle">운영 서버</text>
|
||||
</g>
|
||||
|
||||
<!-- Connecting dashed lines from laptop to center -->
|
||||
<line x1="155" y1="215" x2="365" y2="215" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="6,4" opacity="0.4"/>
|
||||
<!-- Connecting dashed lines from center to server -->
|
||||
<line x1="415" y1="215" x2="635" y2="215" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="6,4" opacity="0.4"/>
|
||||
|
||||
<!-- Bottom text -->
|
||||
<g transform="translate(400, 370)">
|
||||
<text x="0" y="0" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#fff" text-anchor="middle" filter="url(#glow1)">
|
||||
Docker
|
||||
</text>
|
||||
<text x="0" y="40" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="18" fill="#94a3b8" text-anchor="middle">
|
||||
어디서든 동일한 환경
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Docker blue accent line -->
|
||||
<rect x="300" y="420" width="200" height="3" rx="1.5" fill="#2196F3" opacity="0.6"/>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="400" y="460" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" fill="#64748b" text-anchor="middle">
|
||||
개발 환경과 운영 환경의 차이를 제거합니다
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
167
public/images/academy/docker-environment/2.svg
Normal file
167
public/images/academy/docker-environment/2.svg
Normal file
@@ -0,0 +1,167 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="glow2">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg2)"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="22" font-weight="bold" fill="#fff" text-anchor="middle">
|
||||
가상머신(VM) vs Docker 컨테이너
|
||||
</text>
|
||||
|
||||
<!-- Divider line (center) -->
|
||||
<line x1="400" y1="55" x2="400" y2="430" stroke="#334155" stroke-width="1.5" stroke-dasharray="8,4"/>
|
||||
|
||||
<!-- === LEFT SIDE: VM === -->
|
||||
<text x="200" y="80" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="18" font-weight="bold" fill="#ff7043" text-anchor="middle">
|
||||
가상머신 (VM)
|
||||
</text>
|
||||
|
||||
<!-- VM Stack -->
|
||||
<g transform="translate(55, 95)">
|
||||
<!-- Hardware -->
|
||||
<rect x="0" y="280" width="290" height="40" rx="4" fill="#455a64" stroke="#607d8b" stroke-width="1.5"/>
|
||||
<text x="145" y="305" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Hardware</text>
|
||||
|
||||
<!-- Host OS -->
|
||||
<rect x="0" y="235" width="290" height="40" rx="4" fill="#546e7a" stroke="#78909c" stroke-width="1.5"/>
|
||||
<text x="145" y="260" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Host OS</text>
|
||||
|
||||
<!-- Hypervisor -->
|
||||
<rect x="0" y="190" width="290" height="40" rx="4" fill="#ff8a65" stroke="#ff7043" stroke-width="1.5"/>
|
||||
<text x="145" y="215" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Hypervisor</text>
|
||||
|
||||
<!-- VM 1 -->
|
||||
<g transform="translate(5, 10)">
|
||||
<rect x="0" y="0" width="86" height="175" rx="4" fill="#1e293b" stroke="#ff7043" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<!-- Guest OS -->
|
||||
<rect x="5" y="115" width="76" height="30" rx="3" fill="#bf360c" opacity="0.8"/>
|
||||
<text x="43" y="135" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Guest OS</text>
|
||||
<!-- Bins/Libs -->
|
||||
<rect x="5" y="80" width="76" height="30" rx="3" fill="#e65100" opacity="0.7"/>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<!-- App -->
|
||||
<rect x="5" y="30" width="76" height="45" rx="3" fill="#ff7043"/>
|
||||
<text x="43" y="50" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 1</text>
|
||||
<!-- VM label -->
|
||||
<text x="43" y="160" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">VM 1</text>
|
||||
</g>
|
||||
|
||||
<!-- VM 2 -->
|
||||
<g transform="translate(102, 10)">
|
||||
<rect x="0" y="0" width="86" height="175" rx="4" fill="#1e293b" stroke="#ff7043" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<rect x="5" y="115" width="76" height="30" rx="3" fill="#bf360c" opacity="0.8"/>
|
||||
<text x="43" y="135" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Guest OS</text>
|
||||
<rect x="5" y="80" width="76" height="30" rx="3" fill="#e65100" opacity="0.7"/>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<rect x="5" y="30" width="76" height="45" rx="3" fill="#ff7043"/>
|
||||
<text x="43" y="50" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 2</text>
|
||||
<text x="43" y="160" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">VM 2</text>
|
||||
</g>
|
||||
|
||||
<!-- VM 3 -->
|
||||
<g transform="translate(199, 10)">
|
||||
<rect x="0" y="0" width="86" height="175" rx="4" fill="#1e293b" stroke="#ff7043" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<rect x="5" y="115" width="76" height="30" rx="3" fill="#bf360c" opacity="0.8"/>
|
||||
<text x="43" y="135" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Guest OS</text>
|
||||
<rect x="5" y="80" width="76" height="30" rx="3" fill="#e65100" opacity="0.7"/>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<rect x="5" y="30" width="76" height="45" rx="3" fill="#ff7043"/>
|
||||
<text x="43" y="50" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 3</text>
|
||||
<text x="43" y="160" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">VM 3</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- === RIGHT SIDE: Docker === -->
|
||||
<text x="600" y="80" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="18" font-weight="bold" fill="#2196F3" text-anchor="middle">
|
||||
Docker 컨테이너
|
||||
</text>
|
||||
|
||||
<!-- Docker Stack -->
|
||||
<g transform="translate(455, 95)">
|
||||
<!-- Hardware -->
|
||||
<rect x="0" y="280" width="290" height="40" rx="4" fill="#455a64" stroke="#607d8b" stroke-width="1.5"/>
|
||||
<text x="145" y="305" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Hardware</text>
|
||||
|
||||
<!-- Host OS -->
|
||||
<rect x="0" y="235" width="290" height="40" rx="4" fill="#546e7a" stroke="#78909c" stroke-width="1.5"/>
|
||||
<text x="145" y="260" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Host OS (커널 공유)</text>
|
||||
|
||||
<!-- Docker Engine -->
|
||||
<rect x="0" y="190" width="290" height="40" rx="4" fill="#1976D2" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<text x="145" y="215" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#fff" text-anchor="middle">Docker Engine</text>
|
||||
|
||||
<!-- Container 1 -->
|
||||
<g transform="translate(5, 70)">
|
||||
<rect x="0" y="0" width="86" height="115" rx="4" fill="#1e293b" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<!-- Bins/Libs -->
|
||||
<rect x="5" y="55" width="76" height="30" rx="3" fill="#1565C0" opacity="0.7"/>
|
||||
<text x="43" y="75" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<!-- App -->
|
||||
<rect x="5" y="15" width="76" height="35" rx="3" fill="#2196F3"/>
|
||||
<text x="43" y="37" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 1</text>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">Container 1</text>
|
||||
</g>
|
||||
|
||||
<!-- Container 2 -->
|
||||
<g transform="translate(102, 70)">
|
||||
<rect x="0" y="0" width="86" height="115" rx="4" fill="#1e293b" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<rect x="5" y="55" width="76" height="30" rx="3" fill="#1565C0" opacity="0.7"/>
|
||||
<text x="43" y="75" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<rect x="5" y="15" width="76" height="35" rx="3" fill="#2196F3"/>
|
||||
<text x="43" y="37" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 2</text>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">Container 2</text>
|
||||
</g>
|
||||
|
||||
<!-- Container 3 -->
|
||||
<g transform="translate(199, 70)">
|
||||
<rect x="0" y="0" width="86" height="115" rx="4" fill="#1e293b" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="4,2"/>
|
||||
<rect x="5" y="55" width="76" height="30" rx="3" fill="#1565C0" opacity="0.7"/>
|
||||
<text x="43" y="75" font-family="Arial, sans-serif" font-size="9" fill="#fff" text-anchor="middle">Bins/Libs</text>
|
||||
<rect x="5" y="15" width="76" height="35" rx="3" fill="#2196F3"/>
|
||||
<text x="43" y="37" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">App 3</text>
|
||||
<text x="43" y="100" font-family="Arial, sans-serif" font-size="8" fill="#78909c" text-anchor="middle">Container 3</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Height comparison brackets -->
|
||||
<!-- VM height bracket -->
|
||||
<line x1="42" y1="105" x2="42" y2="415" stroke="#ff7043" stroke-width="1.5" opacity="0.5"/>
|
||||
<line x1="38" y1="105" x2="46" y2="105" stroke="#ff7043" stroke-width="1.5" opacity="0.5"/>
|
||||
<line x1="38" y1="415" x2="46" y2="415" stroke="#ff7043" stroke-width="1.5" opacity="0.5"/>
|
||||
<text x="30" y="265" font-family="Arial, sans-serif" font-size="10" fill="#ff7043" text-anchor="middle" transform="rotate(-90, 30, 265)">GB 단위</text>
|
||||
|
||||
<!-- Docker height bracket -->
|
||||
<line x1="758" y1="165" x2="758" y2="415" stroke="#2196F3" stroke-width="1.5" opacity="0.5"/>
|
||||
<line x1="754" y1="165" x2="762" y2="165" stroke="#2196F3" stroke-width="1.5" opacity="0.5"/>
|
||||
<line x1="754" y1="415" x2="762" y2="415" stroke="#2196F3" stroke-width="1.5" opacity="0.5"/>
|
||||
<text x="772" y="295" font-family="Arial, sans-serif" font-size="10" fill="#2196F3" text-anchor="middle" transform="rotate(-90, 772, 295)">MB 단위</text>
|
||||
|
||||
<!-- Bottom comparison -->
|
||||
<g transform="translate(0, 445)">
|
||||
<!-- VM label -->
|
||||
<rect x="80" y="0" width="240" height="36" rx="6" fill="#ff7043" opacity="0.15" stroke="#ff7043" stroke-width="1"/>
|
||||
<text x="200" y="14" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#ff7043" text-anchor="middle">각 VM마다 OS 필요</text>
|
||||
<text x="200" y="30" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#ff7043" text-anchor="middle">무겁고 느림</text>
|
||||
|
||||
<!-- Docker label -->
|
||||
<rect x="480" y="0" width="240" height="36" rx="6" fill="#2196F3" opacity="0.15" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="600" y="14" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#2196F3" text-anchor="middle">커널을 공유하여 OS 불필요</text>
|
||||
<text x="600" y="30" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#2196F3" text-anchor="middle">가볍고 빠름</text>
|
||||
</g>
|
||||
|
||||
<!-- VS text -->
|
||||
<text x="400" y="265" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#475569" text-anchor="middle">VS</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
174
public/images/academy/docker-environment/3.svg
Normal file
174
public/images/academy/docker-environment/3.svg
Normal file
@@ -0,0 +1,174 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="glow3">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<marker id="arrowHead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6 Z" fill="#64B5F6" opacity="0.7"/>
|
||||
</marker>
|
||||
<marker id="arrowHeadGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6 Z" fill="#66bb6a" opacity="0.7"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg3)"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="32" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="20" font-weight="bold" fill="#fff" text-anchor="middle">
|
||||
SAM 전체 아키텍처
|
||||
</text>
|
||||
|
||||
<!-- Network boundary (dashed box) -->
|
||||
<rect x="30" y="45" width="740" height="420" rx="12" fill="none" stroke="#334155" stroke-width="2" stroke-dasharray="10,5"/>
|
||||
<text x="60" y="68" font-family="Arial, sans-serif" font-size="12" fill="#64748b">samnet (브리지 네트워크)</text>
|
||||
|
||||
<!-- === NGINX (top center) === -->
|
||||
<g transform="translate(340, 78)">
|
||||
<rect x="0" y="0" width="120" height="50" rx="6" fill="#1e293b" stroke="#66bb6a" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="120" height="4" rx="2" fill="#66bb6a"/>
|
||||
<text x="22" y="32" font-family="Arial, sans-serif" font-size="16">🌐</text>
|
||||
<text x="42" y="33" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#66bb6a">Nginx</text>
|
||||
<text x="60" y="46" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">:80 / :443</text>
|
||||
</g>
|
||||
|
||||
<!-- === Middle row: api, mng, react, design, sales, php73 === -->
|
||||
|
||||
<!-- API -->
|
||||
<g transform="translate(30, 195)">
|
||||
<rect x="0" y="0" width="105" height="55" rx="6" fill="#1e293b" stroke="#2196F3" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="105" height="4" rx="2" fill="#2196F3"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">⚡</text>
|
||||
<text x="30" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#2196F3">API</text>
|
||||
<text x="52" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel :9000</text>
|
||||
</g>
|
||||
|
||||
<!-- MNG -->
|
||||
<g transform="translate(148, 195)">
|
||||
<rect x="0" y="0" width="105" height="55" rx="6" fill="#1e293b" stroke="#4fc3f7" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="105" height="4" rx="2" fill="#4fc3f7"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">🖥</text>
|
||||
<text x="30" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#4fc3f7">MNG</text>
|
||||
<text x="52" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel :9001</text>
|
||||
</g>
|
||||
|
||||
<!-- React -->
|
||||
<g transform="translate(266, 195)">
|
||||
<rect x="0" y="0" width="105" height="55" rx="6" fill="#1e293b" stroke="#ab47bc" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="105" height="4" rx="2" fill="#ab47bc"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">⚛</text>
|
||||
<text x="30" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#ab47bc">React</text>
|
||||
<text x="52" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Next.js :3000</text>
|
||||
</g>
|
||||
|
||||
<!-- Design -->
|
||||
<g transform="translate(384, 195)">
|
||||
<rect x="0" y="0" width="105" height="55" rx="6" fill="#1e293b" stroke="#78909c" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="105" height="4" rx="2" fill="#78909c"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">🎨</text>
|
||||
<text x="32" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#78909c">Design</text>
|
||||
<text x="52" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel :9003</text>
|
||||
</g>
|
||||
|
||||
<!-- Sales -->
|
||||
<g transform="translate(502, 195)">
|
||||
<rect x="0" y="0" width="105" height="55" rx="6" fill="#1e293b" stroke="#ffa726" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="105" height="4" rx="2" fill="#ffa726"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">💰</text>
|
||||
<text x="32" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#ffa726">Sales</text>
|
||||
<text x="52" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel :9004</text>
|
||||
</g>
|
||||
|
||||
<!-- PHP73 -->
|
||||
<g transform="translate(620, 195)">
|
||||
<rect x="0" y="0" width="115" height="55" rx="6" fill="#1e293b" stroke="#8d6e63" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="115" height="4" rx="2" fill="#8d6e63"/>
|
||||
<text x="10" y="30" font-family="Arial, sans-serif" font-size="14">📦</text>
|
||||
<text x="32" y="31" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#8d6e63">PHP 7.3</text>
|
||||
<text x="57" y="47" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Legacy :9002</text>
|
||||
</g>
|
||||
|
||||
<!-- === Bottom row: MySQL, phpMyAdmin === -->
|
||||
|
||||
<!-- MySQL (cylinder shape) -->
|
||||
<g transform="translate(280, 340)">
|
||||
<rect x="0" y="8" width="130" height="55" rx="6" fill="#1e293b" stroke="#ff7043" stroke-width="2"/>
|
||||
<!-- Cylinder top ellipse -->
|
||||
<ellipse cx="65" cy="12" rx="64" ry="10" fill="#1e293b" stroke="#ff7043" stroke-width="2"/>
|
||||
<ellipse cx="65" cy="12" rx="64" ry="10" fill="#ff7043" opacity="0.1"/>
|
||||
<text x="25" y="42" font-family="Arial, sans-serif" font-size="14">🗄</text>
|
||||
<text x="43" y="43" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#ff7043">MySQL</text>
|
||||
<text x="65" y="58" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">:3306</text>
|
||||
</g>
|
||||
|
||||
<!-- phpMyAdmin -->
|
||||
<g transform="translate(450, 345)">
|
||||
<rect x="0" y="0" width="140" height="55" rx="6" fill="#1e293b" stroke="#ef5350" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="140" height="4" rx="2" fill="#ef5350"/>
|
||||
<text x="10" y="32" font-family="Arial, sans-serif" font-size="14">🔧</text>
|
||||
<text x="30" y="33" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#ef5350">phpMyAdmin</text>
|
||||
<text x="70" y="48" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">:8080</text>
|
||||
</g>
|
||||
|
||||
<!-- === Arrows from Nginx to services === -->
|
||||
<!-- Nginx to API -->
|
||||
<line x1="370" y1="128" x2="95" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
<!-- Nginx to MNG -->
|
||||
<line x1="385" y1="128" x2="210" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
<!-- Nginx to React -->
|
||||
<line x1="400" y1="128" x2="325" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
<!-- Nginx to Design -->
|
||||
<line x1="415" y1="128" x2="440" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
<!-- Nginx to Sales -->
|
||||
<line x1="430" y1="128" x2="555" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
<!-- Nginx to PHP73 -->
|
||||
<line x1="445" y1="128" x2="680" y2="195" stroke="#66bb6a" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHeadGreen)"/>
|
||||
|
||||
<!-- Arrows from services to MySQL -->
|
||||
<!-- API to MySQL -->
|
||||
<line x1="82" y1="250" x2="310" y2="340" stroke="#64B5F6" stroke-width="1.2" opacity="0.35" marker-end="url(#arrowHead)"/>
|
||||
<!-- MNG to MySQL -->
|
||||
<line x1="200" y1="250" x2="325" y2="340" stroke="#64B5F6" stroke-width="1.2" opacity="0.35" marker-end="url(#arrowHead)"/>
|
||||
<!-- React to MySQL (via API, dashed) -->
|
||||
<line x1="318" y1="250" x2="340" y2="340" stroke="#64B5F6" stroke-width="1" opacity="0.2" stroke-dasharray="4,3"/>
|
||||
<!-- Design to MySQL -->
|
||||
<line x1="436" y1="250" x2="375" y2="340" stroke="#64B5F6" stroke-width="1.2" opacity="0.35" marker-end="url(#arrowHead)"/>
|
||||
<!-- Sales to MySQL -->
|
||||
<line x1="554" y1="250" x2="390" y2="340" stroke="#64B5F6" stroke-width="1.2" opacity="0.35" marker-end="url(#arrowHead)"/>
|
||||
<!-- PHP73 to MySQL -->
|
||||
<line x1="677" y1="250" x2="400" y2="340" stroke="#64B5F6" stroke-width="1.2" opacity="0.35" marker-end="url(#arrowHead)"/>
|
||||
|
||||
<!-- phpMyAdmin to MySQL -->
|
||||
<line x1="450" y1="375" x2="415" y2="375" stroke="#ef5350" stroke-width="1.5" opacity="0.5" marker-end="url(#arrowHead)"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<g transform="translate(40, 420)">
|
||||
<rect x="0" y="0" width="720" height="35" rx="6" fill="#0f172a" opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="20" cy="18" r="5" fill="#66bb6a"/>
|
||||
<text x="32" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">Nginx 라우팅</text>
|
||||
<circle cx="130" cy="18" r="5" fill="#2196F3"/>
|
||||
<text x="142" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">API</text>
|
||||
<circle cx="180" cy="18" r="5" fill="#4fc3f7"/>
|
||||
<text x="192" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">MNG</text>
|
||||
<circle cx="240" cy="18" r="5" fill="#ab47bc"/>
|
||||
<text x="252" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">React</text>
|
||||
<circle cx="310" cy="18" r="5" fill="#ff7043"/>
|
||||
<text x="322" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">MySQL</text>
|
||||
<circle cx="385" cy="18" r="5" fill="#ffa726"/>
|
||||
<text x="397" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">Sales</text>
|
||||
<circle cx="450" cy="18" r="5" fill="#78909c"/>
|
||||
<text x="462" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">Design</text>
|
||||
<circle cx="530" cy="18" r="5" fill="#8d6e63"/>
|
||||
<text x="542" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">PHP 7.3 (Legacy)</text>
|
||||
<circle cx="655" cy="18" r="5" fill="#ef5350"/>
|
||||
<text x="667" y="22" font-family="Arial, sans-serif" font-size="10" fill="#94a3b8">phpMyAdmin</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
151
public/images/academy/docker-environment/4.svg
Normal file
151
public/images/academy/docker-environment/4.svg
Normal file
@@ -0,0 +1,151 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg4" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="glow4">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<marker id="arrow4" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<path d="M0,0 L10,3.5 L0,7 Z" fill="#2196F3"/>
|
||||
</marker>
|
||||
<marker id="arrow4return" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
|
||||
<path d="M10,0 L0,3.5 L10,7 Z" fill="#4caf50" opacity="0.6"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg4)"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="35" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="20" font-weight="bold" fill="#fff" text-anchor="middle">
|
||||
요청 처리 흐름 (5단계)
|
||||
</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="400" y="58" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="12" fill="#64748b" text-anchor="middle">
|
||||
사용자가 페이지를 열 때 내부에서 일어나는 일
|
||||
</text>
|
||||
|
||||
<!-- Flow line (main horizontal) -->
|
||||
<line x1="90" y1="215" x2="740" y2="215" stroke="#1e3a5f" stroke-width="3" opacity="0.4"/>
|
||||
|
||||
<!-- === Step 1: Browser === -->
|
||||
<g transform="translate(40, 100)">
|
||||
<!-- Step number -->
|
||||
<circle cx="55" cy="0" r="16" fill="#2196F3" filter="url(#glow4)"/>
|
||||
<text x="55" y="5" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#fff" text-anchor="middle">1</text>
|
||||
|
||||
<!-- Laptop icon -->
|
||||
<rect x="15" y="30" width="80" height="55" rx="6" fill="#1e293b" stroke="#2196F3" stroke-width="2"/>
|
||||
<rect x="22" y="37" width="66" height="38" rx="3" fill="#0f172a"/>
|
||||
<text x="55" y="62" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">🌐</text>
|
||||
<path d="M10,85 L100,85 L95,92 L15,92 Z" fill="#334155"/>
|
||||
|
||||
<!-- Label -->
|
||||
<text x="55" y="115" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#2196F3" text-anchor="middle">브라우저</text>
|
||||
<text x="55" y="132" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle">HTTP 요청</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow 1→2 -->
|
||||
<line x1="145" y1="215" x2="195" y2="215" stroke="#2196F3" stroke-width="2.5" marker-end="url(#arrow4)"/>
|
||||
<text x="170" y="205" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">:80</text>
|
||||
|
||||
<!-- === Step 2: Nginx === -->
|
||||
<g transform="translate(198, 100)">
|
||||
<circle cx="55" cy="0" r="16" fill="#2196F3" filter="url(#glow4)"/>
|
||||
<text x="55" y="5" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#fff" text-anchor="middle">2</text>
|
||||
|
||||
<rect x="10" y="30" width="90" height="55" rx="6" fill="#1e293b" stroke="#66bb6a" stroke-width="2"/>
|
||||
<text x="55" y="56" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">🔀</text>
|
||||
<text x="55" y="75" font-family="Arial, sans-serif" font-size="10" fill="#66bb6a" text-anchor="middle">Nginx</text>
|
||||
|
||||
<text x="55" y="115" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#66bb6a" text-anchor="middle">라우팅</text>
|
||||
<text x="55" y="132" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle">URL 분석</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow 2→3 -->
|
||||
<line x1="300" y1="215" x2="350" y2="215" stroke="#2196F3" stroke-width="2.5" marker-end="url(#arrow4)"/>
|
||||
<text x="325" y="205" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">FastCGI</text>
|
||||
|
||||
<!-- === Step 3: PHP-FPM / Node.js === -->
|
||||
<g transform="translate(353, 100)">
|
||||
<circle cx="55" cy="0" r="16" fill="#2196F3" filter="url(#glow4)"/>
|
||||
<text x="55" y="5" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#fff" text-anchor="middle">3</text>
|
||||
|
||||
<rect x="5" y="30" width="100" height="55" rx="6" fill="#1e293b" stroke="#4fc3f7" stroke-width="2"/>
|
||||
<text x="55" y="56" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">⚙️</text>
|
||||
<text x="55" y="75" font-family="Arial, sans-serif" font-size="9" fill="#4fc3f7" text-anchor="middle">PHP-FPM / Node</text>
|
||||
|
||||
<text x="55" y="115" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#4fc3f7" text-anchor="middle">처리 엔진</text>
|
||||
<text x="55" y="132" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle">코드 실행</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow 3→4 -->
|
||||
<line x1="462" y1="215" x2="510" y2="215" stroke="#2196F3" stroke-width="2.5" marker-end="url(#arrow4)"/>
|
||||
|
||||
<!-- === Step 4: Framework === -->
|
||||
<g transform="translate(513, 100)">
|
||||
<circle cx="55" cy="0" r="16" fill="#2196F3" filter="url(#glow4)"/>
|
||||
<text x="55" y="5" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#fff" text-anchor="middle">4</text>
|
||||
|
||||
<rect x="0" y="30" width="110" height="55" rx="6" fill="#1e293b" stroke="#ab47bc" stroke-width="2"/>
|
||||
<text x="55" y="56" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">🏗</text>
|
||||
<text x="55" y="75" font-family="Arial, sans-serif" font-size="9" fill="#ab47bc" text-anchor="middle">Laravel / Next.js</text>
|
||||
|
||||
<text x="55" y="115" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#ab47bc" text-anchor="middle">프레임워크</text>
|
||||
<text x="55" y="132" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle">비즈니스 로직</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow 4→5 -->
|
||||
<line x1="628" y1="215" x2="668" y2="215" stroke="#2196F3" stroke-width="2.5" marker-end="url(#arrow4)"/>
|
||||
<text x="648" y="205" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">SQL</text>
|
||||
|
||||
<!-- === Step 5: MySQL === -->
|
||||
<g transform="translate(672, 100)">
|
||||
<circle cx="50" cy="0" r="16" fill="#2196F3" filter="url(#glow4)"/>
|
||||
<text x="50" y="5" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#fff" text-anchor="middle">5</text>
|
||||
|
||||
<!-- Cylinder -->
|
||||
<rect x="10" y="40" width="80" height="40" rx="4" fill="#1e293b" stroke="#ff7043" stroke-width="2"/>
|
||||
<ellipse cx="50" cy="42" rx="40" ry="10" fill="#1e293b" stroke="#ff7043" stroke-width="2"/>
|
||||
<ellipse cx="50" cy="42" rx="40" ry="10" fill="#ff7043" opacity="0.1"/>
|
||||
<ellipse cx="50" cy="80" rx="40" ry="10" fill="none" stroke="#ff7043" stroke-width="2"/>
|
||||
<text x="50" y="67" font-family="Arial, sans-serif" font-size="11" fill="#ff7043" text-anchor="middle">MySQL</text>
|
||||
|
||||
<text x="50" y="115" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="13" font-weight="bold" fill="#ff7043" text-anchor="middle">데이터</text>
|
||||
<text x="50" y="132" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle">조회/저장</text>
|
||||
</g>
|
||||
|
||||
<!-- === Return path (dashed, bottom) === -->
|
||||
<path d="M720,240 L720,320 L80,320 L80,240" fill="none" stroke="#4caf50" stroke-width="2" stroke-dasharray="8,4" opacity="0.5" marker-end="url(#arrow4return)"/>
|
||||
<text x="400" y="340" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="12" fill="#4caf50" text-anchor="middle" opacity="0.7">
|
||||
응답 반환 (HTML / JSON)
|
||||
</text>
|
||||
|
||||
<!-- Return direction arrows -->
|
||||
<text x="720" y="285" font-family="Arial, sans-serif" font-size="12" fill="#4caf50" opacity="0.5">↓</text>
|
||||
<text x="400" y="315" font-family="Arial, sans-serif" font-size="12" fill="#4caf50" opacity="0.5">←</text>
|
||||
<text x="80" y="285" font-family="Arial, sans-serif" font-size="12" fill="#4caf50" opacity="0.5">↑</text>
|
||||
|
||||
<!-- Example box -->
|
||||
<g transform="translate(60, 370)">
|
||||
<rect x="0" y="0" width="680" height="100" rx="8" fill="#0f172a" opacity="0.8" stroke="#334155" stroke-width="1"/>
|
||||
<text x="20" y="25" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="12" font-weight="bold" fill="#94a3b8">예시: mng.sam-erp.com/dashboard 접속 시</text>
|
||||
|
||||
<text x="20" y="50" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#64748b">
|
||||
<tspan>① 브라우저가 mng.sam-erp.com 으로 HTTP 요청 전송</tspan>
|
||||
</text>
|
||||
<text x="20" y="66" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#64748b">
|
||||
<tspan>② Nginx가 도메인을 보고 MNG 컨테이너로 라우팅</tspan>
|
||||
</text>
|
||||
<text x="20" y="82" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#64748b">
|
||||
<tspan>③ PHP-FPM이 Laravel 코드를 실행 → ④ 대시보드 컨트롤러가 → ⑤ MySQL에서 데이터 조회 후 HTML 반환</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.1 KiB |
199
public/images/academy/docker-environment/5.svg
Normal file
199
public/images/academy/docker-environment/5.svg
Normal file
@@ -0,0 +1,199 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg5" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="glow5">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg5)"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="32" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="20" font-weight="bold" fill="#fff" text-anchor="middle">
|
||||
서비스별 내부 프로세스 구조
|
||||
</text>
|
||||
<text x="400" y="52" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="12" fill="#64748b" text-anchor="middle">
|
||||
Supervisor가 각 컨테이너 안의 프로세스를 관리합니다
|
||||
</text>
|
||||
|
||||
<!-- === MNG Container === -->
|
||||
<g transform="translate(20, 75)">
|
||||
<!-- Container box -->
|
||||
<rect x="0" y="0" width="240" height="380" rx="8" fill="#0f172a" stroke="#4fc3f7" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="240" height="35" rx="8" fill="#4fc3f7" opacity="0.15"/>
|
||||
<rect x="0" y="25" width="240" height="10" fill="#4fc3f7" opacity="0.15"/>
|
||||
<text x="120" y="24" font-family="Arial, sans-serif" font-size="15" font-weight="bold" fill="#4fc3f7" text-anchor="middle">MNG 컨테이너</text>
|
||||
|
||||
<!-- Supervisor -->
|
||||
<rect x="30" y="50" width="180" height="35" rx="6" fill="#1e293b" stroke="#64B5F6" stroke-width="1.5"/>
|
||||
<circle cx="50" cy="68" r="5" fill="#2196F3" filter="url(#glow5)"/>
|
||||
<text x="110" y="72" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#64B5F6" text-anchor="middle">Supervisor</text>
|
||||
|
||||
<!-- Tree lines from Supervisor -->
|
||||
<line x1="120" y1="85" x2="120" y2="105" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="60" y1="105" x2="180" y2="105" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="60" y1="105" x2="60" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="120" y1="105" x2="120" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="180" y1="105" x2="180" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
|
||||
<!-- Nginx process -->
|
||||
<rect x="20" y="115" width="80" height="45" rx="5" fill="#1e293b" stroke="#66bb6a" stroke-width="1.5"/>
|
||||
<circle cx="35" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="60" y="133" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#66bb6a" text-anchor="middle">Nginx</text>
|
||||
<text x="60" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">웹서버</text>
|
||||
|
||||
<!-- PHP-FPM process -->
|
||||
<rect x="80" y="115" width="80" height="45" rx="5" fill="#1e293b" stroke="#ab47bc" stroke-width="1.5"/>
|
||||
<circle cx="95" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="120" y="133" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#ab47bc" text-anchor="middle">PHP-FPM</text>
|
||||
<text x="120" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">PHP 처리</text>
|
||||
|
||||
<!-- Queue Workers -->
|
||||
<!-- Tree lines for queue workers -->
|
||||
<line x1="180" y1="160" x2="180" y2="175" stroke="#334155" stroke-width="1"/>
|
||||
<line x1="150" y1="175" x2="210" y2="175" stroke="#334155" stroke-width="1"/>
|
||||
<line x1="150" y1="175" x2="150" y2="185" stroke="#334155" stroke-width="1"/>
|
||||
<line x1="210" y1="175" x2="210" y2="185" stroke="#334155" stroke-width="1"/>
|
||||
|
||||
<!-- Queue Worker label above -->
|
||||
<rect x="140" y="115" width="80" height="45" rx="5" fill="#1e293b" stroke="#ffa726" stroke-width="1.5"/>
|
||||
<circle cx="155" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="180" y="133" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#ffa726" text-anchor="middle">Queue</text>
|
||||
<text x="180" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">Worker</text>
|
||||
|
||||
<!-- Queue Worker 1 -->
|
||||
<rect x="115" y="185" width="70" height="32" rx="4" fill="#1e293b" stroke="#ffa726" stroke-width="1" opacity="0.8"/>
|
||||
<circle cx="127" cy="201" r="3" fill="#4caf50"/>
|
||||
<text x="155" y="205" font-family="Arial, sans-serif" font-size="9" fill="#ffa726" text-anchor="middle">Worker 1</text>
|
||||
|
||||
<!-- Queue Worker 2 -->
|
||||
<rect x="115" y="222" width="70" height="32" rx="4" fill="#1e293b" stroke="#ffa726" stroke-width="1" opacity="0.8"/>
|
||||
<circle cx="127" cy="238" r="3" fill="#4caf50"/>
|
||||
<text x="155" y="242" font-family="Arial, sans-serif" font-size="9" fill="#ffa726" text-anchor="middle">Worker 2</text>
|
||||
|
||||
<!-- Second tree lines for workers -->
|
||||
<line x1="150" y1="185" x2="150" y2="185" stroke="#334155" stroke-width="1"/>
|
||||
|
||||
<!-- Description -->
|
||||
<rect x="15" y="270" width="210" height="55" rx="4" fill="#1e293b" opacity="0.6"/>
|
||||
<text x="120" y="290" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">관리자 페이지 + 이메일/알림 등</text>
|
||||
<text x="120" y="308" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">백그라운드 작업 처리</text>
|
||||
|
||||
<!-- Port info -->
|
||||
<text x="120" y="355" font-family="Arial, sans-serif" font-size="10" fill="#4fc3f7" text-anchor="middle" opacity="0.7">Port :9001</text>
|
||||
</g>
|
||||
|
||||
<!-- === API Container === -->
|
||||
<g transform="translate(280, 75)">
|
||||
<!-- Container box -->
|
||||
<rect x="0" y="0" width="240" height="380" rx="8" fill="#0f172a" stroke="#2196F3" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="240" height="35" rx="8" fill="#2196F3" opacity="0.15"/>
|
||||
<rect x="0" y="25" width="240" height="10" fill="#2196F3" opacity="0.15"/>
|
||||
<text x="120" y="24" font-family="Arial, sans-serif" font-size="15" font-weight="bold" fill="#2196F3" text-anchor="middle">API 컨테이너</text>
|
||||
|
||||
<!-- Supervisor -->
|
||||
<rect x="30" y="50" width="180" height="35" rx="6" fill="#1e293b" stroke="#64B5F6" stroke-width="1.5"/>
|
||||
<circle cx="50" cy="68" r="5" fill="#2196F3" filter="url(#glow5)"/>
|
||||
<text x="110" y="72" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#64B5F6" text-anchor="middle">Supervisor</text>
|
||||
|
||||
<!-- Tree lines from Supervisor -->
|
||||
<line x1="120" y1="85" x2="120" y2="105" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="40" y1="105" x2="200" y2="105" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="40" y1="105" x2="40" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="93" y1="105" x2="93" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="147" y1="105" x2="147" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="200" y1="105" x2="200" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
|
||||
<!-- Nginx process -->
|
||||
<rect x="10" y="115" width="60" height="45" rx="5" fill="#1e293b" stroke="#66bb6a" stroke-width="1.5"/>
|
||||
<circle cx="22" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="40" y="133" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#66bb6a" text-anchor="middle">Nginx</text>
|
||||
<text x="40" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">웹서버</text>
|
||||
|
||||
<!-- PHP-FPM process -->
|
||||
<rect x="62" y="115" width="62" height="45" rx="5" fill="#1e293b" stroke="#ab47bc" stroke-width="1.5"/>
|
||||
<circle cx="74" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="93" y="133" font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#ab47bc" text-anchor="middle">PHP-FPM</text>
|
||||
<text x="93" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">PHP 처리</text>
|
||||
|
||||
<!-- Queue Worker -->
|
||||
<rect x="117" y="115" width="60" height="45" rx="5" fill="#1e293b" stroke="#ffa726" stroke-width="1.5"/>
|
||||
<circle cx="129" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="147" y="133" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#ffa726" text-anchor="middle">Queue</text>
|
||||
<text x="147" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">Worker</text>
|
||||
|
||||
<!-- Scheduler -->
|
||||
<rect x="170" y="115" width="62" height="45" rx="5" fill="#1e293b" stroke="#ef5350" stroke-width="1.5"/>
|
||||
<circle cx="182" cy="130" r="4" fill="#4caf50"/>
|
||||
<text x="201" y="133" font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#ef5350" text-anchor="middle">Scheduler</text>
|
||||
<text x="201" y="150" font-family="Arial, sans-serif" font-size="8" fill="#64748b" text-anchor="middle">크론작업</text>
|
||||
|
||||
<!-- Scheduler details -->
|
||||
<rect x="155" y="175" width="78" height="55" rx="4" fill="#1e293b" stroke="#ef5350" stroke-width="1" opacity="0.6"/>
|
||||
<text x="194" y="192" font-family="Arial, sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">매 1분 실행</text>
|
||||
<text x="194" y="207" font-family="Arial, sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">예약 작업 관리</text>
|
||||
<text x="194" y="222" font-family="Arial, sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">알림, 동기화 등</text>
|
||||
<line x1="200" y1="160" x2="194" y2="175" stroke="#ef5350" stroke-width="1" opacity="0.4"/>
|
||||
|
||||
<!-- Description -->
|
||||
<rect x="15" y="270" width="210" height="55" rx="4" fill="#1e293b" opacity="0.6"/>
|
||||
<text x="120" y="290" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">REST API 서비스 + 스케줄러</text>
|
||||
<text x="120" y="308" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">데이터 처리, 인증, 파일 관리</text>
|
||||
|
||||
<!-- Port info -->
|
||||
<text x="120" y="355" font-family="Arial, sans-serif" font-size="10" fill="#2196F3" text-anchor="middle" opacity="0.7">Port :9000</text>
|
||||
</g>
|
||||
|
||||
<!-- === React Container === -->
|
||||
<g transform="translate(540, 75)">
|
||||
<!-- Container box -->
|
||||
<rect x="0" y="0" width="240" height="380" rx="8" fill="#0f172a" stroke="#ab47bc" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="240" height="35" rx="8" fill="#ab47bc" opacity="0.15"/>
|
||||
<rect x="0" y="25" width="240" height="10" fill="#ab47bc" opacity="0.15"/>
|
||||
<text x="120" y="24" font-family="Arial, sans-serif" font-size="15" font-weight="bold" fill="#ab47bc" text-anchor="middle">React 컨테이너</text>
|
||||
|
||||
<!-- Node.js -->
|
||||
<rect x="30" y="50" width="180" height="35" rx="6" fill="#1e293b" stroke="#66bb6a" stroke-width="1.5"/>
|
||||
<circle cx="50" cy="68" r="5" fill="#66bb6a" filter="url(#glow5)"/>
|
||||
<text x="110" y="72" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#66bb6a" text-anchor="middle">Node.js</text>
|
||||
|
||||
<!-- Tree line -->
|
||||
<line x1="120" y1="85" x2="120" y2="115" stroke="#334155" stroke-width="1.5"/>
|
||||
|
||||
<!-- Next.js Server -->
|
||||
<rect x="30" y="115" width="180" height="55" rx="6" fill="#1e293b" stroke="#ab47bc" stroke-width="1.5"/>
|
||||
<circle cx="50" cy="135" r="4" fill="#4caf50"/>
|
||||
<text x="120" y="138" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#ab47bc" text-anchor="middle">Next.js Server</text>
|
||||
<text x="120" y="158" font-family="Arial, sans-serif" font-size="9" fill="#64748b" text-anchor="middle">SSR + Static Pages</text>
|
||||
|
||||
<!-- Note: simpler structure -->
|
||||
<rect x="30" y="190" width="180" height="40" rx="4" fill="#1e293b" stroke="#334155" stroke-width="1" stroke-dasharray="4,2"/>
|
||||
<text x="120" y="210" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle" opacity="0.8">Supervisor 없이 단일 프로세스</text>
|
||||
<text x="120" y="225" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#64748b" text-anchor="middle" opacity="0.6">(Node.js가 직접 관리)</text>
|
||||
|
||||
<!-- Description -->
|
||||
<rect x="15" y="270" width="210" height="55" rx="4" fill="#1e293b" opacity="0.6"/>
|
||||
<text x="120" y="290" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">사용자 화면 (고객 앱)</text>
|
||||
<text x="120" y="308" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">서버사이드 렌더링 + 정적 페이지</text>
|
||||
|
||||
<!-- Port info -->
|
||||
<text x="120" y="355" font-family="Arial, sans-serif" font-size="10" fill="#ab47bc" text-anchor="middle" opacity="0.7">Port :3000</text>
|
||||
</g>
|
||||
|
||||
<!-- Status legend -->
|
||||
<g transform="translate(250, 470)">
|
||||
<circle cx="0" cy="0" r="5" fill="#4caf50"/>
|
||||
<text x="10" y="4" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#94a3b8">= 실행중 (Running)</text>
|
||||
|
||||
<rect x="160" y="-8" width="12" height="12" rx="2" fill="none" stroke="#64B5F6" stroke-width="1.5"/>
|
||||
<text x="178" y="4" font-family="'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" font-size="11" fill="#94a3b8">= Supervisor 관리 프로세스</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user