매뉴얼 개편: 배포 도구 분리·도메인 정정·용어/흐름도·포털 공유 추가

- Kubero/Coolify 배포 섹션을 접이식(details) 토글로 분리
- Coolify 배포 도메인을 *.apps.bokdev.in 으로 정정 (Kubero는 *.playground.bokdev.in)
- git 레포 URL vs 배포 URL 구분 표 + 아키텍처 흐름도(architecture.svg) 추가
- 9-5 포털에 공유 절차 추가 (스크린샷 포함)
- 목차/흐름도에 포털 공유 단계 반영

용어 통일 및 문구 다듬기

- '레포' → '레포지토리'(git 원격 저장소·URL 지칭 시), URL 이름 placeholder '<레포명>' → '<프로젝트명>'으로 통일
- 9-1 제목 변경에 맞춰 앵커 링크 동기화
- 섹션 0: 서비스 설명 정리(Gitea=원격 레포지토리, Kubero=k8s 기반/Coolify=Docker 기반), 미리보기 행 정리
- 9-3A/9-3B 제목에 토글 펼침 안내 문구 추가
This commit is contained in:
2026-07-10 17:31:18 +09:00
parent 9ff87502a4
commit f3046f9e59
4 changed files with 178 additions and 23 deletions

110
images/architecture.svg Normal file
View File

@@ -0,0 +1,110 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
<style>
text { font-family: 'Pretendard','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif; }
</style>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
</marker>
<marker id="arrowAccent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#334155"/>
</marker>
<marker id="arrowDash" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#64748B"/>
</marker>
</defs>
<!-- 배경 -->
<rect x="0" y="0" width="1280" height="720" fill="#FFFFFF"/>
<!-- 제목 -->
<text x="640" y="52" text-anchor="middle" font-size="23" font-weight="700" fill="#1E293B">개발 → 배포 흐름도</text>
<!-- ===================== 강조 라벨 (박스 위) ===================== -->
<text x="545" y="127" text-anchor="middle" font-size="19" font-weight="800" fill="#1D4ED8">① 코드가 저장되는 곳</text>
<text x="1115" y="127" text-anchor="middle" font-size="19" font-weight="800" fill="#C2410C">② 코드가 실제로 실행되는 앱</text>
<!-- ===================== 1. 개발자 ===================== -->
<circle cx="72" cy="193" r="15" fill="none" stroke="#475569" stroke-width="2.2"/>
<path d="M48,236 a24,20 0 0 1 48,0" fill="none" stroke="#475569" stroke-width="2.2"/>
<text x="72" y="260" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">개발자</text>
<text x="72" y="281" text-anchor="middle" font-size="11.5" fill="#64748B">행번 계정(SSO) 로그인</text>
<!-- 화살표 1: 개발·커밋 -->
<line x1="102" y1="227" x2="172" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
<text x="137" y="211" text-anchor="middle" font-size="13" fill="#334155">개발·커밋</text>
<!-- ===================== 2. Coder 워크스페이스 ===================== -->
<rect x="180" y="168" width="165" height="118" rx="10" fill="#F1F5F9" stroke="#94A3B8" stroke-width="1.8"/>
<svg x="250" y="178" width="24" height="24" viewBox="0 0 24 24"><path fill="#1E293B" d="M14.862 6.67H24v10.663h-9.138zM6.945 15.304c-1.934 0-3.366-1.264-3.366-3.305s1.432-3.323 3.366-3.365c1.411-.03 2.787.99 2.878 2.543l3.472-.106c-.076-2.802-2.33-4.706-6.35-4.706S0 8.558 0 12c0 3.426 3.046 5.635 6.945 5.635 3.898 0 6.29-1.935 6.38-4.782l-3.472-.077c-.152 1.553-1.497 2.528-2.908 2.528Z"/></svg>
<text x="262" y="224" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">Coder 워크스페이스</text>
<text x="262" y="248" text-anchor="middle" font-size="12" fill="#475569">VS Code로 개발하는</text>
<text x="262" y="266" text-anchor="middle" font-size="12" fill="#475569">내 전용 공간</text>
<!-- 화살표 2: git push -->
<line x1="345" y1="227" x2="427" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
<text x="386" y="199" text-anchor="middle" font-size="13" font-weight="700" fill="#334155">git push</text>
<text x="386" y="215" text-anchor="middle" font-size="11.5" fill="#334155">(코드 업로드)</text>
<!-- ===================== 3. Gitea = git 레포 URL (①) ===================== -->
<rect x="435" y="142" width="220" height="170" rx="12" fill="#DBEAFE" stroke="#2563EB" stroke-width="2.5"/>
<svg x="499" y="165" width="26" height="26" viewBox="0 0 24 24"><path fill="#609926" d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>
<text x="562" y="186" text-anchor="middle" font-size="21" font-weight="800" fill="#1D4ED8">Gitea</text>
<text x="545" y="211" text-anchor="middle" font-size="14.5" font-weight="700" fill="#1E3A8A">git 레포 URL</text>
<text x="545" y="234" text-anchor="middle" font-size="12" fill="#1E40AF">git push 로 코드가 올라오는 곳</text>
<rect x="452" y="248" width="186" height="50" rx="6" fill="#FFFFFF" stroke="#93C5FD" stroke-width="1.2"/>
<text x="545" y="268" text-anchor="middle" font-size="11.5" fill="#1E40AF">https://gitea.bokdev.in/</text>
<text x="545" y="286" text-anchor="middle" font-size="11.5" fill="#1E40AF">playground/&lt;레포명&gt;.git</text>
<!-- 화살표 3: 빌드 -->
<line x1="655" y1="227" x2="733" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
<text x="694" y="199" text-anchor="middle" font-size="12.5" fill="#334155">코드를 가져와</text>
<text x="694" y="215" text-anchor="middle" font-size="12.5" fill="#334155">빌드</text>
<!-- ===================== 4. 배포 도구 ===================== -->
<rect x="740" y="168" width="190" height="118" rx="10" fill="#F1F5F9" stroke="#94A3B8" stroke-width="1.8"/>
<text x="835" y="196" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">배포 도구</text>
<svg x="794" y="211" width="28" height="14.1" viewBox="14 37 111 56"><path fill="#7473bf" d="m 96.157565,88.887539 c -2.078917,0.570944 -6.52565,1.148532 -9.98367,1.296794 -7.398975,0.317216 -12.843214,-0.498395 -27.139975,-4.065957 -12.964018,-3.235009 -19.146755,-4.31556 -23.5006,-4.107242 -5.790951,0.277113 -6.162961,2.81403 -0.645157,4.399742 1.094027,0.3144 5.522989,0.741875 9.84213,0.949895 l 7.85297,0.378259 -3.646029,0.727159 c -4.380958,0.873739 -12.937882,1.179523 -15.829665,0.56566 -3.17812,-0.674634 -5.485542,-2.884259 -5.485542,-5.253011 0,-2.53099 0.77414,-3.91157 2.772944,-4.945203 4.334681,-2.241554 12.715059,-1.430264 31.298819,3.029978 15.965836,3.831932 18.207784,4.155817 26.448323,3.820969 5.949203,-0.241752 7.911072,-0.567291 12.360577,-2.051066 6.33899,-2.113888 10.37097,-4.334353 13.64065,-7.512123 2.30653,-2.241701 4.60932,-6.026247 5.96696,-9.268294 0.1294,-0.308969 0.9184,-0.851319 -3.35369,1.007555 -5.66298,2.464045 -12.56255,3.604553 -23.164083,3.200168 C 83.760646,70.685821 78.837396,69.856085 65.17494,66.271659 37.411783,58.987806 24.892815,58.888266 18.734317,65.902413 c -2.261116,2.575265 -2.293341,1.787682 -0.05156,-1.260643 1.153699,-1.568796 2.858622,-2.891667 5.188566,-4.025877 8.584916,-4.179128 21.39977,-3.623246 44.978819,1.951105 7.124108,1.684215 18.282021,3.743701 18.607264,3.434486 0.09161,-0.08717 -4.245801,-7.795904 -9.753158,-17.334052 -2.415843,-4.183967 -2.587045,-4.346452 -4.560251,-4.327611 -1.127593,0.0099 -3.943302,0.359986 -6.257111,0.776027 -9.480928,1.704785 -11.208062,2.720639 -12.962844,7.62443 l -1.101781,3.078969 0.187154,-3.780199 c 0.23753,-4.797658 1.290789,-6.31114 6.046941,-8.689102 6.9964,-3.498047 16.694045,-4.75027 18.99195,-2.452365 2.657818,2.657842 6.606502,11.648085 9.048373,20.601188 l 1.24306,4.557658 2.876061,0.345565 c 9.959891,1.196736 23.269681,-0.678412 26.598541,-3.747356 4.22906,-3.898853 -2.54004,-6.4817 -20.65262,-7.880281 l -9.240072,-0.713454 6.101365,-0.454785 c 7.143167,-0.532447 19.383467,-0.109887 22.291407,0.769729 5.10514,1.544054 7.52353,4.703723 6.16485,8.054448 -0.40206,0.991579 -1.29758,3.792496 -2.26015,6.120676 -2.54659,6.159471 -4.58475,9.898654 -7.89934,13.384651 -0.79606,0.837218 -1.97437,2.122875 -4.89369,3.565239 -6.6171,2.742171 -8.437796,2.796942 -11.268525,3.38668 z M 16.403488,68.720566 c 0,-0.154336 0.12621,-0.280447 0.280462,-0.280447 0.154262,0 0.280465,0.126185 0.280465,0.280447 0,0.154337 -0.12621,0.280472 -0.280465,0.280472 -0.154262,0 -0.280462,-0.126185 -0.280462,-0.280472 z"/></svg>
<text x="828" y="223" font-size="13.5" fill="#334155">Kubero</text>
<text x="835" y="245" text-anchor="middle" font-size="11.5" fill="#94A3B8">또는</text>
<svg x="800" y="256" width="20" height="20" viewBox="0 0 24 24"><path fill="#7C3AED" d="M4.364 4.364V0h17.454v4.364zm0 13.09H0V4.365h4.364zm0 0h17.454v4.364H4.364ZM6.545 6.546v-1.7H22.3V2.182H24v4.363zm0 0v10.4h-1.7v-10.4ZM3.882 17.936v1.7h-1.7v-1.7ZM24 24H6.545v-1.7H22.3v-2.664H24Z"/></svg>
<text x="826" y="271" font-size="13.5" fill="#334155">Coolify</text>
<!-- 화살표 4: 앱 실행 -->
<line x1="930" y1="227" x2="992" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
<text x="961" y="211" text-anchor="middle" font-size="13" fill="#334155">앱 실행</text>
<!-- ===================== 5. 배포된 앱 = 배포 URL (②) ===================== -->
<rect x="1000" y="142" width="230" height="170" rx="12" fill="#FFEDD5" stroke="#EA580C" stroke-width="2.5"/>
<text x="1115" y="186" text-anchor="middle" font-size="21" font-weight="800" fill="#C2410C">배포된 앱</text>
<text x="1115" y="211" text-anchor="middle" font-size="14.5" font-weight="700" fill="#9A3412">배포 URL</text>
<text x="1115" y="234" text-anchor="middle" font-size="12" fill="#9A3412">항상 켜져 있는, 실행 중인 실제 앱</text>
<rect x="1010" y="248" width="210" height="50" rx="6" fill="#FFFFFF" stroke="#FDBA74" stroke-width="1.2"/>
<text x="1115" y="268" text-anchor="middle" font-size="10.5" fill="#9A3412">Kubero: &lt;레포명&gt;.playground.bokdev.in</text>
<text x="1115" y="286" text-anchor="middle" font-size="10.5" fill="#9A3412">Coolify: &lt;레포명&gt;.apps.bokdev.in</text>
<!-- ===================== ① → ② 강조 브래킷 ===================== -->
<path d="M545,312 L545,362 L972,362 L972,297 L992,297" fill="none" stroke="#334155" stroke-width="3" marker-end="url(#arrowAccent)"/>
<text x="758" y="387" text-anchor="middle" font-size="14.5" font-weight="700" fill="#334155">push한 코드 → 이 앱으로 실행됨</text>
<!-- ===================== 공용 리소스 ===================== -->
<rect x="430" y="540" width="420" height="90" rx="10" fill="#F8FAFC" stroke="#94A3B8" stroke-width="1.8"/>
<text x="640" y="573" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">공용 리소스</text>
<text x="640" y="602" text-anchor="middle" font-size="13" fill="#475569">PostgreSQL(DB) · MinIO(S3 파일저장소) · LiteLLM(AI)</text>
<!-- 공용 리소스 → Coder 워크스페이스 (점선) -->
<path d="M470,540 L470,410 L262,410 L262,294" fill="none" stroke="#64748B" stroke-width="1.8" stroke-dasharray="6 5" marker-end="url(#arrowDash)"/>
<text x="366" y="401" text-anchor="middle" font-size="11.5" fill="#64748B">.project-env 로 자동 연결</text>
<!-- 공용 리소스 → 배포된 앱 (점선) -->
<path d="M810,540 L810,425 L1060,425 L1060,320" fill="none" stroke="#64748B" stroke-width="1.8" stroke-dasharray="6 5" marker-end="url(#arrowDash)"/>
<text x="935" y="416" text-anchor="middle" font-size="11.5" fill="#64748B">.project-env 로 자동 연결</text>
<!-- ===================== 사용자 → 배포된 앱 ===================== -->
<line x1="1190" y1="482" x2="1190" y2="320" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
<rect x="1136" y="372" width="108" height="21" fill="#FFFFFF"/>
<text x="1190" y="387" text-anchor="middle" font-size="13" fill="#334155">브라우저로 접속</text>
<circle cx="1190" cy="505" r="13" fill="none" stroke="#475569" stroke-width="2.2"/>
<path d="M1169,543 a21,17 0 0 1 42,0" fill="none" stroke="#475569" stroke-width="2.2"/>
<text x="1190" y="567" text-anchor="middle" font-size="14" font-weight="700" fill="#1E293B">사용자</text>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB