feat: [academy] Nginx 백과사전 SVG 일러스트 5~8번 추가
- 5.svg: Forward Proxy vs Reverse Proxy 비교 다이어그램 - 6.svg: SAM 5개 도메인 라우팅 맵 - 7.svg: 2계층 Nginx 아키텍처 건물 단면도 - 8.svg: SSL/TLS 봉투 자물쇠 비유
This commit is contained in:
김보곤
211
public/images/academy/nginx-encyclopedia/5.svg
Normal file
211
public/images/academy/nginx-encyclopedia/5.svg
Normal file
@@ -0,0 +1,211 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
|
||||
<defs>
|
||||
<linearGradient id="bg5" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0e3c4a"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="fwdGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.9"/>
|
||||
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="revGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.9"/>
|
||||
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:0.9"/>
|
||||
</linearGradient>
|
||||
<filter id="glow5">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shadow5">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg5)"/>
|
||||
<!-- Grid pattern -->
|
||||
<g opacity="0.04">
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(50,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(100,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(150,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(200,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(250,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(300,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(350,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(400,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(450,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(500,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(550,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(600,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(650,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(700,0)"/>
|
||||
<line x1="0" y1="0" x2="0" y2="500" stroke="#22d3ee" stroke-width="1" transform="translate(750,0)"/>
|
||||
<line x1="0" y1="50" x2="800" y2="50" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="100" x2="800" y2="100" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="150" x2="800" y2="150" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="200" x2="800" y2="200" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="250" x2="800" y2="250" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="300" x2="800" y2="300" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="350" x2="800" y2="350" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="400" x2="800" y2="400" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="450" x2="800" y2="450" stroke="#22d3ee" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="42" font-family="sans-serif" font-size="22" font-weight="bold" fill="#22d3ee" text-anchor="middle" filter="url(#glow5)">Forward Proxy vs Reverse Proxy</text>
|
||||
|
||||
<!-- Center VS divider -->
|
||||
<line x1="400" y1="60" x2="400" y2="470" stroke="#334155" stroke-width="2" stroke-dasharray="6,4"/>
|
||||
<circle cx="400" cy="240" r="28" fill="#1e293b" stroke="#67e8f9" stroke-width="2"/>
|
||||
<text x="400" y="246" font-family="sans-serif" font-size="18" font-weight="bold" fill="#67e8f9" text-anchor="middle">VS</text>
|
||||
|
||||
<!-- ==================== LEFT: Forward Proxy ==================== -->
|
||||
<text x="200" y="80" font-family="sans-serif" font-size="17" font-weight="bold" fill="#fbbf24" text-anchor="middle">Forward Proxy</text>
|
||||
|
||||
<!-- Users (left side) -->
|
||||
<!-- User 1 -->
|
||||
<g transform="translate(55, 140)">
|
||||
<rect x="0" y="0" width="60" height="42" rx="6" fill="#1e293b" stroke="#fbbf24" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<circle cx="30" cy="12" r="7" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<path d="M18 32 Q30 22 42 32" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<text x="30" y="40" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">사용자A</text>
|
||||
</g>
|
||||
<!-- User 2 -->
|
||||
<g transform="translate(55, 200)">
|
||||
<rect x="0" y="0" width="60" height="42" rx="6" fill="#1e293b" stroke="#fbbf24" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<circle cx="30" cy="12" r="7" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<path d="M18 32 Q30 22 42 32" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<text x="30" y="40" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">사용자B</text>
|
||||
</g>
|
||||
<!-- User 3 -->
|
||||
<g transform="translate(55, 260)">
|
||||
<rect x="0" y="0" width="60" height="42" rx="6" fill="#1e293b" stroke="#fbbf24" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<circle cx="30" cy="12" r="7" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<path d="M18 32 Q30 22 42 32" fill="none" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<text x="30" y="40" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">사용자C</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrows from users to proxy -->
|
||||
<line x1="120" y1="161" x2="158" y2="220" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
|
||||
<line x1="120" y1="221" x2="158" y2="235" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
|
||||
<line x1="120" y1="281" x2="158" y2="250" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
|
||||
|
||||
<defs>
|
||||
<marker id="arrowAmber" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
<marker id="arrowCyan" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#22d3ee"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Forward Proxy Box -->
|
||||
<rect x="160" y="195" width="100" height="80" rx="10" fill="url(#fwdGrad)" filter="url(#shadow5)"/>
|
||||
<text x="210" y="226" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">Forward</text>
|
||||
<text x="210" y="243" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">Proxy</text>
|
||||
<!-- Shield icon -->
|
||||
<path d="M202 255 L210 252 L218 255 L218 263 Q210 270 202 263Z" fill="none" stroke="#fff" stroke-width="1.2"/>
|
||||
|
||||
<!-- Arrow from proxy to internet -->
|
||||
<line x1="265" y1="235" x2="298" y2="235" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowAmber)"/>
|
||||
|
||||
<!-- Internet/Servers (Forward side) -->
|
||||
<g transform="translate(300, 155)">
|
||||
<rect x="0" y="0" width="80" height="160" rx="8" fill="#1e293b" stroke="#475569" stroke-width="1.5" stroke-dasharray="4,3" filter="url(#shadow5)"/>
|
||||
<text x="40" y="22" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">인터넷</text>
|
||||
<!-- Server icons -->
|
||||
<rect x="15" y="35" width="50" height="28" rx="4" fill="#0f172a" stroke="#64748b" stroke-width="1"/>
|
||||
<circle cx="55" cy="49" r="3" fill="#4ade80"/>
|
||||
<text x="35" y="53" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">서버1</text>
|
||||
|
||||
<rect x="15" y="72" width="50" height="28" rx="4" fill="#0f172a" stroke="#64748b" stroke-width="1"/>
|
||||
<circle cx="55" cy="86" r="3" fill="#4ade80"/>
|
||||
<text x="35" y="90" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">서버2</text>
|
||||
|
||||
<rect x="15" y="109" width="50" height="28" rx="4" fill="#0f172a" stroke="#64748b" stroke-width="1"/>
|
||||
<circle cx="55" cy="123" r="3" fill="#4ade80"/>
|
||||
<text x="35" y="127" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">서버3</text>
|
||||
</g>
|
||||
|
||||
<!-- Forward Proxy description bubble -->
|
||||
<rect x="80" y="360" width="240" height="55" rx="10" fill="#1e293b" stroke="#fbbf24" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="200" y="383" font-family="sans-serif" font-size="13" fill="#fbbf24" text-anchor="middle" font-weight="bold">"나 대신 밖에 나가서</text>
|
||||
<text x="200" y="402" font-family="sans-serif" font-size="13" fill="#fbbf24" text-anchor="middle" font-weight="bold">가져와줘"</text>
|
||||
|
||||
<!-- Forward features -->
|
||||
<text x="80" y="438" font-family="sans-serif" font-size="10" fill="#94a3b8">• 사용자 IP 숨기기</text>
|
||||
<text x="80" y="454" font-family="sans-serif" font-size="10" fill="#94a3b8">• 접근 제한 우회</text>
|
||||
<text x="80" y="470" font-family="sans-serif" font-size="10" fill="#94a3b8">• 콘텐츠 캐싱</text>
|
||||
|
||||
<!-- ==================== RIGHT: Reverse Proxy ==================== -->
|
||||
<text x="600" y="80" font-family="sans-serif" font-size="17" font-weight="bold" fill="#22d3ee" text-anchor="middle">Reverse Proxy</text>
|
||||
|
||||
<!-- Internet/Users (right side) -->
|
||||
<g transform="translate(425, 155)">
|
||||
<rect x="0" y="0" width="80" height="160" rx="8" fill="#1e293b" stroke="#475569" stroke-width="1.5" stroke-dasharray="4,3" filter="url(#shadow5)"/>
|
||||
<text x="40" y="22" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">인터넷</text>
|
||||
<!-- User icons -->
|
||||
<circle cx="40" cy="48" r="8" fill="none" stroke="#67e8f9" stroke-width="1.2"/>
|
||||
<path d="M26 68 Q40 56 54 68" fill="none" stroke="#67e8f9" stroke-width="1.2"/>
|
||||
<text x="40" y="80" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">사용자들</text>
|
||||
|
||||
<circle cx="40" cy="105" r="8" fill="none" stroke="#67e8f9" stroke-width="1.2"/>
|
||||
<path d="M26 125 Q40 113 54 125" fill="none" stroke="#67e8f9" stroke-width="1.2"/>
|
||||
<text x="40" y="137" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">클라이언트</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow from internet to proxy -->
|
||||
<line x1="510" y1="235" x2="538" y2="235" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowCyan)"/>
|
||||
|
||||
<!-- Reverse Proxy Box -->
|
||||
<rect x="540" y="195" width="100" height="80" rx="10" fill="url(#revGrad)" filter="url(#shadow5)"/>
|
||||
<text x="590" y="226" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">Reverse</text>
|
||||
<text x="590" y="243" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fff" text-anchor="middle">Proxy</text>
|
||||
<!-- Shield icon -->
|
||||
<path d="M582 255 L590 252 L598 255 L598 263 Q590 270 582 263Z" fill="none" stroke="#fff" stroke-width="1.2"/>
|
||||
|
||||
<!-- Arrows from proxy to servers -->
|
||||
<line x1="645" y1="220" x2="688" y2="170" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowCyan)"/>
|
||||
<line x1="645" y1="235" x2="688" y2="235" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowCyan)"/>
|
||||
<line x1="645" y1="250" x2="688" y2="296" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowCyan)"/>
|
||||
|
||||
<!-- Servers (right side) -->
|
||||
<!-- Server 1 -->
|
||||
<g transform="translate(690, 145)">
|
||||
<rect x="0" y="0" width="65" height="40" rx="6" fill="#1e293b" stroke="#22d3ee" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<rect x="8" y="8" width="30" height="4" rx="2" fill="#0891b2"/>
|
||||
<rect x="8" y="16" width="20" height="4" rx="2" fill="#0891b2"/>
|
||||
<circle cx="52" cy="14" r="4" fill="#4ade80"/>
|
||||
<text x="32" y="34" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">웹서버1</text>
|
||||
</g>
|
||||
<!-- Server 2 -->
|
||||
<g transform="translate(690, 215)">
|
||||
<rect x="0" y="0" width="65" height="40" rx="6" fill="#1e293b" stroke="#22d3ee" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<rect x="8" y="8" width="30" height="4" rx="2" fill="#0891b2"/>
|
||||
<rect x="8" y="16" width="20" height="4" rx="2" fill="#0891b2"/>
|
||||
<circle cx="52" cy="14" r="4" fill="#4ade80"/>
|
||||
<text x="32" y="34" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">웹서버2</text>
|
||||
</g>
|
||||
<!-- Server 3 -->
|
||||
<g transform="translate(690, 285)">
|
||||
<rect x="0" y="0" width="65" height="40" rx="6" fill="#1e293b" stroke="#22d3ee" stroke-width="1.5" filter="url(#shadow5)"/>
|
||||
<rect x="8" y="8" width="30" height="4" rx="2" fill="#0891b2"/>
|
||||
<rect x="8" y="16" width="20" height="4" rx="2" fill="#0891b2"/>
|
||||
<circle cx="52" cy="14" r="4" fill="#4ade80"/>
|
||||
<text x="32" y="34" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">웹서버3</text>
|
||||
</g>
|
||||
|
||||
<!-- Reverse Proxy description bubble -->
|
||||
<rect x="480" y="360" width="240" height="55" rx="10" fill="#1e293b" stroke="#22d3ee" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="600" y="383" font-family="sans-serif" font-size="13" fill="#22d3ee" text-anchor="middle" font-weight="bold">"손님을 적절한</text>
|
||||
<text x="600" y="402" font-family="sans-serif" font-size="13" fill="#22d3ee" text-anchor="middle" font-weight="bold">담당자에게 안내"</text>
|
||||
|
||||
<!-- Reverse features -->
|
||||
<text x="485" y="438" font-family="sans-serif" font-size="10" fill="#94a3b8">• 서버 IP 숨기기</text>
|
||||
<text x="485" y="454" font-family="sans-serif" font-size="10" fill="#94a3b8">• 로드밸런싱</text>
|
||||
<text x="485" y="470" font-family="sans-serif" font-size="10" fill="#94a3b8">• SSL 종료 / 캐싱</text>
|
||||
|
||||
<!-- Nginx badge -->
|
||||
<rect x="540" y="100" width="100" height="24" rx="12" fill="#0891b2" fill-opacity="0.2" stroke="#22d3ee" stroke-width="1"/>
|
||||
<text x="590" y="116" font-family="sans-serif" font-size="11" fill="#22d3ee" text-anchor="middle" font-weight="bold">Nginx = 이것!</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
157
public/images/academy/nginx-encyclopedia/6.svg
Normal file
157
public/images/academy/nginx-encyclopedia/6.svg
Normal file
@@ -0,0 +1,157 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
|
||||
<defs>
|
||||
<linearGradient id="bg6" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0e3c4a"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<filter id="glow6">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shadow6">
|
||||
<feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<marker id="arr6cyan" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#22d3ee"/>
|
||||
</marker>
|
||||
<marker id="arr6blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#60a5fa"/>
|
||||
</marker>
|
||||
<marker id="arr6green" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#4ade80"/>
|
||||
</marker>
|
||||
<marker id="arr6purple" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#a78bfa"/>
|
||||
</marker>
|
||||
<marker id="arr6amber" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
<marker id="arr6red" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#f87171"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg6)"/>
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.03">
|
||||
<line x1="100" y1="0" x2="100" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="200" y1="0" x2="200" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="300" y1="0" x2="300" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="400" y1="0" x2="400" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="500" y1="0" x2="500" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="600" y1="0" x2="600" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="700" y1="0" x2="700" y2="500" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="100" x2="800" y2="100" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="200" x2="800" y2="200" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="300" x2="800" y2="300" stroke="#22d3ee" stroke-width="1"/>
|
||||
<line x1="0" y1="400" x2="800" y2="400" stroke="#22d3ee" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="38" font-family="sans-serif" font-size="22" font-weight="bold" fill="#22d3ee" text-anchor="middle" filter="url(#glow6)">SAM 5개 도메인 라우팅 맵</text>
|
||||
|
||||
<!-- Internet Cloud -->
|
||||
<g transform="translate(400, 82)">
|
||||
<!-- Cloud shape -->
|
||||
<ellipse cx="0" cy="0" rx="65" ry="28" fill="#1e293b" stroke="#475569" stroke-width="1.5"/>
|
||||
<ellipse cx="-30" cy="5" rx="30" ry="20" fill="#1e293b" stroke="#475569" stroke-width="1.5"/>
|
||||
<ellipse cx="30" cy="5" rx="30" ry="20" fill="#1e293b" stroke="#475569" stroke-width="1.5"/>
|
||||
<ellipse cx="0" cy="10" rx="50" ry="18" fill="#1e293b"/>
|
||||
<ellipse cx="0" cy="-5" rx="40" ry="22" fill="#1e293b"/>
|
||||
<text x="0" y="5" font-family="sans-serif" font-size="13" fill="#94a3b8" text-anchor="middle" font-weight="bold">인터넷</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow from cloud to nginx -->
|
||||
<line x1="400" y1="112" x2="400" y2="150" stroke="#67e8f9" stroke-width="2" marker-end="url(#arr6cyan)"/>
|
||||
<text x="420" y="137" font-family="sans-serif" font-size="9" fill="#475569">HTTPS :443</text>
|
||||
|
||||
<!-- External Nginx Box -->
|
||||
<rect x="200" y="155" width="400" height="78" rx="12" fill="#0f172a" stroke="#22d3ee" stroke-width="2.5" filter="url(#shadow6)"/>
|
||||
<!-- Nginx icon bar -->
|
||||
<rect x="200" y="155" width="400" height="26" rx="12" fill="#0891b2" fill-opacity="0.15"/>
|
||||
<rect x="200" y="170" width="400" height="11" rx="0" fill="#0891b2" fill-opacity="0.15"/>
|
||||
<!-- Green dot -->
|
||||
<circle cx="220" cy="168" r="5" fill="#4ade80"/>
|
||||
<text x="400" y="172" font-family="sans-serif" font-size="14" font-weight="bold" fill="#22d3ee" text-anchor="middle">외부 Nginx (Reverse Proxy)</text>
|
||||
<text x="400" y="195" font-family="sans-serif" font-size="11" fill="#67e8f9" text-anchor="middle">SSL 종료 + 도메인 기반 라우팅</text>
|
||||
<text x="400" y="212" font-family="sans-serif" font-size="10" fill="#475569" text-anchor="middle">*.sam.kr 와일드카드 인증서</text>
|
||||
|
||||
<!-- 5 arrows down from nginx -->
|
||||
<!-- dev.sam.kr -->
|
||||
<line x1="110" y1="233" x2="110" y2="295" stroke="#60a5fa" stroke-width="2" marker-end="url(#arr6blue)"/>
|
||||
<text x="110" y="262" font-family="sans-serif" font-size="8" fill="#60a5fa" text-anchor="middle" transform="rotate(-90, 95, 262)">:3000</text>
|
||||
<!-- api.sam.kr -->
|
||||
<line x1="270" y1="233" x2="270" y2="295" stroke="#4ade80" stroke-width="2" marker-end="url(#arr6green)"/>
|
||||
<text x="270" y="262" font-family="sans-serif" font-size="8" fill="#4ade80" text-anchor="middle" transform="rotate(-90, 255, 262)">:8001</text>
|
||||
<!-- mng.sam.kr -->
|
||||
<line x1="400" y1="233" x2="400" y2="295" stroke="#a78bfa" stroke-width="2" marker-end="url(#arr6purple)"/>
|
||||
<text x="400" y="262" font-family="sans-serif" font-size="8" fill="#a78bfa" text-anchor="middle" transform="rotate(-90, 385, 262)">:8002</text>
|
||||
<!-- sales.sam.kr -->
|
||||
<line x1="530" y1="233" x2="530" y2="295" stroke="#fbbf24" stroke-width="2" marker-end="url(#arr6amber)"/>
|
||||
<text x="530" y="262" font-family="sans-serif" font-size="8" fill="#fbbf24" text-anchor="middle" transform="rotate(-90, 515, 262)">:8003</text>
|
||||
<!-- 5130.sam.kr -->
|
||||
<line x1="680" y1="233" x2="680" y2="295" stroke="#f87171" stroke-width="2" marker-end="url(#arr6red)"/>
|
||||
<text x="680" y="262" font-family="sans-serif" font-size="8" fill="#f87171" text-anchor="middle" transform="rotate(-90, 665, 262)">:8080</text>
|
||||
|
||||
<!-- Service Box 1: dev.sam.kr - React -->
|
||||
<rect x="40" y="300" width="140" height="108" rx="10" fill="#1e293b" stroke="#60a5fa" stroke-width="2" filter="url(#shadow6)"/>
|
||||
<rect x="40" y="300" width="140" height="28" rx="10" fill="#60a5fa" fill-opacity="0.15"/>
|
||||
<rect x="40" y="318" width="140" height="10" rx="0" fill="#60a5fa" fill-opacity="0.15"/>
|
||||
<text x="110" y="319" font-family="sans-serif" font-size="11" font-weight="bold" fill="#60a5fa" text-anchor="middle">dev.sam.kr</text>
|
||||
<text x="110" y="350" font-family="sans-serif" font-size="13" font-weight="bold" fill="#e2e8f0" text-anchor="middle">React</text>
|
||||
<text x="110" y="368" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(Next.js 15)</text>
|
||||
<!-- React icon simplified -->
|
||||
<circle cx="110" cy="390" r="8" fill="none" stroke="#60a5fa" stroke-width="1"/>
|
||||
<ellipse cx="110" cy="390" rx="16" ry="6" fill="none" stroke="#60a5fa" stroke-width="0.8" transform="rotate(30,110,390)"/>
|
||||
<ellipse cx="110" cy="390" rx="16" ry="6" fill="none" stroke="#60a5fa" stroke-width="0.8" transform="rotate(-30,110,390)"/>
|
||||
|
||||
<!-- Service Box 2: api.sam.kr - API -->
|
||||
<rect x="200" y="300" width="140" height="108" rx="10" fill="#1e293b" stroke="#4ade80" stroke-width="2" filter="url(#shadow6)"/>
|
||||
<rect x="200" y="300" width="140" height="28" rx="10" fill="#4ade80" fill-opacity="0.15"/>
|
||||
<rect x="200" y="318" width="140" height="10" rx="0" fill="#4ade80" fill-opacity="0.15"/>
|
||||
<text x="270" y="319" font-family="sans-serif" font-size="11" font-weight="bold" fill="#4ade80" text-anchor="middle">api.sam.kr</text>
|
||||
<text x="270" y="350" font-family="sans-serif" font-size="13" font-weight="bold" fill="#e2e8f0" text-anchor="middle">API</text>
|
||||
<text x="270" y="368" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(Laravel 11)</text>
|
||||
<!-- API icon -->
|
||||
<text x="270" y="396" font-family="sans-serif" font-size="16" fill="#4ade80" text-anchor="middle">{ }</text>
|
||||
|
||||
<!-- Service Box 3: mng.sam.kr - MNG -->
|
||||
<rect x="360" y="300" width="140" height="108" rx="10" fill="#1e293b" stroke="#a78bfa" stroke-width="2" filter="url(#shadow6)"/>
|
||||
<rect x="360" y="300" width="140" height="28" rx="10" fill="#a78bfa" fill-opacity="0.15"/>
|
||||
<rect x="360" y="318" width="140" height="10" rx="0" fill="#a78bfa" fill-opacity="0.15"/>
|
||||
<text x="430" y="319" font-family="sans-serif" font-size="11" font-weight="bold" fill="#a78bfa" text-anchor="middle">mng.sam.kr</text>
|
||||
<text x="430" y="350" font-family="sans-serif" font-size="13" font-weight="bold" fill="#e2e8f0" text-anchor="middle">MNG</text>
|
||||
<text x="430" y="368" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(Laravel 11)</text>
|
||||
<!-- MNG gear icon -->
|
||||
<circle cx="430" cy="392" r="8" fill="none" stroke="#a78bfa" stroke-width="1.5"/>
|
||||
<circle cx="430" cy="392" r="3" fill="#a78bfa"/>
|
||||
|
||||
<!-- Service Box 4: sales.sam.kr - Sales -->
|
||||
<rect x="520" y="300" width="140" height="108" rx="10" fill="#1e293b" stroke="#fbbf24" stroke-width="2" filter="url(#shadow6)"/>
|
||||
<rect x="520" y="300" width="140" height="28" rx="10" fill="#fbbf24" fill-opacity="0.15"/>
|
||||
<rect x="520" y="318" width="140" height="10" rx="0" fill="#fbbf24" fill-opacity="0.15"/>
|
||||
<text x="590" y="319" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fbbf24" text-anchor="middle">sales.sam.kr</text>
|
||||
<text x="590" y="350" font-family="sans-serif" font-size="13" font-weight="bold" fill="#e2e8f0" text-anchor="middle">Sales</text>
|
||||
<text x="590" y="368" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(PHP)</text>
|
||||
<!-- Sales cart icon -->
|
||||
<path d="M578 388 L582 388 L590 398 L600 398" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<circle cx="590" cy="402" r="2.5" fill="#fbbf24"/>
|
||||
<circle cx="598" cy="402" r="2.5" fill="#fbbf24"/>
|
||||
|
||||
<!-- Service Box 5: 5130.sam.kr - Legacy -->
|
||||
<rect x="680" y="300" width="108" height="108" rx="10" fill="#1e293b" stroke="#f87171" stroke-width="2" filter="url(#shadow6)"/>
|
||||
<rect x="680" y="300" width="108" height="28" rx="10" fill="#f87171" fill-opacity="0.15"/>
|
||||
<rect x="680" y="318" width="108" height="10" rx="0" fill="#f87171" fill-opacity="0.15"/>
|
||||
<text x="734" y="319" font-family="sans-serif" font-size="10" font-weight="bold" fill="#f87171" text-anchor="middle">5130.sam.kr</text>
|
||||
<text x="734" y="350" font-family="sans-serif" font-size="13" font-weight="bold" fill="#e2e8f0" text-anchor="middle">레거시</text>
|
||||
<text x="734" y="368" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(PHP 7.3)</text>
|
||||
<!-- Warning icon -->
|
||||
<polygon points="734,382 726,396 742,396" fill="none" stroke="#f87171" stroke-width="1.5"/>
|
||||
<text x="734" y="394" font-family="sans-serif" font-size="9" font-weight="bold" fill="#f87171" text-anchor="middle">!</text>
|
||||
|
||||
<!-- Legend bar at bottom -->
|
||||
<rect x="50" y="425" width="700" height="55" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#1e293b" stroke-width="1"/>
|
||||
<text x="400" y="445" font-family="sans-serif" font-size="11" fill="#67e8f9" text-anchor="middle" font-weight="bold">라우팅 규칙: server_name 기반 분기</text>
|
||||
<text x="400" y="465" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">클라이언트 요청의 Host 헤더를 읽어 → 해당 도메인의 upstream 컨테이너로 proxy_pass</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
160
public/images/academy/nginx-encyclopedia/7.svg
Normal file
160
public/images/academy/nginx-encyclopedia/7.svg
Normal file
@@ -0,0 +1,160 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
|
||||
<defs>
|
||||
<linearGradient id="bg7" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0e3c4a"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="floor1grad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#164e63;stop-opacity:0.4"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a;stop-opacity:0.6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="floor2grad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b;stop-opacity:0.5"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a;stop-opacity:0.6"/>
|
||||
</linearGradient>
|
||||
<filter id="glow7">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shadow7">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
<marker id="arr7" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#22d3ee"/>
|
||||
</marker>
|
||||
<marker id="arr7g" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#4ade80"/>
|
||||
</marker>
|
||||
<marker id="arr7p" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#a78bfa"/>
|
||||
</marker>
|
||||
<marker id="arr7a" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg7)"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="35" font-family="sans-serif" font-size="21" font-weight="bold" fill="#22d3ee" text-anchor="middle" filter="url(#glow7)">2계층 Nginx 아키텍처 (건물 단면도)</text>
|
||||
<text x="400" y="56" font-family="sans-serif" font-size="12" fill="#67e8f9" text-anchor="middle">"경비실(정문) + 각 층 접수 창구" 구조</text>
|
||||
|
||||
<!-- Building outline -->
|
||||
<rect x="50" y="70" width="700" height="420" rx="6" fill="none" stroke="#334155" stroke-width="2" stroke-dasharray="6,3"/>
|
||||
<!-- Roof -->
|
||||
<polygon points="40,70 400,48 760,70" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
|
||||
<text x="400" y="65" font-family="sans-serif" font-size="10" fill="#475569" text-anchor="middle">SAM 서버 건물</text>
|
||||
|
||||
<!-- ============ 1F: External Nginx (정문/경비실) ============ -->
|
||||
<rect x="60" y="340" width="680" height="140" rx="8" fill="url(#floor1grad)" stroke="#22d3ee" stroke-width="2"/>
|
||||
<!-- Floor label -->
|
||||
<rect x="60" y="340" width="60" height="24" rx="4" fill="#0891b2" fill-opacity="0.3"/>
|
||||
<text x="90" y="357" font-family="sans-serif" font-size="12" font-weight="bold" fill="#22d3ee" text-anchor="middle">1층</text>
|
||||
|
||||
<!-- Gate/Entrance icon -->
|
||||
<rect x="90" y="380" width="80" height="70" rx="6" fill="#0f172a" stroke="#22d3ee" stroke-width="2" filter="url(#shadow7)"/>
|
||||
<rect x="105" y="395" width="20" height="40" rx="3" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
|
||||
<rect x="135" y="395" width="20" height="40" rx="3" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
|
||||
<text x="130" y="388" font-family="sans-serif" font-size="8" fill="#22d3ee" text-anchor="middle">정문</text>
|
||||
<!-- Arrow pointing into building -->
|
||||
<line x1="130" y1="468" x2="130" y2="455" stroke="#22d3ee" stroke-width="2" marker-end="url(#arr7)"/>
|
||||
<text x="130" y="482" font-family="sans-serif" font-size="9" fill="#67e8f9" text-anchor="middle">요청 도착</text>
|
||||
|
||||
<!-- External Nginx description -->
|
||||
<rect x="195" y="370" width="240" height="90" rx="8" fill="#0f172a" stroke="#0891b2" stroke-width="1.5"/>
|
||||
<text x="315" y="392" font-family="sans-serif" font-size="14" font-weight="bold" fill="#22d3ee" text-anchor="middle">외부 Nginx</text>
|
||||
<text x="315" y="410" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">(경비실 / 안내 데스크)</text>
|
||||
<line x1="210" y1="418" x2="420" y2="418" stroke="#1e293b" stroke-width="1"/>
|
||||
<text x="220" y="435" font-family="sans-serif" font-size="10" fill="#4ade80">✔ SSL/TLS 종료</text>
|
||||
<text x="220" y="450" font-family="sans-serif" font-size="10" fill="#4ade80">✔ 도메인별 라우팅 (server_name)</text>
|
||||
|
||||
<!-- Guard icon -->
|
||||
<g transform="translate(465, 378)">
|
||||
<rect x="0" y="0" width="60" height="70" rx="6" fill="#0f172a" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<circle cx="30" cy="18" r="10" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<path d="M15 48 Q30 35 45 48" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="30" y="65" font-family="sans-serif" font-size="8" fill="#fbbf24" text-anchor="middle">경비원</text>
|
||||
</g>
|
||||
|
||||
<!-- What does guard do? -->
|
||||
<rect x="545" y="375" width="180" height="75" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<text x="635" y="395" font-family="sans-serif" font-size="9" fill="#fbbf24">"신분증 확인 (SSL)"</text>
|
||||
<text x="635" y="412" font-family="sans-serif" font-size="9" fill="#fbbf24">"어디 가시나요?" (도메인)</text>
|
||||
<text x="635" y="429" font-family="sans-serif" font-size="9" fill="#fbbf24">"2층 해당 창구로 가세요"</text>
|
||||
<text x="635" y="446" font-family="sans-serif" font-size="9" fill="#94a3b8">(proxy_pass → 내부 Nginx)</text>
|
||||
|
||||
<!-- ============ 2F: Internal Nginx rooms ============ -->
|
||||
<rect x="60" y="85" width="680" height="245" rx="8" fill="url(#floor2grad)" stroke="#475569" stroke-width="1.5"/>
|
||||
<!-- Floor label -->
|
||||
<rect x="60" y="85" width="60" height="24" rx="4" fill="#334155"/>
|
||||
<text x="90" y="101" font-family="sans-serif" font-size="12" font-weight="bold" fill="#e2e8f0" text-anchor="middle">2층</text>
|
||||
<text x="400" y="102" font-family="sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">각 서비스별 접수 창구 (내부 Nginx + PHP-FPM)</text>
|
||||
|
||||
<!-- Room 1: API Internal Nginx -->
|
||||
<rect x="80" y="120" width="200" height="190" rx="8" fill="#0f172a" stroke="#4ade80" stroke-width="2" filter="url(#shadow7)"/>
|
||||
<rect x="80" y="120" width="200" height="28" rx="8" fill="#4ade80" fill-opacity="0.15"/>
|
||||
<rect x="80" y="140" width="200" height="8" rx="0" fill="#4ade80" fill-opacity="0.1"/>
|
||||
<text x="180" y="140" font-family="sans-serif" font-size="12" font-weight="bold" fill="#4ade80" text-anchor="middle">API 내부 Nginx</text>
|
||||
<text x="180" y="168" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">api.sam.kr 전담 창구</text>
|
||||
|
||||
<!-- PHP-FPM box inside -->
|
||||
<rect x="105" y="182" width="150" height="50" rx="6" fill="#1e293b" stroke="#4ade80" stroke-width="1" stroke-dasharray="3,2"/>
|
||||
<text x="180" y="204" font-family="sans-serif" font-size="11" font-weight="bold" fill="#4ade80" text-anchor="middle">PHP-FPM</text>
|
||||
<text x="180" y="220" font-family="sans-serif" font-size="9" fill="#94a3b8" text-anchor="middle">fastcgi_pass 127.0.0.1:9000</text>
|
||||
|
||||
<!-- Arrow inside room -->
|
||||
<line x1="180" y1="155" x2="180" y2="178" stroke="#4ade80" stroke-width="1.5" marker-end="url(#arr7g)"/>
|
||||
|
||||
<text x="180" y="258" font-family="sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel 11 (API 서버)</text>
|
||||
<!-- Port label -->
|
||||
<rect x="105" y="268" width="50" height="18" rx="4" fill="#4ade80" fill-opacity="0.15"/>
|
||||
<text x="130" y="281" font-family="sans-serif" font-size="9" fill="#4ade80" text-anchor="middle">:8001</text>
|
||||
|
||||
<!-- Room 2: MNG Internal Nginx -->
|
||||
<rect x="300" y="120" width="200" height="190" rx="8" fill="#0f172a" stroke="#a78bfa" stroke-width="2" filter="url(#shadow7)"/>
|
||||
<rect x="300" y="120" width="200" height="28" rx="8" fill="#a78bfa" fill-opacity="0.15"/>
|
||||
<rect x="300" y="140" width="200" height="8" rx="0" fill="#a78bfa" fill-opacity="0.1"/>
|
||||
<text x="400" y="140" font-family="sans-serif" font-size="12" font-weight="bold" fill="#a78bfa" text-anchor="middle">MNG 내부 Nginx</text>
|
||||
<text x="400" y="168" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">mng.sam.kr 전담 창구</text>
|
||||
|
||||
<!-- PHP-FPM box inside -->
|
||||
<rect x="325" y="182" width="150" height="50" rx="6" fill="#1e293b" stroke="#a78bfa" stroke-width="1" stroke-dasharray="3,2"/>
|
||||
<text x="400" y="204" font-family="sans-serif" font-size="11" font-weight="bold" fill="#a78bfa" text-anchor="middle">PHP-FPM</text>
|
||||
<text x="400" y="220" font-family="sans-serif" font-size="9" fill="#94a3b8" text-anchor="middle">fastcgi_pass + tenant-storage</text>
|
||||
|
||||
<!-- Arrow inside room -->
|
||||
<line x1="400" y1="155" x2="400" y2="178" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arr7p)"/>
|
||||
|
||||
<text x="400" y="258" font-family="sans-serif" font-size="9" fill="#64748b" text-anchor="middle">Laravel 11 (관리자 패널)</text>
|
||||
<rect x="325" y="268" width="50" height="18" rx="4" fill="#a78bfa" fill-opacity="0.15"/>
|
||||
<text x="350" y="281" font-family="sans-serif" font-size="9" fill="#a78bfa" text-anchor="middle">:8002</text>
|
||||
|
||||
<!-- Room 3: Sales Internal Nginx -->
|
||||
<rect x="520" y="120" width="200" height="190" rx="8" fill="#0f172a" stroke="#fbbf24" stroke-width="2" filter="url(#shadow7)"/>
|
||||
<rect x="520" y="120" width="200" height="28" rx="8" fill="#fbbf24" fill-opacity="0.15"/>
|
||||
<rect x="520" y="140" width="200" height="8" rx="0" fill="#fbbf24" fill-opacity="0.1"/>
|
||||
<text x="620" y="140" font-family="sans-serif" font-size="12" font-weight="bold" fill="#fbbf24" text-anchor="middle">Sales 내부 Nginx</text>
|
||||
<text x="620" y="168" font-family="sans-serif" font-size="10" fill="#94a3b8" text-anchor="middle">sales.sam.kr 전담 창구</text>
|
||||
|
||||
<!-- PHP-FPM box inside -->
|
||||
<rect x="545" y="182" width="150" height="50" rx="6" fill="#1e293b" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2"/>
|
||||
<text x="620" y="204" font-family="sans-serif" font-size="11" font-weight="bold" fill="#fbbf24" text-anchor="middle">PHP-FPM</text>
|
||||
<text x="620" y="220" font-family="sans-serif" font-size="9" fill="#94a3b8" text-anchor="middle">fastcgi_pass 127.0.0.1:9000</text>
|
||||
|
||||
<!-- Arrow inside room -->
|
||||
<line x1="620" y1="155" x2="620" y2="178" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arr7a)"/>
|
||||
|
||||
<text x="620" y="258" font-family="sans-serif" font-size="9" fill="#64748b" text-anchor="middle">PHP (영업관리)</text>
|
||||
<rect x="545" y="268" width="50" height="18" rx="4" fill="#fbbf24" fill-opacity="0.15"/>
|
||||
<text x="570" y="281" font-family="sans-serif" font-size="9" fill="#fbbf24" text-anchor="middle">:8003</text>
|
||||
|
||||
<!-- Arrows from 1F to 2F rooms -->
|
||||
<path d="M315 370 L180 315" fill="none" stroke="#4ade80" stroke-width="2" marker-end="url(#arr7g)" stroke-dasharray="5,3"/>
|
||||
<path d="M315 370 L400 315" fill="none" stroke="#a78bfa" stroke-width="2" marker-end="url(#arr7p)" stroke-dasharray="5,3"/>
|
||||
<path d="M315 370 L620 315" fill="none" stroke="#fbbf24" stroke-width="2" marker-end="url(#arr7a)" stroke-dasharray="5,3"/>
|
||||
|
||||
<!-- Floor divider -->
|
||||
<rect x="55" y="332" width="690" height="3" fill="#334155"/>
|
||||
<text x="755" y="337" font-family="sans-serif" font-size="8" fill="#475569" text-anchor="end">층간 경계</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
186
public/images/academy/nginx-encyclopedia/8.svg
Normal file
186
public/images/academy/nginx-encyclopedia/8.svg
Normal file
@@ -0,0 +1,186 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
|
||||
<defs>
|
||||
<linearGradient id="bg8" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0e3c4a"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="dangerGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f87171;stop-opacity:0.15"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="safeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4ade80;stop-opacity:0.15"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<filter id="glow8">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shadow8">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
<marker id="arr8" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<path d="M0,0 L10,3.5 L0,7" fill="#22d3ee"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg8)"/>
|
||||
<!-- Subtle pattern -->
|
||||
<g opacity="0.03">
|
||||
<circle cx="100" cy="100" r="60" fill="none" stroke="#22d3ee" stroke-width="1"/>
|
||||
<circle cx="300" cy="400" r="80" fill="none" stroke="#22d3ee" stroke-width="1"/>
|
||||
<circle cx="600" cy="150" r="50" fill="none" stroke="#22d3ee" stroke-width="1"/>
|
||||
<circle cx="700" cy="350" r="70" fill="none" stroke="#22d3ee" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="38" font-family="sans-serif" font-size="22" font-weight="bold" fill="#22d3ee" text-anchor="middle" filter="url(#glow8)">SSL/TLS - 봉투와 자물쇠 비유</text>
|
||||
<text x="400" y="58" font-family="sans-serif" font-size="12" fill="#67e8f9" text-anchor="middle">HTTP는 열린 편지, HTTPS는 자물쇠 달린 봉투</text>
|
||||
|
||||
<!-- ============ LEFT: HTTP (Open Letter) ============ -->
|
||||
<rect x="40" y="80" width="280" height="290" rx="12" fill="url(#dangerGrad)" stroke="#f87171" stroke-width="1.5" stroke-opacity="0.4"/>
|
||||
<text x="180" y="108" font-family="sans-serif" font-size="16" font-weight="bold" fill="#f87171" text-anchor="middle">HTTP (평문)</text>
|
||||
|
||||
<!-- Open envelope -->
|
||||
<g transform="translate(100, 135)">
|
||||
<!-- Envelope body -->
|
||||
<rect x="0" y="30" width="160" height="100" rx="6" fill="#1e293b" stroke="#f87171" stroke-width="2" filter="url(#shadow8)"/>
|
||||
<!-- Envelope flap (open) -->
|
||||
<polygon points="0,30 80,-15 160,30" fill="#1e293b" stroke="#f87171" stroke-width="2"/>
|
||||
<polygon points="0,30 80,75 160,30" fill="#0f172a" stroke="#f87171" stroke-width="1" opacity="0.5"/>
|
||||
|
||||
<!-- Visible letter content -->
|
||||
<rect x="20" y="48" width="120" height="65" rx="3" fill="#fef3c7" stroke="#d97706" stroke-width="0.5"/>
|
||||
<text x="80" y="65" font-family="sans-serif" font-size="9" fill="#92400e" text-anchor="middle">ID: admin</text>
|
||||
<text x="80" y="78" font-family="sans-serif" font-size="9" fill="#92400e" text-anchor="middle">PW: 1234</text>
|
||||
<text x="80" y="91" font-family="sans-serif" font-size="9" fill="#92400e" text-anchor="middle">카드: 1234-5678-...</text>
|
||||
<text x="80" y="104" font-family="sans-serif" font-size="8" fill="#b45309" text-anchor="middle">--- 내용이 보임! ---</text>
|
||||
</g>
|
||||
|
||||
<!-- Spy/hacker eye icon -->
|
||||
<g transform="translate(120, 285)">
|
||||
<ellipse cx="60" cy="10" rx="30" ry="14" fill="none" stroke="#f87171" stroke-width="1.5"/>
|
||||
<circle cx="60" cy="10" r="7" fill="none" stroke="#f87171" stroke-width="1.5"/>
|
||||
<circle cx="60" cy="10" r="3" fill="#f87171"/>
|
||||
<text x="60" y="38" font-family="sans-serif" font-size="10" fill="#f87171" text-anchor="middle">도청 가능!</text>
|
||||
</g>
|
||||
|
||||
<!-- Danger badge -->
|
||||
<rect x="75" y="335" width="210" height="24" rx="12" fill="#f87171" fill-opacity="0.15" stroke="#f87171" stroke-width="1"/>
|
||||
<text x="180" y="351" font-family="sans-serif" font-size="11" fill="#f87171" text-anchor="middle" font-weight="bold">누구나 내용을 엿볼 수 있음</text>
|
||||
|
||||
<!-- ============ CENTER: SSL/TLS Transformation Arrow ============ -->
|
||||
<g transform="translate(340, 180)">
|
||||
<!-- Big arrow -->
|
||||
<rect x="0" y="0" width="120" height="60" rx="30" fill="#0891b2" fill-opacity="0.2" stroke="#22d3ee" stroke-width="2"/>
|
||||
<text x="60" y="26" font-family="sans-serif" font-size="11" font-weight="bold" fill="#22d3ee" text-anchor="middle">SSL/TLS</text>
|
||||
<text x="60" y="42" font-family="sans-serif" font-size="11" font-weight="bold" fill="#22d3ee" text-anchor="middle">암호화</text>
|
||||
<!-- Arrow right -->
|
||||
<polygon points="120,10 140,30 120,50" fill="#22d3ee" fill-opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Shield icons scattered along center -->
|
||||
<!-- Shield 1 -->
|
||||
<g transform="translate(370, 260)">
|
||||
<path d="M0 5 L12 0 L24 5 L24 16 Q12 24 0 16Z" fill="#0891b2" fill-opacity="0.3" stroke="#22d3ee" stroke-width="1.2"/>
|
||||
<text x="12" y="15" font-family="sans-serif" font-size="8" fill="#22d3ee" text-anchor="middle" font-weight="bold">S</text>
|
||||
</g>
|
||||
<!-- Shield 2 -->
|
||||
<g transform="translate(420, 280)">
|
||||
<path d="M0 5 L12 0 L24 5 L24 16 Q12 24 0 16Z" fill="#0891b2" fill-opacity="0.3" stroke="#22d3ee" stroke-width="1.2"/>
|
||||
<text x="12" y="15" font-family="sans-serif" font-size="8" fill="#22d3ee" text-anchor="middle" font-weight="bold">S</text>
|
||||
</g>
|
||||
|
||||
<!-- Key exchange visual -->
|
||||
<g transform="translate(365, 310)">
|
||||
<rect x="0" y="0" width="70" height="42" rx="6" fill="#0f172a" stroke="#22d3ee" stroke-width="1"/>
|
||||
<!-- Key icon -->
|
||||
<circle cx="20" cy="14" r="6" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<rect x="25" y="12" width="22" height="4" rx="2" fill="#fbbf24"/>
|
||||
<rect x="40" y="12" width="4" height="8" rx="1" fill="#fbbf24"/>
|
||||
<text x="35" y="36" font-family="sans-serif" font-size="7" fill="#94a3b8" text-anchor="middle">키 교환</text>
|
||||
</g>
|
||||
|
||||
<!-- ============ RIGHT: HTTPS (Locked Envelope) ============ -->
|
||||
<rect x="480" y="80" width="280" height="290" rx="12" fill="url(#safeGrad)" stroke="#4ade80" stroke-width="1.5" stroke-opacity="0.4"/>
|
||||
<text x="620" y="108" font-family="sans-serif" font-size="16" font-weight="bold" fill="#4ade80" text-anchor="middle">HTTPS (암호화)</text>
|
||||
|
||||
<!-- Sealed envelope with lock -->
|
||||
<g transform="translate(540, 135)">
|
||||
<!-- Envelope body -->
|
||||
<rect x="0" y="30" width="160" height="100" rx="6" fill="#1e293b" stroke="#4ade80" stroke-width="2" filter="url(#shadow8)"/>
|
||||
<!-- Envelope flap (sealed) -->
|
||||
<polygon points="0,30 80,75 160,30" fill="#1e293b" stroke="#4ade80" stroke-width="2"/>
|
||||
|
||||
<!-- Encrypted content -->
|
||||
<rect x="20" y="48" width="120" height="65" rx="3" fill="#0f172a" stroke="#4ade80" stroke-width="0.5"/>
|
||||
<text x="80" y="65" font-family="monospace" font-size="8" fill="#334155" text-anchor="middle">a7f2$k!9@xP&</text>
|
||||
<text x="80" y="78" font-family="monospace" font-size="8" fill="#334155" text-anchor="middle">Qm#8nL^vR2wZ</text>
|
||||
<text x="80" y="91" font-family="monospace" font-size="8" fill="#334155" text-anchor="middle">*&jK3$pN!fYt</text>
|
||||
<text x="80" y="104" font-family="sans-serif" font-size="8" fill="#4ade80" text-anchor="middle">--- 해독 불가 ---</text>
|
||||
|
||||
<!-- Lock icon on envelope -->
|
||||
<g transform="translate(63, -5)">
|
||||
<rect x="0" y="10" width="24" height="18" rx="4" fill="#fbbf24" stroke="#d97706" stroke-width="1.5"/>
|
||||
<path d="M5 10 L5 4 Q12 -4 19 4 L19 10" fill="none" stroke="#d97706" stroke-width="2"/>
|
||||
<circle cx="12" cy="19" r="3" fill="#92400e"/>
|
||||
<rect x="10" y="19" width="4" height="5" rx="1" fill="#92400e"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Shield blocked icon -->
|
||||
<g transform="translate(560, 285)">
|
||||
<path d="M0 8 L20 0 L40 8 L40 26 Q20 38 0 26Z" fill="#4ade80" fill-opacity="0.2" stroke="#4ade80" stroke-width="1.5"/>
|
||||
<text x="20" y="23" font-family="sans-serif" font-size="14" fill="#4ade80" text-anchor="middle" font-weight="bold">✔</text>
|
||||
<text x="60" y="10" font-family="sans-serif" font-size="9" fill="#94a3b8">도청 불가</text>
|
||||
<text x="60" y="26" font-family="sans-serif" font-size="9" fill="#94a3b8">위변조 방지</text>
|
||||
</g>
|
||||
|
||||
<!-- Safe badge -->
|
||||
<rect x="515" y="335" width="210" height="24" rx="12" fill="#4ade80" fill-opacity="0.15" stroke="#4ade80" stroke-width="1"/>
|
||||
<text x="620" y="351" font-family="sans-serif" font-size="11" fill="#4ade80" text-anchor="middle" font-weight="bold">암호화로 안전하게 보호</text>
|
||||
|
||||
<!-- ============ BOTTOM: TLS Version Badges + Certificate ============ -->
|
||||
<rect x="40" y="388" width="720" height="100" rx="10" fill="#0f172a" fill-opacity="0.7" stroke="#1e293b" stroke-width="1"/>
|
||||
|
||||
<!-- TLS Version badges -->
|
||||
<text x="80" y="413" font-family="sans-serif" font-size="12" font-weight="bold" fill="#67e8f9">TLS 버전</text>
|
||||
|
||||
<!-- TLS 1.0 -->
|
||||
<rect x="80" y="422" width="70" height="24" rx="6" fill="#f87171" fill-opacity="0.15" stroke="#f87171" stroke-width="1"/>
|
||||
<text x="115" y="438" font-family="sans-serif" font-size="10" fill="#f87171" text-anchor="middle">TLS 1.0</text>
|
||||
<text x="115" y="460" font-family="sans-serif" font-size="8" fill="#64748b" text-anchor="middle">폐기</text>
|
||||
|
||||
<!-- TLS 1.1 -->
|
||||
<rect x="165" y="422" width="70" height="24" rx="6" fill="#f87171" fill-opacity="0.15" stroke="#f87171" stroke-width="1"/>
|
||||
<text x="200" y="438" font-family="sans-serif" font-size="10" fill="#f87171" text-anchor="middle">TLS 1.1</text>
|
||||
<text x="200" y="460" font-family="sans-serif" font-size="8" fill="#64748b" text-anchor="middle">폐기</text>
|
||||
|
||||
<!-- TLS 1.2 -->
|
||||
<rect x="250" y="422" width="70" height="24" rx="6" fill="#fbbf24" fill-opacity="0.15" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="285" y="438" font-family="sans-serif" font-size="10" fill="#fbbf24" text-anchor="middle" font-weight="bold">TLS 1.2</text>
|
||||
<text x="285" y="460" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">현재 사용</text>
|
||||
|
||||
<!-- TLS 1.3 -->
|
||||
<rect x="335" y="422" width="70" height="24" rx="6" fill="#4ade80" fill-opacity="0.2" stroke="#4ade80" stroke-width="1.5"/>
|
||||
<text x="370" y="438" font-family="sans-serif" font-size="10" fill="#4ade80" text-anchor="middle" font-weight="bold">TLS 1.3</text>
|
||||
<text x="370" y="460" font-family="sans-serif" font-size="8" fill="#94a3b8" text-anchor="middle">최신/권장</text>
|
||||
|
||||
<!-- Wildcard Certificate -->
|
||||
<g transform="translate(470, 405)">
|
||||
<rect x="0" y="0" width="270" height="70" rx="8" fill="#1e293b" stroke="#22d3ee" stroke-width="1.5"/>
|
||||
<!-- Certificate icon -->
|
||||
<rect x="15" y="10" width="50" height="50" rx="4" fill="#0f172a" stroke="#fbbf24" stroke-width="1.2"/>
|
||||
<circle cx="40" cy="28" r="8" fill="none" stroke="#fbbf24" stroke-width="1"/>
|
||||
<text x="40" y="32" font-family="sans-serif" font-size="8" fill="#fbbf24" text-anchor="middle" font-weight="bold">★</text>
|
||||
<rect x="25" y="42" width="30" height="3" rx="1" fill="#fbbf24" opacity="0.5"/>
|
||||
<rect x="28" y="48" width="24" height="3" rx="1" fill="#fbbf24" opacity="0.3"/>
|
||||
|
||||
<!-- Certificate info -->
|
||||
<text x="85" y="22" font-family="sans-serif" font-size="11" font-weight="bold" fill="#22d3ee">와일드카드 인증서</text>
|
||||
<text x="85" y="40" font-family="monospace" font-size="12" fill="#fbbf24">*.sam.kr</text>
|
||||
<text x="85" y="56" font-family="sans-serif" font-size="9" fill="#94a3b8">하나의 인증서로 모든 서브도메인 보호</text>
|
||||
<text x="85" y="68" font-family="sans-serif" font-size="8" fill="#64748b">dev / api / mng / sales / 5130</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
Reference in New Issue
Block a user