feat: [academy] Docker 환경이해 교육 SVG 이미지 6~10번 추가
- 6.svg: Nginx 도메인-서비스 라우팅 맵 - 7.svg: 볼륨 마운트 구조 (바인드 마운트 vs Docker 볼륨) - 8.svg: .env 로드 흐름 다이어그램 - 9.svg: 로컬 vs 서버 환경 비교 - 10.svg: Docker 명령어 치트시트
This commit is contained in:
김보곤
139
public/images/academy/docker-environment/10.svg
Normal file
139
public/images/academy/docker-environment/10.svg
Normal file
@@ -0,0 +1,139 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg10" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg10)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="36" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">Docker 명령어 치트시트</text>
|
||||
<line x1="260" y1="46" x2="540" y2="46" stroke="#2196F3" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="200" y="52" width="12" height="12" rx="2" fill="none" stroke="#66bb6a" stroke-width="2"/>
|
||||
<text x="218" y="63" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10">안전</text>
|
||||
<rect x="280" y="52" width="12" height="12" rx="2" fill="none" stroke="#ff7043" stroke-width="2"/>
|
||||
<text x="298" y="63" fill="#ffab91" font-family="Arial, sans-serif" font-size="10">주의</text>
|
||||
<rect x="360" y="52" width="12" height="12" rx="2" fill="none" stroke="#ef5350" stroke-width="2"/>
|
||||
<text x="378" y="63" fill="#ef9a9a" font-family="Arial, sans-serif" font-size="10">위험</text>
|
||||
|
||||
<!-- ===== ROW 1 ===== -->
|
||||
<!-- Card 1: 상태 확인 (safe) -->
|
||||
<rect x="20" y="78" width="245" height="92" rx="8" fill="#1b5e20" fill-opacity="0.08" stroke="#66bb6a" stroke-width="2"/>
|
||||
<rect x="30" y="85" width="70" height="18" rx="3" fill="#66bb6a" fill-opacity="0.2"/>
|
||||
<text x="65" y="98" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">안전</text>
|
||||
<text x="110" y="98" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">상태 확인</text>
|
||||
<rect x="30" y="108" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="38" y="123" fill="#4fc3f7" font-family="monospace" font-size="10">docker ps</text>
|
||||
<text x="30" y="148" fill="#78909c" font-family="Arial, sans-serif" font-size="9">실행 중인 컨테이너 목록 확인</text>
|
||||
<text x="30" y="162" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">포트, 상태, 이름 표시</text>
|
||||
|
||||
<!-- Card 2: 로그 확인 (safe) -->
|
||||
<rect x="278" y="78" width="245" height="92" rx="8" fill="#1b5e20" fill-opacity="0.08" stroke="#66bb6a" stroke-width="2"/>
|
||||
<rect x="288" y="85" width="70" height="18" rx="3" fill="#66bb6a" fill-opacity="0.2"/>
|
||||
<text x="323" y="98" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">안전</text>
|
||||
<text x="368" y="98" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">로그 확인</text>
|
||||
<rect x="288" y="108" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="296" y="123" fill="#4fc3f7" font-family="monospace" font-size="10">docker logs sam-api-1</text>
|
||||
<text x="288" y="148" fill="#78909c" font-family="Arial, sans-serif" font-size="9">컨테이너 출력 로그 확인</text>
|
||||
<text x="288" y="162" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">-f 옵션으로 실시간 모니터링</text>
|
||||
|
||||
<!-- Card 3: 컨테이너 접속 (safe) -->
|
||||
<rect x="536" y="78" width="245" height="92" rx="8" fill="#1b5e20" fill-opacity="0.08" stroke="#66bb6a" stroke-width="2"/>
|
||||
<rect x="546" y="85" width="70" height="18" rx="3" fill="#66bb6a" fill-opacity="0.2"/>
|
||||
<text x="581" y="98" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">안전</text>
|
||||
<text x="626" y="98" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">명령어 실행</text>
|
||||
<rect x="546" y="108" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="554" y="123" fill="#4fc3f7" font-family="monospace" font-size="9">docker exec sam-api-1 php artisan ...</text>
|
||||
<text x="546" y="148" fill="#78909c" font-family="Arial, sans-serif" font-size="9">컨테이너 내부에서 명령 실행</text>
|
||||
<text x="546" y="162" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">artisan, composer 등</text>
|
||||
|
||||
<!-- ===== ROW 2 ===== -->
|
||||
<!-- Card 4: 캐시 클리어 (safe) -->
|
||||
<rect x="20" y="183" width="245" height="92" rx="8" fill="#1b5e20" fill-opacity="0.08" stroke="#66bb6a" stroke-width="2"/>
|
||||
<rect x="30" y="190" width="70" height="18" rx="3" fill="#66bb6a" fill-opacity="0.2"/>
|
||||
<text x="65" y="203" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">안전</text>
|
||||
<text x="110" y="203" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">캐시 클리어</text>
|
||||
<rect x="30" y="213" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="38" y="228" fill="#4fc3f7" font-family="monospace" font-size="8">docker exec sam-api-1 php artisan cache:clear</text>
|
||||
<text x="30" y="253" fill="#78909c" font-family="Arial, sans-serif" font-size="9">설정/라우트/뷰 캐시 초기화</text>
|
||||
<text x="30" y="267" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">config:clear, route:clear 도 가능</text>
|
||||
|
||||
<!-- Card 5: 재시작 (caution) -->
|
||||
<rect x="278" y="183" width="245" height="92" rx="8" fill="#bf360c" fill-opacity="0.08" stroke="#ff7043" stroke-width="2"/>
|
||||
<rect x="288" y="190" width="70" height="18" rx="3" fill="#ff7043" fill-opacity="0.2"/>
|
||||
<text x="323" y="203" text-anchor="middle" fill="#ffab91" font-family="Arial, sans-serif" font-size="10" font-weight="bold">주의</text>
|
||||
<text x="368" y="203" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">재시작</text>
|
||||
<rect x="288" y="213" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="296" y="228" fill="#ffcc80" font-family="monospace" font-size="10">docker compose restart</text>
|
||||
<text x="288" y="253" fill="#78909c" font-family="Arial, sans-serif" font-size="9">모든 컨테이너 재시작</text>
|
||||
<text x="288" y="267" fill="#ff8a65" font-family="Arial, sans-serif" font-size="9">서비스 일시 중단 발생</text>
|
||||
|
||||
<!-- Card 6: 마이그레이션 (caution) -->
|
||||
<rect x="536" y="183" width="245" height="92" rx="8" fill="#bf360c" fill-opacity="0.08" stroke="#ff7043" stroke-width="2"/>
|
||||
<rect x="546" y="190" width="70" height="18" rx="3" fill="#ff7043" fill-opacity="0.2"/>
|
||||
<text x="581" y="203" text-anchor="middle" fill="#ffab91" font-family="Arial, sans-serif" font-size="10" font-weight="bold">주의</text>
|
||||
<text x="626" y="203" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">마이그레이션</text>
|
||||
<rect x="546" y="213" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="554" y="228" fill="#ffcc80" font-family="monospace" font-size="8">docker exec sam-api-1 php artisan migrate</text>
|
||||
<text x="546" y="253" fill="#78909c" font-family="Arial, sans-serif" font-size="9">DB 스키마 변경 적용</text>
|
||||
<text x="546" y="267" fill="#ff8a65" font-family="Arial, sans-serif" font-size="9">반드시 API 컨테이너에서 실행!</text>
|
||||
|
||||
<!-- ===== ROW 3 ===== -->
|
||||
<!-- Card 7: composer install (caution) -->
|
||||
<rect x="20" y="288" width="245" height="92" rx="8" fill="#bf360c" fill-opacity="0.08" stroke="#ff7043" stroke-width="2"/>
|
||||
<rect x="30" y="295" width="70" height="18" rx="3" fill="#ff7043" fill-opacity="0.2"/>
|
||||
<text x="65" y="308" text-anchor="middle" fill="#ffab91" font-family="Arial, sans-serif" font-size="10" font-weight="bold">주의</text>
|
||||
<text x="110" y="308" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">의존성 설치</text>
|
||||
<rect x="30" y="318" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="38" y="333" fill="#ffcc80" font-family="monospace" font-size="9">docker exec sam-api-1 composer install</text>
|
||||
<text x="30" y="358" fill="#78909c" font-family="Arial, sans-serif" font-size="9">PHP 패키지 설치/업데이트</text>
|
||||
<text x="30" y="372" fill="#ff8a65" font-family="Arial, sans-serif" font-size="9">pull 후 composer.json 변경 시 실행</text>
|
||||
|
||||
<!-- Card 8: 컨테이너 중지 (danger) -->
|
||||
<rect x="278" y="288" width="245" height="92" rx="8" fill="#b71c1c" fill-opacity="0.08" stroke="#ef5350" stroke-width="2"/>
|
||||
<rect x="288" y="295" width="70" height="18" rx="3" fill="#ef5350" fill-opacity="0.2"/>
|
||||
<text x="323" y="308" text-anchor="middle" fill="#ef9a9a" font-family="Arial, sans-serif" font-size="10" font-weight="bold">위험</text>
|
||||
<text x="368" y="308" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">컨테이너 삭제</text>
|
||||
<rect x="288" y="318" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="296" y="333" fill="#ef9a9a" font-family="monospace" font-size="10">docker compose down -v</text>
|
||||
<text x="288" y="358" fill="#78909c" font-family="Arial, sans-serif" font-size="9">컨테이너 + 볼륨 완전 삭제</text>
|
||||
<text x="288" y="372" fill="#ef5350" font-family="Arial, sans-serif" font-size="9">-v 옵션: DB 데이터도 삭제됨!</text>
|
||||
|
||||
<!-- Card 9: 서버 빌드 (danger) -->
|
||||
<rect x="536" y="288" width="245" height="92" rx="8" fill="#b71c1c" fill-opacity="0.08" stroke="#ef5350" stroke-width="2"/>
|
||||
<rect x="546" y="295" width="70" height="18" rx="3" fill="#ef5350" fill-opacity="0.2"/>
|
||||
<text x="581" y="308" text-anchor="middle" fill="#ef9a9a" font-family="Arial, sans-serif" font-size="10" font-weight="bold">금지</text>
|
||||
<text x="626" y="308" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="12" font-weight="bold">서버 빌드</text>
|
||||
<rect x="546" y="318" width="225" height="22" rx="3" fill="#0f172a" fill-opacity="0.8"/>
|
||||
<text x="554" y="333" fill="#ef9a9a" font-family="monospace" font-size="10">npm run build (서버에서)</text>
|
||||
<text x="546" y="358" fill="#78909c" font-family="Arial, sans-serif" font-size="9">서버 메모리 부족으로 실패 위험</text>
|
||||
<text x="546" y="372" fill="#ef5350" font-family="Arial, sans-serif" font-size="9">반드시 로컬에서 빌드 후 배포!</text>
|
||||
|
||||
<!-- ===== BOTTOM TIP ===== -->
|
||||
<rect x="20" y="395" width="760" height="88" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<text x="40" y="416" fill="#90a4ae" font-family="Arial, sans-serif" font-size="11" font-weight="bold">자주 사용하는 조합:</text>
|
||||
|
||||
<rect x="40" y="425" width="340" height="20" rx="3" fill="#0f172a" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="48" y="439" fill="#4fc3f7" font-family="monospace" font-size="9">docker exec sam-api-1 php artisan config:clear</text>
|
||||
<text x="395" y="439" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">설정 변경 후</text>
|
||||
|
||||
<rect x="40" y="450" width="340" height="20" rx="3" fill="#0f172a" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="48" y="464" fill="#4fc3f7" font-family="monospace" font-size="9">docker exec sam-api-1 php artisan queue:restart</text>
|
||||
<text x="395" y="464" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">큐 워커 갱신</text>
|
||||
|
||||
<rect x="430" y="425" width="340" height="20" rx="3" fill="#0f172a" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="438" y="439" fill="#4fc3f7" font-family="monospace" font-size="9">docker exec sam-mng-1 php artisan view:clear</text>
|
||||
<text x="438" y="452" fill="#546e7a" font-family="Arial, sans-serif" font-size="8"> </text>
|
||||
|
||||
<rect x="430" y="450" width="340" height="20" rx="3" fill="#0f172a" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="438" y="464" fill="#4fc3f7" font-family="monospace" font-size="9">docker logs -f --tail=50 sam-api-1</text>
|
||||
<text x="438" y="477" fill="#546e7a" font-family="Arial, sans-serif" font-size="8"> </text>
|
||||
|
||||
<text x="560" y="439" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">뷰 캐시 초기화</text>
|
||||
<text x="560" y="464" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">최근 50줄 실시간 로그</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
130
public/images/academy/docker-environment/6.svg
Normal file
130
public/images/academy/docker-environment/6.svg
Normal file
@@ -0,0 +1,130 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg6" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<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>
|
||||
<marker id="arrowRight6" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#78909c"/>
|
||||
</marker>
|
||||
<marker id="arrowRightGreen" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#66bb6a"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg6)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="38" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">Nginx 도메인 → 서비스 라우팅 맵</text>
|
||||
<line x1="250" y1="48" x2="550" y2="48" stroke="#2196F3" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Column Labels -->
|
||||
<text x="120" y="75" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="13" font-weight="bold">도메인 (외부 요청)</text>
|
||||
<text x="400" y="75" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="13" font-weight="bold">Nginx 리버스 프록시</text>
|
||||
<text x="680" y="75" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="13" font-weight="bold">서비스 컨테이너</text>
|
||||
|
||||
<!-- Nginx Central Router -->
|
||||
<polygon points="400,110 450,140 450,200 400,230 350,200 350,140" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="2.5"/>
|
||||
<polygon points="400,125 440,148 440,192 400,215 360,192 360,148" fill="#2e7d32" fill-opacity="0.4" stroke="#66bb6a" stroke-width="1" opacity="0.5"/>
|
||||
<text x="400" y="168" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="15" font-weight="bold">Nginx</text>
|
||||
<text x="400" y="186" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="11">:80 / :443</text>
|
||||
|
||||
<!-- Domain boxes (Left) -->
|
||||
<!-- mng.sam.kr -->
|
||||
<rect x="30" y="95" width="170" height="36" rx="6" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1.5"/>
|
||||
<text x="115" y="118" text-anchor="middle" fill="#4fc3f7" font-family="monospace" font-size="13" font-weight="bold">mng.sam.kr</text>
|
||||
|
||||
<!-- api.sam.kr -->
|
||||
<rect x="30" y="145" width="170" height="36" rx="6" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1.5"/>
|
||||
<text x="115" y="168" text-anchor="middle" fill="#4fc3f7" font-family="monospace" font-size="13" font-weight="bold">api.sam.kr</text>
|
||||
|
||||
<!-- app.sam.kr -->
|
||||
<rect x="30" y="195" width="170" height="36" rx="6" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1.5"/>
|
||||
<text x="115" y="218" text-anchor="middle" fill="#4fc3f7" font-family="monospace" font-size="13" font-weight="bold">app.sam.kr</text>
|
||||
|
||||
<!-- admin.sam.kr -->
|
||||
<rect x="30" y="245" width="170" height="36" rx="6" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1.5"/>
|
||||
<text x="115" y="268" text-anchor="middle" fill="#4fc3f7" font-family="monospace" font-size="13" font-weight="bold">admin.sam.kr</text>
|
||||
|
||||
<!-- Service containers (Right) -->
|
||||
<!-- mng:8080 -->
|
||||
<rect x="590" y="95" width="180" height="36" rx="6" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<circle cx="608" cy="113" r="6" fill="#2196F3" opacity="0.7"/>
|
||||
<text x="685" y="118" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">mng:8080</text>
|
||||
|
||||
<!-- api:8080 -->
|
||||
<rect x="590" y="145" width="180" height="36" rx="6" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<circle cx="608" cy="163" r="6" fill="#2196F3" opacity="0.7"/>
|
||||
<text x="685" y="168" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">api:8080</text>
|
||||
|
||||
<!-- react:3000 -->
|
||||
<rect x="590" y="195" width="180" height="36" rx="6" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<circle cx="608" cy="213" r="6" fill="#2196F3" opacity="0.7"/>
|
||||
<text x="685" y="218" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">react:3000</text>
|
||||
|
||||
<!-- admin:8080 -->
|
||||
<rect x="590" y="245" width="180" height="36" rx="6" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<circle cx="608" cy="263" r="6" fill="#2196F3" opacity="0.7"/>
|
||||
<text x="685" y="268" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">admin:8080</text>
|
||||
|
||||
<!-- Arrows: Domain → Nginx -->
|
||||
<line x1="200" y1="113" x2="348" y2="155" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
<line x1="200" y1="163" x2="348" y2="168" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
<line x1="200" y1="213" x2="348" y2="185" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
<line x1="200" y1="263" x2="355" y2="200" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
|
||||
<!-- Arrows: Nginx → Service -->
|
||||
<line x1="452" y1="155" x2="588" y2="113" stroke="#66bb6a" stroke-width="1.5" marker-end="url(#arrowRightGreen)"/>
|
||||
<line x1="452" y1="168" x2="588" y2="163" stroke="#66bb6a" stroke-width="1.5" marker-end="url(#arrowRightGreen)"/>
|
||||
<line x1="452" y1="185" x2="588" y2="213" stroke="#66bb6a" stroke-width="1.5" marker-end="url(#arrowRightGreen)"/>
|
||||
<line x1="445" y1="200" x2="588" y2="263" stroke="#66bb6a" stroke-width="1.5" marker-end="url(#arrowRightGreen)"/>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="30" y1="310" x2="770" y2="310" stroke="#334155" stroke-width="1" stroke-dasharray="6,4"/>
|
||||
|
||||
<!-- phpMyAdmin section -->
|
||||
<text x="400" y="338" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="12">추가 서비스</text>
|
||||
|
||||
<!-- phpmyadmin.sam.kr -->
|
||||
<rect x="80" y="355" width="210" height="40" rx="6" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1.5"/>
|
||||
<text x="185" y="380" text-anchor="middle" fill="#4fc3f7" font-family="monospace" font-size="13" font-weight="bold">phpmyadmin.sam.kr</text>
|
||||
|
||||
<!-- Nginx small -->
|
||||
<rect x="345" y="355" width="110" height="40" rx="18" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1.5"/>
|
||||
<text x="400" y="380" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="13" font-weight="bold">Nginx</text>
|
||||
|
||||
<!-- phpmyadmin:80 -->
|
||||
<rect x="510" y="355" width="210" height="40" rx="6" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<circle cx="528" cy="375" r="6" fill="#2196F3" opacity="0.7"/>
|
||||
<text x="620" y="380" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">phpmyadmin:80</text>
|
||||
|
||||
<!-- Arrows for phpMyAdmin -->
|
||||
<line x1="290" y1="375" x2="343" y2="375" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
<line x1="455" y1="375" x2="508" y2="375" stroke="#66bb6a" stroke-width="1.5" marker-end="url(#arrowRightGreen)"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="30" y="420" width="740" height="60" rx="8" fill="#0f172a" fill-opacity="0.6" stroke="#334155" stroke-width="1"/>
|
||||
<text x="60" y="445" fill="#90a4ae" font-family="Arial, sans-serif" font-size="11" font-weight="bold">범례:</text>
|
||||
|
||||
<rect x="110" y="432" width="14" height="14" rx="3" fill="#0d47a1" fill-opacity="0.3" stroke="#4fc3f7" stroke-width="1"/>
|
||||
<text x="130" y="444" fill="#b0bec5" font-family="Arial, sans-serif" font-size="11">도메인 (외부)</text>
|
||||
|
||||
<rect x="250" y="432" width="14" height="14" rx="3" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="270" y="444" fill="#b0bec5" font-family="Arial, sans-serif" font-size="11">Nginx 라우터</text>
|
||||
|
||||
<rect x="390" y="432" width="14" height="14" rx="3" fill="#0d47a1" fill-opacity="0.4" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="410" y="444" fill="#b0bec5" font-family="Arial, sans-serif" font-size="11">서비스 컨테이너</text>
|
||||
|
||||
<line x1="560" y1="439" x2="590" y2="439" stroke="#78909c" stroke-width="1.5" marker-end="url(#arrowRight6)"/>
|
||||
<text x="600" y="444" fill="#b0bec5" font-family="Arial, sans-serif" font-size="11">요청 흐름</text>
|
||||
|
||||
<text x="400" y="468" text-anchor="middle" fill="#546e7a" font-family="Arial, sans-serif" font-size="10">server_name 기반 가상 호스트 라우팅 | 모든 트래픽은 Nginx를 통해 내부 컨테이너로 전달됨</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
100
public/images/academy/docker-environment/7.svg
Normal file
100
public/images/academy/docker-environment/7.svg
Normal file
@@ -0,0 +1,100 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg7" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<marker id="arrowBidi7L" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#ffa726"/>
|
||||
</marker>
|
||||
<marker id="arrowBidi7R" markerWidth="8" markerHeight="6" refX="0" refY="3" orient="auto">
|
||||
<polygon points="8 0, 0 3, 8 6" fill="#ffa726"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg7)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="36" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">볼륨 마운트 구조</text>
|
||||
<line x1="280" y1="46" x2="520" y2="46" stroke="#2196F3" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- ===== HOST AREA (Left) ===== -->
|
||||
<rect x="25" y="60" width="320" height="195" rx="10" fill="#bf360c" fill-opacity="0.08" stroke="#ff7043" stroke-width="1.5" stroke-dasharray="6,3"/>
|
||||
<rect x="35" y="55" width="140" height="22" rx="4" fill="#1e293b"/>
|
||||
<text x="42" y="70" fill="#ff7043" font-family="Arial, sans-serif" font-size="13" font-weight="bold">호스트 (WSL)</text>
|
||||
|
||||
<!-- mng source -->
|
||||
<rect x="45" y="90" width="280" height="55" rx="6" fill="#bf360c" fill-opacity="0.15" stroke="#ff7043" stroke-width="1"/>
|
||||
<text x="60" y="112" fill="#ffab91" font-family="Arial, sans-serif" font-size="11" font-weight="bold">소스코드</text>
|
||||
<text x="60" y="132" fill="#ff8a65" font-family="monospace" font-size="11">/home/aweso/sam/mng</text>
|
||||
|
||||
<!-- api source -->
|
||||
<rect x="45" y="155" width="280" height="55" rx="6" fill="#bf360c" fill-opacity="0.15" stroke="#ff7043" stroke-width="1"/>
|
||||
<text x="60" y="177" fill="#ffab91" font-family="Arial, sans-serif" font-size="11" font-weight="bold">소스코드</text>
|
||||
<text x="60" y="197" fill="#ff8a65" font-family="monospace" font-size="11">/home/aweso/sam/api</text>
|
||||
|
||||
<!-- ===== CONTAINER AREA (Right) ===== -->
|
||||
<rect x="455" y="60" width="320" height="195" rx="10" fill="#0d47a1" fill-opacity="0.08" stroke="#2196F3" stroke-width="1.5" stroke-dasharray="6,3"/>
|
||||
<rect x="465" y="55" width="170" height="22" rx="4" fill="#1e293b"/>
|
||||
<text x="472" y="70" fill="#2196F3" font-family="Arial, sans-serif" font-size="13" font-weight="bold">Docker 컨테이너</text>
|
||||
|
||||
<!-- mng container -->
|
||||
<rect x="475" y="90" width="280" height="55" rx="6" fill="#0d47a1" fill-opacity="0.15" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="490" y="112" fill="#90caf9" font-family="Arial, sans-serif" font-size="11" font-weight="bold">sam-mng-1</text>
|
||||
<text x="490" y="132" fill="#64b5f6" font-family="monospace" font-size="11">/var/www/mng</text>
|
||||
|
||||
<!-- api container -->
|
||||
<rect x="475" y="155" width="280" height="55" rx="6" fill="#0d47a1" fill-opacity="0.15" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="490" y="177" fill="#90caf9" font-family="Arial, sans-serif" font-size="11" font-weight="bold">sam-api-1</text>
|
||||
<text x="490" y="197" fill="#64b5f6" font-family="monospace" font-size="11">/var/www/api</text>
|
||||
|
||||
<!-- Bidirectional arrows -->
|
||||
<!-- mng bind mount -->
|
||||
<line x1="327" y1="117" x2="473" y2="117" stroke="#ffa726" stroke-width="2" marker-end="url(#arrowBidi7L)" marker-start="url(#arrowBidi7R)"/>
|
||||
<rect x="355" y="104" width="90" height="18" rx="3" fill="#1e293b" stroke="#ffa726" stroke-width="0.5"/>
|
||||
<text x="400" y="116" text-anchor="middle" fill="#ffa726" font-family="Arial, sans-serif" font-size="9" font-weight="bold">바인드 마운트</text>
|
||||
|
||||
<!-- api bind mount -->
|
||||
<line x1="327" y1="182" x2="473" y2="182" stroke="#ffa726" stroke-width="2" marker-end="url(#arrowBidi7L)" marker-start="url(#arrowBidi7R)"/>
|
||||
<rect x="355" y="169" width="90" height="18" rx="3" fill="#1e293b" stroke="#ffa726" stroke-width="0.5"/>
|
||||
<text x="400" y="181" text-anchor="middle" fill="#ffa726" font-family="Arial, sans-serif" font-size="9" font-weight="bold">바인드 마운트</text>
|
||||
|
||||
<!-- Sync label -->
|
||||
<rect x="340" y="218" width="120" height="22" rx="4" fill="#e65100" fill-opacity="0.2" stroke="#ffa726" stroke-width="1"/>
|
||||
<text x="400" y="233" text-anchor="middle" fill="#ffcc80" font-family="Arial, sans-serif" font-size="10">실시간 동기화</text>
|
||||
|
||||
<!-- ===== DOCKER VOLUMES (Bottom) ===== -->
|
||||
<rect x="25" y="275" width="750" height="195" rx="10" fill="#1b5e20" fill-opacity="0.08" stroke="#66bb6a" stroke-width="1.5" stroke-dasharray="6,3"/>
|
||||
<rect x="35" y="270" width="200" height="22" rx="4" fill="#1e293b"/>
|
||||
<text x="42" y="285" fill="#66bb6a" font-family="Arial, sans-serif" font-size="13" font-weight="bold">Docker 볼륨 (격리)</text>
|
||||
|
||||
<!-- Lock icon -->
|
||||
<rect x="720" y="274" width="40" height="18" rx="4" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="740" y="287" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="12">잠금</text>
|
||||
|
||||
<!-- Volume cards -->
|
||||
<!-- mng_vendor -->
|
||||
<rect x="45" y="305" width="210" height="70" rx="6" fill="#1b5e20" fill-opacity="0.15" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="150" y="328" text-anchor="middle" fill="#a5d6a7" font-family="monospace" font-size="13" font-weight="bold">mng_vendor</text>
|
||||
<text x="150" y="348" text-anchor="middle" fill="#81c784" font-family="Arial, sans-serif" font-size="10">PHP 의존성 (vendor/)</text>
|
||||
<text x="150" y="364" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="9">컨테이너 재시작 시 유지</text>
|
||||
|
||||
<!-- api_vendor -->
|
||||
<rect x="295" y="305" width="210" height="70" rx="6" fill="#1b5e20" fill-opacity="0.15" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="400" y="328" text-anchor="middle" fill="#a5d6a7" font-family="monospace" font-size="13" font-weight="bold">api_vendor</text>
|
||||
<text x="400" y="348" text-anchor="middle" fill="#81c784" font-family="Arial, sans-serif" font-size="10">PHP 의존성 (vendor/)</text>
|
||||
<text x="400" y="364" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="9">컨테이너 재시작 시 유지</text>
|
||||
|
||||
<!-- db_data -->
|
||||
<rect x="545" y="305" width="210" height="70" rx="6" fill="#1b5e20" fill-opacity="0.15" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="650" y="328" text-anchor="middle" fill="#a5d6a7" font-family="monospace" font-size="13" font-weight="bold">db_data</text>
|
||||
<text x="650" y="348" text-anchor="middle" fill="#81c784" font-family="Arial, sans-serif" font-size="10">MySQL 데이터 파일</text>
|
||||
<text x="650" y="364" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="9">데이터 영속성 보장</text>
|
||||
|
||||
<!-- Key differences note -->
|
||||
<rect x="45" y="390" width="710" height="65" rx="6" fill="#0f172a" fill-opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<text x="60" y="412" fill="#90a4ae" font-family="Arial, sans-serif" font-size="11" font-weight="bold">바인드 마운트 vs Docker 볼륨:</text>
|
||||
<text x="60" y="430" fill="#78909c" font-family="Arial, sans-serif" font-size="10">바인드 마운트: 호스트 파일 직접 연결 (소스코드 수정 즉시 반영) | 호스트에서 파일 편집 가능</text>
|
||||
<text x="60" y="445" fill="#78909c" font-family="Arial, sans-serif" font-size="10">Docker 볼륨: Docker가 관리하는 격리된 스토리지 | 성능 우수 | 컨테이너 삭제해도 데이터 유지</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
125
public/images/academy/docker-environment/8.svg
Normal file
125
public/images/academy/docker-environment/8.svg
Normal file
@@ -0,0 +1,125 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg8" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
<marker id="arrowDown8" markerWidth="8" markerHeight="8" refX="4" refY="8" orient="auto">
|
||||
<polygon points="0 0, 8 0, 4 8" fill="#64b5f6"/>
|
||||
</marker>
|
||||
<marker id="arrowDown8g" markerWidth="8" markerHeight="8" refX="4" refY="8" orient="auto">
|
||||
<polygon points="0 0, 8 0, 4 8" fill="#66bb6a"/>
|
||||
</marker>
|
||||
<marker id="arrowDown8o" markerWidth="8" markerHeight="8" refX="4" refY="8" orient="auto">
|
||||
<polygon points="0 0, 8 0, 4 8" fill="#ff7043"/>
|
||||
</marker>
|
||||
<marker id="arrowRight8" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#ff7043"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg8)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="36" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">.env 로드 흐름 다이어그램</text>
|
||||
<line x1="250" y1="46" x2="550" y2="46" stroke="#2196F3" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- ===== MAIN FLOW (Left side) ===== -->
|
||||
<!-- Step 1: .env file -->
|
||||
<rect x="80" y="70" width="280" height="55" rx="8" fill="#bf360c" fill-opacity="0.2" stroke="#ff7043" stroke-width="2"/>
|
||||
<!-- File icon -->
|
||||
<rect x="100" y="82" width="22" height="28" rx="2" fill="none" stroke="#ffab91" stroke-width="1.5"/>
|
||||
<polyline points="112,82 112,90 122,90" fill="none" stroke="#ffab91" stroke-width="1"/>
|
||||
<line x1="106" y1="96" x2="116" y2="96" stroke="#ffab91" stroke-width="1"/>
|
||||
<line x1="106" y1="101" x2="116" y2="101" stroke="#ffab91" stroke-width="1"/>
|
||||
<text x="135" y="95" fill="#ff8a65" font-family="monospace" font-size="16" font-weight="bold">.env</text>
|
||||
<text x="135" y="113" fill="#ffab91" font-family="Arial, sans-serif" font-size="10">환경 변수 정의 파일</text>
|
||||
|
||||
<!-- Arrow 1→2 -->
|
||||
<line x1="220" y1="125" x2="220" y2="148" stroke="#64b5f6" stroke-width="2" marker-end="url(#arrowDown8)"/>
|
||||
|
||||
<!-- Step 2: config:cache -->
|
||||
<rect x="80" y="155" width="280" height="55" rx="8" fill="#0d47a1" fill-opacity="0.2" stroke="#2196F3" stroke-width="2"/>
|
||||
<!-- Gear icon -->
|
||||
<circle cx="110" cy="182" r="12" fill="none" stroke="#64b5f6" stroke-width="1.5"/>
|
||||
<circle cx="110" cy="182" r="5" fill="#64b5f6" opacity="0.4"/>
|
||||
<text x="135" y="178" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">config:cache</text>
|
||||
<text x="135" y="198" fill="#64b5f6" font-family="Arial, sans-serif" font-size="10">config/*.php 로 컴파일</text>
|
||||
|
||||
<!-- Arrow 2→3 -->
|
||||
<line x1="220" y1="210" x2="220" y2="233" stroke="#64b5f6" stroke-width="2" marker-end="url(#arrowDown8)"/>
|
||||
|
||||
<!-- Step 3: env() helper -->
|
||||
<rect x="80" y="240" width="280" height="55" rx="8" fill="#0d47a1" fill-opacity="0.2" stroke="#2196F3" stroke-width="2"/>
|
||||
<text x="110" y="264" fill="#90caf9" font-family="monospace" font-size="13" font-weight="bold">env()</text>
|
||||
<text x="160" y="264" fill="#64b5f6" font-family="Arial, sans-serif" font-size="13">헬퍼 함수</text>
|
||||
<text x="110" y="282" fill="#64b5f6" font-family="Arial, sans-serif" font-size="10">config() 통해 캐시된 값 반환</text>
|
||||
|
||||
<!-- Arrow 3→4 -->
|
||||
<line x1="220" y1="295" x2="220" y2="318" stroke="#66bb6a" stroke-width="2" marker-end="url(#arrowDown8g)"/>
|
||||
|
||||
<!-- Step 4: Application -->
|
||||
<rect x="80" y="325" width="280" height="55" rx="8" fill="#1b5e20" fill-opacity="0.2" stroke="#66bb6a" stroke-width="2"/>
|
||||
<text x="110" y="352" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="14" font-weight="bold">애플리케이션 코드</text>
|
||||
<text x="110" y="370" fill="#81c784" font-family="monospace" font-size="10">config('app.name'), config('database.host')</text>
|
||||
|
||||
<!-- ===== OVERRIDE PATH (docker-compose) ===== -->
|
||||
<rect x="440" y="70" width="330" height="95" rx="8" fill="#bf360c" fill-opacity="0.15" stroke="#ff7043" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<text x="460" y="93" fill="#ff8a65" font-family="monospace" font-size="12" font-weight="bold">docker-compose.yml</text>
|
||||
<text x="460" y="113" fill="#ffab91" font-family="Arial, sans-serif" font-size="10">environment:</text>
|
||||
<text x="475" y="130" fill="#ffcc80" font-family="monospace" font-size="10">APP_ENV: production</text>
|
||||
<text x="475" y="147" fill="#ffcc80" font-family="monospace" font-size="10">DB_HOST: mysql</text>
|
||||
|
||||
<!-- Override arrow -->
|
||||
<path d="M 605,165 L 605,182 L 362,182" fill="none" stroke="#ff7043" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#arrowRight8)"/>
|
||||
<rect x="420" y="171" width="60" height="16" rx="3" fill="#1e293b"/>
|
||||
<text x="450" y="183" text-anchor="middle" fill="#ff7043" font-family="Arial, sans-serif" font-size="9" font-weight="bold">override</text>
|
||||
|
||||
<!-- ===== PRIORITY TABLE (Right side) ===== -->
|
||||
<rect x="440" y="210" width="330" height="170" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#546e7a" stroke-width="1.5"/>
|
||||
<text x="605" y="237" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="14" font-weight="bold">우선순위 (높음 → 낮음)</text>
|
||||
<line x1="460" y1="247" x2="750" y2="247" stroke="#334155" stroke-width="1"/>
|
||||
|
||||
<!-- Priority 1 -->
|
||||
<rect x="460" y="257" width="30" height="24" rx="4" fill="#ef5350" fill-opacity="0.3" stroke="#ef5350" stroke-width="1"/>
|
||||
<text x="475" y="274" text-anchor="middle" fill="#ef5350" font-family="Arial, sans-serif" font-size="13" font-weight="bold">1</text>
|
||||
<text x="500" y="274" fill="#ffcdd2" font-family="Arial, sans-serif" font-size="12" font-weight="bold">docker environment</text>
|
||||
<text x="660" y="274" fill="#78909c" font-family="Arial, sans-serif" font-size="10">컨테이너 환경변수</text>
|
||||
|
||||
<!-- Priority 2 -->
|
||||
<rect x="460" y="292" width="30" height="24" rx="4" fill="#ffa726" fill-opacity="0.3" stroke="#ffa726" stroke-width="1"/>
|
||||
<text x="475" y="309" text-anchor="middle" fill="#ffa726" font-family="Arial, sans-serif" font-size="13" font-weight="bold">2</text>
|
||||
<text x="500" y="309" fill="#ffe0b2" font-family="Arial, sans-serif" font-size="12" font-weight="bold">.env</text>
|
||||
<text x="660" y="309" fill="#78909c" font-family="Arial, sans-serif" font-size="10">프로젝트 환경변수</text>
|
||||
|
||||
<!-- Priority 3 -->
|
||||
<rect x="460" y="327" width="30" height="24" rx="4" fill="#66bb6a" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="475" y="344" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="13" font-weight="bold">3</text>
|
||||
<text x="500" y="344" fill="#c8e6c9" font-family="Arial, sans-serif" font-size="12" font-weight="bold">.env.example</text>
|
||||
<text x="660" y="344" fill="#78909c" font-family="Arial, sans-serif" font-size="10">기본값 (fallback)</text>
|
||||
|
||||
<!-- Warning note -->
|
||||
<rect x="460" y="358" width="290" height="16" rx="3" fill="#ef5350" fill-opacity="0.1"/>
|
||||
<text x="605" y="370" text-anchor="middle" fill="#ef9a9a" font-family="Arial, sans-serif" font-size="9">config:cache 후 .env 변경 시 cache:clear 필요!</text>
|
||||
|
||||
<!-- ===== BOTTOM NOTE ===== -->
|
||||
<rect x="30" y="400" width="740" height="82" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<text x="50" y="422" fill="#90a4ae" font-family="Arial, sans-serif" font-size="11" font-weight="bold">핵심 포인트:</text>
|
||||
<text x="50" y="440" fill="#78909c" font-family="Arial, sans-serif" font-size="10">1. .env 파일은 Laravel 부팅 시 로드되어 config/*.php 값에 바인딩됨</text>
|
||||
<text x="50" y="455" fill="#78909c" font-family="Arial, sans-serif" font-size="10">2. config:cache 실행 시 .env 직접 읽기 불가 → 반드시 config() 헬퍼 사용</text>
|
||||
<text x="50" y="470" fill="#78909c" font-family="Arial, sans-serif" font-size="10">3. Docker 환경에서는 docker-compose.yml의 environment 값이 .env보다 우선 적용됨</text>
|
||||
|
||||
<!-- Flow step numbers -->
|
||||
<circle cx="65" cy="97" r="12" fill="#ff7043" fill-opacity="0.3" stroke="#ff7043" stroke-width="1"/>
|
||||
<text x="65" y="102" text-anchor="middle" fill="#ff7043" font-family="Arial, sans-serif" font-size="11" font-weight="bold">1</text>
|
||||
|
||||
<circle cx="65" cy="182" r="12" fill="#2196F3" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="65" y="187" text-anchor="middle" fill="#2196F3" font-family="Arial, sans-serif" font-size="11" font-weight="bold">2</text>
|
||||
|
||||
<circle cx="65" cy="267" r="12" fill="#2196F3" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="65" y="272" text-anchor="middle" fill="#2196F3" font-family="Arial, sans-serif" font-size="11" font-weight="bold">3</text>
|
||||
|
||||
<circle cx="65" cy="352" r="12" fill="#66bb6a" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="65" y="357" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="11" font-weight="bold">4</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.9 KiB |
126
public/images/academy/docker-environment/9.svg
Normal file
126
public/images/academy/docker-environment/9.svg
Normal file
@@ -0,0 +1,126 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
|
||||
<defs>
|
||||
<linearGradient id="bg9" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg9)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="36" text-anchor="middle" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">로컬 vs 서버 환경 비교</text>
|
||||
<line x1="260" y1="46" x2="540" y2="46" stroke="#2196F3" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- ===== LEFT COLUMN: Local (Docker) ===== -->
|
||||
<rect x="20" y="58" width="360" height="310" rx="10" fill="#0d47a1" fill-opacity="0.06" stroke="#2196F3" stroke-width="1.5"/>
|
||||
<rect x="30" y="53" width="160" height="22" rx="4" fill="#1e293b" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="110" y="68" text-anchor="middle" fill="#2196F3" font-family="Arial, sans-serif" font-size="12" font-weight="bold">로컬 (Docker)</text>
|
||||
|
||||
<!-- WSL layer -->
|
||||
<rect x="40" y="82" width="320" height="30" rx="5" fill="#1565c0" fill-opacity="0.15" stroke="#42a5f5" stroke-width="1"/>
|
||||
<text x="200" y="102" text-anchor="middle" fill="#90caf9" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Windows WSL2 (Ubuntu)</text>
|
||||
|
||||
<!-- Docker Compose layer -->
|
||||
<rect x="40" y="120" width="320" height="30" rx="5" fill="#1565c0" fill-opacity="0.2" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="200" y="140" text-anchor="middle" fill="#64b5f6" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Docker Compose</text>
|
||||
|
||||
<!-- Container boxes -->
|
||||
<rect x="50" y="160" width="140" height="38" rx="5" fill="#0d47a1" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="120" y="175" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="10" font-weight="bold">sam-nginx-1</text>
|
||||
<text x="120" y="190" text-anchor="middle" fill="#64b5f6" font-family="monospace" font-size="9">:80, :443</text>
|
||||
|
||||
<rect x="210" y="160" width="140" height="38" rx="5" fill="#0d47a1" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="280" y="175" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="10" font-weight="bold">sam-api-1</text>
|
||||
<text x="280" y="190" text-anchor="middle" fill="#64b5f6" font-family="monospace" font-size="9">:8080</text>
|
||||
|
||||
<rect x="50" y="206" width="140" height="38" rx="5" fill="#0d47a1" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="120" y="221" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="10" font-weight="bold">sam-mng-1</text>
|
||||
<text x="120" y="236" text-anchor="middle" fill="#64b5f6" font-family="monospace" font-size="9">:8080</text>
|
||||
|
||||
<rect x="210" y="206" width="140" height="38" rx="5" fill="#0d47a1" fill-opacity="0.3" stroke="#2196F3" stroke-width="1"/>
|
||||
<text x="280" y="221" text-anchor="middle" fill="#90caf9" font-family="monospace" font-size="10" font-weight="bold">sam-mysql-1</text>
|
||||
<text x="280" y="236" text-anchor="middle" fill="#64b5f6" font-family="monospace" font-size="9">:3306</text>
|
||||
|
||||
<!-- Command example -->
|
||||
<rect x="40" y="258" width="320" height="45" rx="5" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<text x="50" y="275" fill="#78909c" font-family="Arial, sans-serif" font-size="9">명령어 실행 방법:</text>
|
||||
<text x="50" y="293" fill="#4fc3f7" font-family="monospace" font-size="10">docker exec sam-api-1 php artisan ...</text>
|
||||
|
||||
<!-- Path info -->
|
||||
<text x="50" y="323" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">소스 경로: /home/aweso/sam/</text>
|
||||
<text x="50" y="338" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">컨테이너 내부: /var/www/</text>
|
||||
<text x="50" y="353" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">접속: mng.sam.kr (hosts 설정)</text>
|
||||
|
||||
<!-- ===== RIGHT COLUMN: Server ===== -->
|
||||
<rect x="420" y="58" width="360" height="310" rx="10" fill="#1b5e20" fill-opacity="0.06" stroke="#66bb6a" stroke-width="1.5"/>
|
||||
<rect x="430" y="53" width="175" height="22" rx="4" fill="#1e293b" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="517" y="68" text-anchor="middle" fill="#66bb6a" font-family="Arial, sans-serif" font-size="12" font-weight="bold">서버 (직접 설치)</text>
|
||||
|
||||
<!-- Ubuntu layer -->
|
||||
<rect x="440" y="82" width="320" height="30" rx="5" fill="#2e7d32" fill-opacity="0.15" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="600" y="102" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="12" font-weight="bold">Ubuntu 22.04 LTS</text>
|
||||
|
||||
<!-- Direct install -->
|
||||
<rect x="440" y="120" width="320" height="30" rx="5" fill="#2e7d32" fill-opacity="0.2" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="600" y="140" text-anchor="middle" fill="#81c784" font-family="Arial, sans-serif" font-size="12" font-weight="bold">직접 설치 (apt, pecl 등)</text>
|
||||
|
||||
<!-- Service boxes -->
|
||||
<rect x="450" y="160" width="140" height="38" rx="5" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="520" y="175" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">Nginx</text>
|
||||
<text x="520" y="190" text-anchor="middle" fill="#81c784" font-family="monospace" font-size="9">:80, :443</text>
|
||||
|
||||
<rect x="610" y="160" width="140" height="38" rx="5" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="680" y="175" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">PHP 8.3-FPM</text>
|
||||
<text x="680" y="190" text-anchor="middle" fill="#81c784" font-family="monospace" font-size="9">unix socket</text>
|
||||
|
||||
<rect x="450" y="206" width="140" height="38" rx="5" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="520" y="221" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">MySQL 8.0</text>
|
||||
<text x="520" y="236" text-anchor="middle" fill="#81c784" font-family="monospace" font-size="9">:3306</text>
|
||||
|
||||
<rect x="610" y="206" width="140" height="38" rx="5" fill="#1b5e20" fill-opacity="0.3" stroke="#66bb6a" stroke-width="1"/>
|
||||
<text x="680" y="221" text-anchor="middle" fill="#a5d6a7" font-family="Arial, sans-serif" font-size="10" font-weight="bold">Node.js 20</text>
|
||||
<text x="680" y="236" text-anchor="middle" fill="#81c784" font-family="monospace" font-size="9">PM2 관리</text>
|
||||
|
||||
<!-- Command example -->
|
||||
<rect x="440" y="258" width="320" height="45" rx="5" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<text x="450" y="275" fill="#78909c" font-family="Arial, sans-serif" font-size="9">명령어 실행 방법:</text>
|
||||
<text x="450" y="293" fill="#a5d6a7" font-family="monospace" font-size="10">php artisan ...</text>
|
||||
|
||||
<!-- Path info -->
|
||||
<text x="450" y="323" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">소스 경로: /home/webservice/</text>
|
||||
<text x="450" y="338" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">직접 실행 (컨테이너 없음)</text>
|
||||
<text x="450" y="353" fill="#546e7a" font-family="Arial, sans-serif" font-size="9">접속: mng.sam.kr (DNS/공인IP)</text>
|
||||
|
||||
<!-- ===== CENTER: Commonality ===== -->
|
||||
<rect x="240" y="378" width="320" height="105" rx="10" fill="#4a148c" fill-opacity="0.1" stroke="#ab47bc" stroke-width="1.5"/>
|
||||
<rect x="340" y="373" width="120" height="22" rx="4" fill="#1e293b" stroke="#ab47bc" stroke-width="1"/>
|
||||
<text x="400" y="388" text-anchor="middle" fill="#ab47bc" font-family="Arial, sans-serif" font-size="12" font-weight="bold">공통점</text>
|
||||
|
||||
<text x="260" y="405" fill="#ce93d8" font-family="Arial, sans-serif" font-size="10">동일한 소스 코드 (Git으로 동기화)</text>
|
||||
<text x="260" y="422" fill="#ce93d8" font-family="Arial, sans-serif" font-size="10">동일한 DB 스키마 (마이그레이션 공유)</text>
|
||||
<text x="260" y="439" fill="#ce93d8" font-family="Arial, sans-serif" font-size="10">동일한 .env 구조 (값만 다름)</text>
|
||||
<text x="260" y="456" fill="#ce93d8" font-family="Arial, sans-serif" font-size="10">동일한 Laravel 11 + PHP 8.3</text>
|
||||
<text x="260" y="473" fill="#ce93d8" font-family="Arial, sans-serif" font-size="10">동일한 Composer 의존성</text>
|
||||
|
||||
<!-- Difference indicators (left) -->
|
||||
<rect x="20" y="378" width="210" height="105" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<text x="125" y="397" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="10" font-weight="bold">로컬 차이점</text>
|
||||
<line x1="40" y1="403" x2="210" y2="403" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="35" y="418" fill="#64b5f6" font-family="Arial, sans-serif" font-size="9">docker exec 접두사 필요</text>
|
||||
<text x="35" y="433" fill="#64b5f6" font-family="Arial, sans-serif" font-size="9">바인드 마운트로 코드 공유</text>
|
||||
<text x="35" y="448" fill="#64b5f6" font-family="Arial, sans-serif" font-size="9">hosts 파일로 도메인 매핑</text>
|
||||
<text x="35" y="463" fill="#64b5f6" font-family="Arial, sans-serif" font-size="9">DB_HOST=mysql (컨테이너명)</text>
|
||||
<text x="35" y="478" fill="#64b5f6" font-family="Arial, sans-serif" font-size="9">npm run build 로컬 실행</text>
|
||||
|
||||
<!-- Difference indicators (right) -->
|
||||
<rect x="570" y="378" width="210" height="105" rx="8" fill="#0f172a" fill-opacity="0.7" stroke="#334155" stroke-width="1"/>
|
||||
<text x="675" y="397" text-anchor="middle" fill="#90a4ae" font-family="Arial, sans-serif" font-size="10" font-weight="bold">서버 차이점</text>
|
||||
<line x1="585" y1="403" x2="760" y2="403" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="580" y="418" fill="#81c784" font-family="Arial, sans-serif" font-size="9">직접 명령어 실행</text>
|
||||
<text x="580" y="433" fill="#81c784" font-family="Arial, sans-serif" font-size="9">디스크에 직접 설치</text>
|
||||
<text x="580" y="448" fill="#81c784" font-family="Arial, sans-serif" font-size="9">DNS로 도메인 연결</text>
|
||||
<text x="580" y="463" fill="#81c784" font-family="Arial, sans-serif" font-size="9">DB_HOST=127.0.0.1</text>
|
||||
<text x="580" y="478" fill="#81c784" font-family="Arial, sans-serif" font-size="9">빌드 금지 (메모리 부족)</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Reference in New Issue
Block a user