Add premium security setup guide html for Nginx Proxy Manager and Authentik

Browse files

Files changed (1) hide show

security-setup-guide.html +1022 -0

security-setup-guide.html ADDED Viewed

	@@ -0,0 +1,1022 @@

+<!DOCTYPE html>
+<html lang="ko" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title id="html-title">CertBridge 보안 강화 및 에어갭 설정 가이드</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<style>
+/* ─────────────────────────────────────────
+   CertBridge Security Guide Design System
+   Dual Theme Sync (Light + Dark)
+   Premium Modern Style
+   ───────────────────────────────────────── */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+:root {
+  /* Light Theme (Default) */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-card: #ffffff;
+  --bg-glass: rgba(0, 0, 0, 0.015);
+  --bg-hover: rgba(0, 0, 0, 0.025);
+  --text-primary: #1e293b;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --accent-blue: #2563eb;
+  --accent-blue-hover: #1d4ed8;
+  --accent-blue-subtle: rgba(37, 99, 235, 0.08);
+  --accent-emerald: #059669;
+  --accent-amber: #d97706;
+  --accent-red: #dc2626;
+  --accent-purple: #7c3aed;
+  --border-subtle: rgba(0, 0, 0, 0.08);
+  --border-active: rgba(37, 99, 235, 0.4);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
+  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-glow: none;
+  --grad: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
+  --grad-hero: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(2, 132, 199, 0.05) 100%);
+  --hero-text: #1e293b;
+  --hero-desc: #475569;
+}
+[data-theme='dark'] {
+  /* Dark Theme */
+  --bg-primary: #0f1117;
+  --bg-secondary: #1a1d27;
+  --bg-card: #1e2130;
+  --bg-glass: rgba(255, 255, 255, 0.04);
+  --bg-hover: rgba(255, 255, 255, 0.05);
+  --text-primary: #e8eaed;
+  --text-secondary: #9aa0b0;
+  --text-muted: #5f6577;
+  --accent-blue: #3b82f6;
+  --accent-blue-hover: #2563eb;
+  --accent-blue-subtle: rgba(59, 130, 246, 0.12);
+  --accent-emerald: #10b981;
+  --accent-amber: #f59e0b;
+  --accent-red: #ef4444;
+  --accent-purple: #8b5cf6;
+  --border-subtle: rgba(255, 255, 255, 0.07);
+  --border-active: rgba(59, 130, 246, 0.5);
+  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.1);
+  --grad: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
+  --grad-hero: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
+  --hero-text: #e8eaed;
+  --hero-desc: #9aa0b0;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  display: flex;
+  min-height: 100vh;
+}
+::selection {
+  background: var(--accent-blue-subtle);
+  color: var(--accent-blue);
+}
+a {
+  color: var(--accent-blue);
+  text-decoration: none;
+  font-weight: 500;
+}
+a:hover {
+  text-decoration: underline;
+}
+/* Sidebar Styling */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 280px;
+  height: 100vh;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-subtle);
+  padding: 24px 0;
+  overflow-y: auto;
+  z-index: 100;
+}
+.sidebar-logo {
+  padding: 0 24px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 16px;
+}
+.sidebar-logo h1 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-blue);
+  letter-spacing: -0.3px;
+  font-family: 'Outfit', sans-serif;
+}
+.sidebar-logo p {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+.sidebar nav a {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+  border-left: 3px solid transparent;
+  text-decoration: none;
+}
+.sidebar nav a:hover, .sidebar nav a.active {
+  color: var(--accent-blue);
+  background: var(--accent-blue-subtle);
+  border-left-color: var(--accent-blue);
+}
+.sidebar nav a .num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: var(--bg-glass);
+  font-size: 10px;
+  font-weight: 600;
+  margin-right: 10px;
+  color: var(--text-muted);
+}
+.sidebar nav a.active .num {
+  background: var(--accent-blue);
+  color: white;
+}
+/* Main Area */
+.main {
+  margin-left: 280px;
+  flex: 1;
+  padding: 0;
+  overflow-y: auto;
+  height: 100vh;
+}
+/* Embedded in Iframe */
+body.in-iframe .sidebar {
+  display: none !important;
+}
+body.in-iframe .main {
+  margin-left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+body.in-iframe .content {
+  padding: 32px 24px 60px;
+  max-width: 100%;
+}
+/* Hero Header */
+.hero {
+  background: var(--grad-hero);
+  padding: 48px 40px;
+  border-bottom: 1px solid var(--border-subtle);
+  position: relative;
+  overflow: hidden;
+}
+.hero h1 {
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--hero-text);
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: -0.5px;
+}
+.hero p {
+  font-size: 13.5px;
+  color: var(--hero-desc);
+  margin-top: 8px;
+  max-width: 800px;
+}
+.hero .badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border-subtle);
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-top: 12px;
+}
+/* Content Container */
+.content {
+  padding: 48px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.section {
+  margin-bottom: 48px;
+  scroll-margin-top: 40px;
+}
+h2 {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  position: relative;
+  padding-left: 12px;
+  color: var(--text-primary);
+  font-family: 'Outfit', sans-serif;
+}
+h2::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  bottom: 3px;
+  width: 3px;
+  border-radius: 1.5px;
+  background: var(--accent-blue);
+}
+h3 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 24px 0 12px;
+  color: var(--accent-blue);
+}
+h4 {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  color: var(--text-primary);
+}
+p, li {
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+ul, ol {
+  margin: 0 0 16px 20px;
+}
+/* Cards & Layout */
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+  box-shadow: var(--shadow-card);
+}
+.card.tip, .card.info {
+  border-color: rgba(37, 99, 235, 0.2);
+  background: var(--accent-blue-subtle);
+}
+.card.tip h4, .card.info h4 {
+  color: var(--accent-blue);
+  margin-top: 0;
+}
+.card.warn {
+  border-color: rgba(220, 38, 38, 0.2);
+  background: rgba(220, 38, 38, 0.03);
+}
+.card.warn h4 {
+  color: var(--accent-red);
+  margin-top: 0;
+}
+/* Table */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+}
+th {
+  background: var(--bg-glass);
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+td {
+  padding: 10px 14px;
+  font-size: 12px;
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+}
+tr:hover td {
+  background: var(--bg-hover);
+}
+.req-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  margin: 16px 0;
+}
+.req-item {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  box-shadow: var(--shadow-card);
+}
+.req-item .icon {
+  font-size: 24px;
+  margin-bottom: 6px;
+}
+.req-item .label {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.req-item .value {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+.step {
+  display: flex;
+  gap: 16px;
+  margin: 16px 0;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: var(--shadow-card);
+}
+.step-num {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--grad);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 12px;
+  color: #fff;
+}
+.step-body h4 {
+  margin: 0 0 4px;
+  color: var(--text-primary);
+}
+.step-body p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12.5px;
+}
+.port-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--accent-blue-subtle);
+  color: var(--accent-blue);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  font-weight: 600;
+}
+.top-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 10;
+  display: flex;
+  gap: 8px;
+}
+.lang-selector {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  padding: 4px 10px;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 11.5px;
+  outline: none;
+  cursor: pointer;
+  box-shadow: var(--shadow-card);
+}
+.lang-selector:hover {
+  border-color: var(--accent-blue);
+  color: var(--text-primary);
+}
+/* Code */
+code {
+  font-family: 'JetBrains Mono', 'SF Mono', monospace;
+  font-size: 11px;
+  background: var(--accent-blue-subtle);
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: var(--accent-blue);
+}
+.code-wrap {
+  position: relative;
+  margin: 16px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-card);
+}
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 14px;
+  background: var(--bg-hover);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.code-header span {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+.copy-btn {
+  padding: 2px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 10px;
+  transition: all 0.15s;
+}
+.copy-btn:hover {
+  background: var(--accent-blue);
+  color: white;
+  border-color: var(--accent-blue);
+}
+pre {
+  background: var(--bg-card);
+  padding: 12px 16px;
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+pre .comment { color: var(--text-muted); font-style: italic; }
+pre .keyword { color: var(--accent-purple); font-weight: 600; }
+pre .string { color: var(--accent-emerald); }
+pre .cmd { color: var(--accent-blue); }
+@media (max-width: 900px) {
+  .sidebar { display: none; }
+  .main { margin-left: 0; }
+  .content { padding: 24px; }
+  .hero { padding: 32px 24px; }
+  .hero h1 { font-size: 22px; }
+}
+</style>
+</head>
+<body>
+<aside class="sidebar">
+  <div class="sidebar-logo">
+    <h1>🛡️ CertBridge Security</h1>
+    <p data-i18n="sidebar.ver">보안 및 에어갭 가이드 v0.1.0</p>
+  </div>
+  <nav id="nav">
+    <a href="#overview" class="active"><span class="num">1</span><span data-i18n="nav.overview">아키텍처 개요</span></a>
+    <a href="#airgap-prep"><span class="num">2</span><span data-i18n="nav.prep">에어갭 패키지 준비</span></a>
+    <a href="#server-install"><span class="num">3</span><span data-i18n="nav.install">오프라인 설치 프로토콜</span></a>
+    <a href="#npm-setup"><span class="num">4</span><span data-i18n="nav.npm">Nginx Proxy Manager</span></a>
+    <a href="#authentik-setup"><span class="num">5</span><span data-i18n="nav.authentik">Authentik SSO 연동</span></a>
+    <a href="#troubleshooting"><span class="num">6</span><span data-i18n="nav.trouble">문제 해결</span></a>
+  </nav>
+</aside>
+<div class="main">
+  <div class="top-toolbar">
+    <select id="lang-select" class="lang-selector" onchange="changeLanguage(this.value)">
+      <option value="ko">한국어</option>
+      <option value="en">English</option>
+    </select>
+  </div>
+  <div class="hero">
+    <h1 data-i18n="hero.title">CertBridge 보안 강화 및 에어갭 가이드</h1>
+    <p data-i18n="hero.desc">오프라인(Air-Gap) 우분투 환경에서 Nginx Proxy Manager와 Authentik SSO를 활용하여 SSL 보안 터미네이션 및 계정 통합 인증 시스템을 안전하게 구성하는 고급 가이드입니다.</p>
+    <span class="badge" data-i18n="hero.badge">🔒 v0.1.0 · Ubuntu amd64 · NPM & Authentik</span>
+  </div>
+  <div class="content">
+    <!-- 1. Overview -->
+    <section class="section" id="overview">
+      <h2 data-i18n="overview.title">1. 보안 강화 아키텍처 개요</h2>
+      <p data-i18n="overview.desc1">기존 중앙 서버 인프라는 포트 노출 및 무인증 통신으로 인해 보안 위협에 취약할 수 있습니다. 본 개정 스택에서는 <b>Nginx Proxy Manager (NPM)</b>와 <b>Authentik SSO</b>를 중앙 인프라에 통합하여 전방 보안 장벽을 구축합니다.</p>
+      <div class="card info">
+        <h4 data-i18n="overview.strategy_title">💡 자원 최적화 설계 전략 (Postgres/Redis 공유)</h4>
+        <p data-i18n="overview.strategy_desc">새로 추가되는 SSO(Authentik) 서비스의 오버헤드를 제어하기 위해, 기존 PostgreSQL 및 Redis 컨테이너 자원을 고스란히 재활용합니다.</p>
+        <ul>
+          <li><b>PostgreSQL 16:</b> <code>authentik</code> 이라는 데이터베이스를 기존 PostgreSQL 인프라 내에 생성하여 자원을 공유합니다.</li>
+          <li><b>Redis 7:</b> DB Index <code>3</code>을 독립 할당하여 기존 CertBridge용 인덱스 <code>2</code> 및 n8n 등과의 충돌을 방지합니다.</li>
+        </ul>
+      </div>
+      <h3 data-i18n="overview.net_title">🌐 서비스 포트 맵 & 네트워크 토폴로지</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>컨테이너명</th>
+            <th>기본 포트</th>
+            <th>역할</th>
+            <th>보안 상태</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>certbridge-npm</code></td>
+            <td><span class="port-badge">80</span>, <span class="port-badge">443</span>, <span class="port-badge">81</span></td>
+            <td>Edge Reverse Proxy & SSL (Web UI)</td>
+            <td>외부 노출 (유일한 진입점)</td>
+          </tr>
+          <tr>
+            <td><code>certbridge-authentik-server</code></td>
+            <td><span class="port-badge">9000</span>, <span class="port-badge">9443</span></td>
+            <td>Authentik Core Portal & API</td>
+            <td>내부 브릿지망 또는 NPM 연동</td>
+          </tr>
+          <tr>
+            <td><code>certbridge-api</code></td>
+            <td><span class="port-badge">8090</span></td>
+            <td>CertBridge REST API Server</td>
+            <td>내부망 전용 (NPM을 통해서만 HTTPS 외부 노출)</td>
+          </tr>
+          <tr>
+            <td><code>certbridge-minio</code></td>
+            <td><span class="port-badge">9010</span>, <span class="port-badge">9011</span></td>
+            <td>Object Storage & Management Console</td>
+            <td>NPM Proxy Provider로 SSO 연동 통제</td>
+          </tr>
+          <tr>
+            <td><code>certbridge-neo4j</code></td>
+            <td><span class="port-badge">7474</span>, <span class="port-badge">7687</span></td>
+            <td>Neo4j Graph Database & Browser UI</td>
+            <td>NPM Proxy Provider로 SSO 연동 통제</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <!-- 2. Air-gap Prep -->
+    <section class="section" id="airgap-prep">
+      <h2 data-i18n="prep.title">2. 에어갭(오프라인) 패키지 준비</h2>
+      <p data-i18n="prep.desc">인터넷 연결이 전혀 불가능한 <b>에어갭(Air-Gap) 폐쇄망 우분투 서버</b>에서 설치하기 위해서는, 인터넷이 연결된 사전 머신에서 필요한 모든 Docker 이미지와 패키지를 다운로드해야 합니다.</p>
+      <h3 data-i18n="prep.step1">2-1. Hugging Face에서 에어갭 파일 다운로드</h3>
+      <p data-i18n="prep.desc2">우리는 Hugging Face 저장소 (<code>VanyaJ/certbridge</code>)에 미리 빌드된 <b>linux/amd64</b> 플랫폼 전용 Docker 이미지 아카이브와 서버 패키지를 배포해 두었습니다.</p>
+      <div class="code-wrap">
+        <div class="code-header"><span>Download Assets</span><button class="copy-btn" onclick="copyCode(this)">복사</button></div>
+        <pre><span class="comment"># 1. CertBridge 핵심 서버 아카이브 다운로드</span>
+<span class="cmd">wget</span> https://huggingface.co/VanyaJ/certbridge/resolve/main/certbridge-server-v0.1.0-ubuntu.tar.gz
+<span class="comment"># 2. 에어갭 Docker 이미지 다운로드 (docker-images/ 디렉토리에 배치할 것)</span>
+<span class="cmd">mkdir</span> -p docker-images
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/pgvector_pgvector_pg16.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/redis_7-alpine.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/minio_minio_latest.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/neo4j_5-community.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/node_20-alpine.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/jc21_nginx-proxy-manager_latest.tar.gz
+<span class="cmd">wget</span> -P docker-images/ https://huggingface.co/VanyaJ/certbridge/resolve/main/docker-images/ghcr.io_goauthentik_server_2024.4.2.tar.gz</pre>
+      </div>
+      <h3 data-i18n="prep.step2">2-2. (대안) prepare-airgap-package.sh 활용</h3>
+      <p data-i18n="prep.desc3">인터넷이 연결된 외부 우분투 PC에서 직접 이 스크립트를 수행하면, Docker 이미지 및 Node/Docker deb 설치 패키지까지 하나의 번들로 묶어 압축해 줍니다.</p>
+      <div class="code-wrap">
+        <div class="code-header"><span>bash</span><button class="copy-btn" onclick="copyCode(this)">복사</button></div>
+        <pre><span class="comment"># 스크립트 실행하여 하나의 대용량 패키지로 아카이빙</span>
+<span class="cmd">bash</span> prepare-airgap-package.sh</pre>
+      </div>
+    </section>
+    <!-- 3. Offline Installation -->
+    <section class="section" id="server-install">
+      <h2 data-i18n="install.title">3. 오프라인 설치 프로토콜 (Ubuntu)</h2>
+      <p data-i18n="install.desc">다운로드한 패키지와 <code>docker-images</code> 폴더를 이동식 저장장치(USB/외장하드 등) 또는 내부망 파일 공유를 통해 에어갭 대상 우분투 서버로 복사합니다.</p>
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-body">
+          <h4 data-i18n="install.step1_title">패키지 압축 해제 및 이미지 디렉토리 병합</h4>
+          <p data-i18n="install.step1_desc">서버 패키지를 해제한 ���로 아래로, 개별 다운로드한 <code>docker-images</code> 디렉토리를 병합합니다.</p>
+          <div class="code-wrap">
+            <pre><span class="cmd">tar</span> -xzf certbridge-server-v0.1.0-ubuntu.tar.gz
+<span class="cmd">cd</span> certbridge-server-ubuntu
+<span class="comment"># 다운로드한 docker-images 폴더를 이곳으로 복사</span>
+<span class="cmd">mv</span> /path/to/downloaded/docker-images ./</pre>
+          </div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-body">
+          <h4 data-i18n="install.step2_title">자동 셋업 스크립트 실행</h4>
+          <p data-i18n="install.step2_desc">오프라인 설치용 셋업 스크립트 <code>setup-airgap.sh</code>에 실행 권한을 부여하고 가동합니다. 이 스크립트는 Docker load 명령을 통해 오프라인 tar 및 tar.gz 이미지를 전체 복구하고 인프라 서비스를 기동합니다.</p>
+          <div class="code-wrap">
+            <pre><span class="cmd">chmod</span> +x setup-airgap.sh
+<span class="cmd">sudo</span> ./setup-airgap.sh</pre>
+          </div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-body">
+          <h4 data-i18n="install.step3_title">독립 모드(--profile standalone) 서비스 기동 상태 조회</h4>
+          <p data-i18n="install.step3_desc">NPM 및 Authentik 서비스를 포함하여 정상 구동 중인지 아래 명령으로 확인합니다.</p>
+          <div class="code-wrap">
+            <pre><span class="cmd">sudo docker compose</span> --profile standalone ps</pre>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 4. Nginx Proxy Manager Setup -->
+    <section class="section" id="npm-setup">
+      <h2 data-i18n="npm.title">4. Nginx Proxy Manager 설정 가이드</h2>
+      <p data-i18n="npm.desc">Nginx Proxy Manager(NPM)는 CertBridge 스택의 최전방에서 모든 외부 유입 요청을 처리하고, SSL 암호화 통신을 종단하며, 도메인/경로 분기를 수행합니다.</p>
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-body">
+          <h4 data-i18n="npm.step1_title">관리자 화면(Admin UI) 로그인</h4>
+          <p data-i18n="npm.step1_desc">웹 브라우저로 <code>http://<SERVER_IP>:81</code> 에 접속합니다. 최초 기본 로그인 계정은 다음과 같습니다.</p>
+          <ul>
+            <li><b>Email Address:</b> <code>admin@example.com</code></li>
+            <li><b>Password:</b> <code>changeme</code></li>
+          </ul>
+          <p class="comment">※ 로그인 직후 즉시 관리자 이메일과 비밀번호를 변경해야 합니다.</p>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-body">
+          <h4 data-i18n="npm.step2_title">사설 SSL/TLS 인증서 추가 (에어갭 환경)</h4>
+          <p data-i18n="npm.step2_desc">인프라망이 에어갭 오프라인이므로 Let's Encrypt 자동 발급을 사용할 수 없습니다. 기관 내부 CA 또는 사설로 발급받은 인증서 파일을 수동 등록해야 합니다.</p>
+          <ol>
+            <li>NPM 상단 메뉴의 <b>"SSL Certificates"</b> 탭 클릭</li>
+            <li>우측 상단 <b>"Add SSL Certificate"</b> &gt; <b>"Custom"</b> 선택</li>
+            <li>인증서 이름 입력 후, <b>Certificate Key File</b> (.key) 및 <b>Certificate File</b> (.crt/pem) 업로드 후 저장</li>
+          </ol>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-body">
+          <h4 data-i18n="npm.step3_title">Proxy Host 추가 (CertBridge API 등)</h4>
+          <p data-i18n="npm.step3_desc">NPM 프록시 호스트를 생성하여 외부 HTTPS 요청을 내부 컨테이너로 전달합니다.</p>
+          <ul>
+            <li><b>Domain Names:</b> <code>certbridge.local</code> (또는 기관용 도메인)</li>
+            <li><b>Scheme:</b> <code>http</code></li>
+            <li><b>Forward Hostname / IP:</b> <code>certbridge-api</code> (Docker 브릿지 컨테이너 호스트명)</li>
+            <li><b>Forward Port:</b> <code>8090</code></li>
+            <li><b>Block Common Exploits:</b> 활성화</li>
+            <li><b>SSL 탭:</b> 위에서 등록한 Custom SSL 선택 및 <b>Force SSL</b> 활성화</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <!-- 5. Authentik Setup -->
+    <section class="section" id="authentik-setup">
+      <h2 data-i18n="authentik.title">5. Authentik SSO / MFA 설정 프로토콜</h2>
+      <p data-i18n="authentik.desc">Authentik은 싱글 사인온(SSO)과 멀티팩터 인증(MFA)을 일관되게 제공하여, API, MinIO Console, Neo4j Graph DB로의 무단 침입을 통제합니다.</p>
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-body">
+          <h4 data-i18n="authentik.step1_title">최초 인스턴스 셋업 및 초기화</h4>
+          <p data-i18n="authentik.step1_desc">웹 브라우저로 <code>http://<SERVER_IP>:9000/if/flow/initial-setup/</code> 에 접속합니다. 최초 부트스트랩 화면에서 관리자 계정 <code>akadmin</code>에 대한 안전한 비밀번호를 설정하여 초기화를 완료합니다.</p>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-body">
+          <h4 data-i18n="authentik.step2_title">Proxy Provider 생성 (NPM Forward Auth 연동용)</h4>
+          <p data-i18n="authentik.step2_desc">MinIO와 Neo4j 등 개별 보안이 필요한 레거시 화면 보호를 위해 Proxy Provider를 생성합니다.</p>
+          <ol>
+            <li>Authentik Admin Interface 진입 (우측 상단 <b>"Admin interface"</b>)</li>
+            <li>좌측 메뉴 <b>Applications</b> &gt; <b>Providers</b> &gt; <b>"Create"</b> 클릭</li>
+            <li><b>Proxy Provider</b> 선택 후 설정:
+              <ul>
+                <li><b>Name:</b> <code>infra-proxy-provider</code></li>
+                <li><b>Authorization flow:</b> 기본 flow 선택 (e.g. default-authorization-flow)</li>
+                <li><b>External host:</b> <code>http://minio.certbridge.local</code> (외부 노출될 URL)</li>
+                <li><b>Mode:</b> <code>Forward auth (single application)</code> 선택</li>
+              </ul>
+            </li>
+          </ol>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-body">
+          <h4 data-i18n="authentik.step3_title">NPM Custom Nginx Configuration 적용</h4>
+          <p data-i18n="authentik.step3_desc">Nginx Proxy Manager에서 해당 Proxy Host로 들어오는 트래픽이 Authentik을 거쳐 인증되도록 Custom Nginx 설정 블록을 넣어줍니다.</p>
+          <div class="code-wrap">
+            <div class="code-header"><span>NPM Advanced Config (Custom Nginx Configuration)</span></div>
+            <pre># Authentik Forward Auth Integration
+location / {
+    # Authentik Server IP / Container Port
+    auth_request     /outpost.goauthentik.io/auth/request;
+    error_page       401 = @goauthentik_login;
+    # Pass the actual request back to Authentik
+    proxy_pass       $forward_scheme://$server:$port;
+    # Auth variables sync
+    auth_request_set $auth_cookie $upstream_http_set_cookie;
+    add_header       Set-Cookie $auth_cookie;
+    # Headers
+    auth_request_set $authentik_username $upstream_http_x_authentik_username;
+    auth_request_set $authentik_groups $upstream_http_x_authentik_groups;
+    auth_request_set $authentik_email $upstream_http_x_authentik_email;
+    auth_request_set $authentik_name $upstream_http_x_authentik_name;
+    proxy_set_header X-Authentik-Username $authentik_username;
+    proxy_set_header X-Authentik-Groups $authentik_groups;
+    proxy_set_header X-Authentik-Email $authentik_email;
+    proxy_set_header X-Authentik-Name $authentik_name;
+}
+location = /outpost.goauthentik.io/auth/request {
+    proxy_pass          http://certbridge-authentik-server:9000/outpost.goauthentik.io/auth/request;
+    proxy_set_header    Host $host;
+    proxy_set_header    X-Original-URL $scheme://$http_host$request_uri;
+    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header    Content-Length "";
+    proxy_method        GET;
+}
+location @goauthentik_login {
+    return 302 http://certbridge-authentik-server:9000/outpost.goauthentik.io/auth/start?rd=$scheme://$http_host$request_uri;
+}</pre>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 6. Troubleshooting -->
+    <section class="section" id="troubleshooting">
+      <h2 data-i18n="trouble.title">6. 문제 해결 (Troubleshooting)</h2>
+      <div class="card warn">
+        <h4>1. DB Connection Refused (postgres/redis)</h4>
+        <p>Authentik 컨테이너가 시작할 때 PostgreSQL 또는 Redis에 접속하지 못해 크래시되는 경우:</p>
+        <p><b>원인:</b> postgres나 redis가 아직 기동되지 않았거나 헬스체크 검증 단계에 시간이 필요한 경우입니다.</p>
+        <p><b>해결책:</b> <code>docker compose logs -f certbridge-db</code> 명령으로 DB 서버 시작 로그를 확인하고, <code>docker compose restart certbridge-authentik-server</code>를 통해 Authentik을 재시작해 주십시오.</p>
+      </div>
+      <div class="card warn">
+        <h4>2. Authentik DB init failure (Postgres)</h4>
+        <p>Authentik DB가 자동으로 생성되지 않아 인증 시스템이 구동되지 않는 경우:</p>
+        <p><b>원인:</b> docker-compose.yml의 볼륨에 <code>00-init-authentik-db.sql</code> 이 제대로 바인딩되지 않아 <code>authentik</code> 이라는 데이터베이스가 Postgres 내에 누락된 경우입니다.</p>
+        <p><b>해결책:</b> <code>docker compose exec -it certbridge-db psql -U certbridge -c "CREATE DATABASE authentik;"</code> 을 터미널에 직접 수행하여 DB를 수동 생성하고 Authentik을 재기동하십시오.</p>
+      </div>
+    </section>
+  </div>
+</div>
+<script>
+/* ─────────────────────────────────────────
+   i18n Dictionary
+   ───────────────────────────────────────── */
+const i18n = {
+  ko: {
+    "sidebar.ver": "보안 및 에어갭 가이드 v0.1.0",
+    "nav.overview": "아키텍처 개요",
+    "nav.prep": "에어갭 패키지 준비",
+    "nav.install": "오프라인 설치 프로토콜",
+    "nav.npm": "Nginx Proxy Manager",
+    "nav.authentik": "Authentik SSO 연동",
+    "nav.trouble": "문제 해결",
+    "hero.title": "CertBridge 보안 강화 및 에어갭 가이드",
+    "hero.desc": "오프라인(Air-Gap) 우분투 환경에서 Nginx Proxy Manager와 Authentik SSO를 활용하여 SSL 보안 터미네이션 및 계정 통합 인증 시스템을 안전하게 구성하는 고급 가이드입니다.",
+    "hero.badge": "🔒 v0.1.0 · Ubuntu amd64 · NPM & Authentik",
+    "overview.title": "1. 보안 강화 아키텍처 개요",
+    "overview.desc1": "기존 중앙 서버 인프라는 포트 노출 및 무인증 통신으로 인해 보안 위협에 취약할 수 있습니다. 본 개정 스택에서는 Nginx Proxy Manager (NPM)와 Authentik SSO를 중앙 인프라에 통합하여 전방 보안 장벽을 구축합니다.",
+    "overview.strategy_title": "💡 자원 최적화 설계 전략 (Postgres/Redis 공유)",
+    "overview.strategy_desc": "새로 추가되는 SSO(Authentik) 서비스의 오버헤드를 제어하기 위해, 기존 PostgreSQL 및 Redis 컨테이너 자원을 고스란히 재활용합니다.",
+    "overview.net_title": "🌐 서비스 포트 맵 & 네트워크 토폴로지",
+    "prep.title": "2. 에어갭(오프라인) 패키지 준비",
+    "prep.desc": "인터넷 연결이 전혀 불가능한 에어갭(Air-Gap) 폐쇄망 우분투 서버에서 설치하기 위해서는, 인터넷이 연결된 사전 머신에서 필요한 모든 Docker 이미지와 패키지를 다운로드해야 합니다.",
+    "prep.step1": "2-1. Hugging Face에서 에어갭 파일 다운로드",
+    "prep.desc2": "우리는 Hugging Face 저장소 (VanyaJ/certbridge)에 미리 빌드된 linux/amd64 플랫폼 전용 Docker 이미지 아카이브와 서버 패키지를 배포해 두었습니다.",
+    "prep.step2": "2-2. (대안) prepare-airgap-package.sh 활용",
+    "prep.desc3": "인터넷이 연결된 외부 우분투 PC에서 직접 이 스크립트를 수행하면, Docker 이미지 및 Node/Docker deb 설치 패키지까지 하나의 번들로 묶어 압축해 줍니다.",
+    "install.title": "3. 오프라인 설치 프로토콜 (Ubuntu)",
+    "install.desc": "다운로드한 패키지와 docker-images 폴더를 이동식 저장장치(USB/외장하드 등) 또는 내부망 파일 공유를 통해 에어갭 대상 우분투 서버로 복사합니다.",
+    "install.step1_title": "패키지 압축 해제 및 이미지 디렉토리 병합",
+    "install.step1_desc": "서버 패키지를 해제한 경로 아래로, 개별 다운로드한 docker-images 디렉토리를 병합합니다.",
+    "install.step2_title": "자동 셋업 스크립트 실행",
+    "install.step2_desc": "오프라인 설치용 셋업 스크립트 setup-airgap.sh에 실행 권한을 부여하고 가동합니다. 이 스크립트는 Docker load 명령을 통해 오프라인 tar 및 tar.gz 이미지를 전체 복구하고 인프라 서비스를 기동합니다.",
+    "install.step3_title": "독립 모드(--profile standalone) 서비스 기동 상태 조회",
+    "install.step3_desc": "NPM 및 Authentik 서비스를 포함하여 정상 구동 중인지 아래 명령으로 확인합니다.",
+    "npm.title": "4. Nginx Proxy Manager 설정 가이드",
+    "npm.desc": "Nginx Proxy Manager(NPM)는 CertBridge 스택의 최전방에서 모든 외부 유입 요청을 처리하고, SSL 암호화 통신을 종단하며, 도메인/경로 분기를 수행합니다.",
+    "npm.step1_title": "관리자 화면(Admin UI) 로그인",
+    "npm.step1_desc": "웹 브라우저로 http://<SERVER_IP>:81 에 접속합니다. 최초 기본 로그인 계정은 다음과 같습니다.",
+    "npm.step2_title": "사설 SSL/TLS 인증서 추가 (에어갭 환경)",
+    "npm.step2_desc": "인프라망이 에어갭 오프라인이므로 Let's Encrypt 자동 발급을 사용할 수 없습니다. 기관 내부 CA 또는 사설로 발급받은 인증서 파일을 수동 등록해야 합니다.",
+    "npm.step3_title": "Proxy Host 추가 (CertBridge API 등)",
+    "npm.step3_desc": "NPM 프록시 호스트를 생성하여 외부 HTTPS 요청을 내부 컨테이너로 전달합니다.",
+    "authentik.title": "5. Authentik SSO / MFA 설정 프로토콜",
+    "authentik.desc": "Authentik은 싱글 사인온(SSO)과 멀티팩터 인증(MFA)을 일관되게 제공하여, API, MinIO Console, Neo4j Graph DB로의 무단 침입을 통제합니다.",
+    "authentik.step1_title": "최초 인스턴스 셋업 및 초기화",
+    "authentik.step1_desc": "웹 브라우저로 http://<SERVER_IP>:9000/if/flow/initial-setup/ 에 접속합니다. 최초 부트스트랩 화면에서 관리자 계정 akadmin에 대한 안전한 비밀번호를 설정하여 초기화를 완료합니다.",
+    "authentik.step2_title": "Proxy Provider 생성 (NPM Forward Auth 연동용)",
+    "authentik.step2_desc": "MinIO와 Neo4j 등 개별 보안이 필요한 레거시 화면 보호를 위해 Proxy Provider를 생성합니다.",
+    "authentik.step3_title": "NPM Custom Nginx Configuration 적용",
+    "authentik.step3_desc": "Nginx Proxy Manager에서 해당 Proxy Host로 들어오는 트래픽이 Authentik을 거쳐 인증되도록 Custom Nginx 설정 블록을 넣어줍니다.",
+    "trouble.title": "6. 문제 해결 (Troubleshooting)"
+  },
+  en: {
+    "sidebar.ver": "Security & Air-gap Guide v0.1.0",
+    "nav.overview": "Architecture Overview",
+    "nav.prep": "Air-gap Package Prep",
+    "nav.install": "Offline Install Protocol",
+    "nav.npm": "Nginx Proxy Manager",
+    "nav.authentik": "Authentik SSO Setup",
+    "nav.trouble": "Troubleshooting",
+    "hero.title": "CertBridge Security & Air-gap Guide",
+    "hero.desc": "An advanced guide on securely configuring SSL termination and Single Sign-On (SSO) with MFA using Nginx Proxy Manager and Authentik in an offline (Air-Gap) Ubuntu environment.",
+    "hero.badge": "🔒 v0.1.0 · Ubuntu amd64 · NPM & Authentik",
+    "overview.title": "1. Security-Hardened Architecture Overview",
+    "overview.desc1": "The existing core server infrastructure could be vulnerable due to exposed ports and unauthenticated communication. In this revised stack, Nginx Proxy Manager (NPM) and Authentik SSO are integrated to establish a robust front-line security barrier.",
+    "overview.strategy_title": "💡 Resource Optimization Strategy (Shared Postgres/Redis)",
+    "overview.strategy_desc": "To control the overhead of the newly added SSO (Authentik) services, existing PostgreSQL and Redis container resources are fully reused.",
+    "overview.net_title": "🌐 Port Mapping & Network Topology",
+    "prep.title": "2. Offline Air-gap Package Preparation",
+    "prep.desc": "To deploy on an air-gapped Ubuntu server without internet access, you must first pre-download all required Docker images and installer packages on an internet-enabled machine.",
+    "prep.step1": "2-1. Downloading Air-gap Assets from Hugging Face",
+    "prep.desc2": "We have pre-packaged and published the linux/amd64 compatible Docker image archives and server deployment bundles in our Hugging Face repository (VanyaJ/certbridge).",
+    "prep.step2": "2-2. (Alternative) Using prepare-airgap-package.sh",
+    "prep.desc3": "Running this script on an internet-enabled Ubuntu PC will pull and package all Docker images, along with Node and Docker deb setup files, into a single archive.",
+    "install.title": "3. Offline Ubuntu Installation Protocol",
+    "install.desc": "Copy the downloaded packages and docker-images directory to your air-gapped target Ubuntu server using a portable USB storage or local network file sharing.",
+    "install.step1_title": "Extract Packages and Merge Image Directories",
+    "install.step1_desc": "Extract the server package and merge the separately downloaded docker-images directory into it.",
+    "install.step2_title": "Execute Automatic Setup Script",
+    "install.step2_desc": "Grant execution permissions to setup-airgap.sh and run it. The script loads offline tar and tar.gz images and fires up all system services.",
+    "install.step3_title": "Inspect Standalone Mode Services Status",
+    "install.step3_desc": "Verify that all services, including NPM and Authentik, are successfully running with the command below.",
+    "npm.title": "4. Nginx Proxy Manager Configuration Guide",
+    "npm.desc": "Nginx Proxy Manager (NPM) sits at the front line, routing all incoming external traffic, terminating SSL, and managing domain name resolutions.",
+    "npm.step1_title": "Login to NPM Admin UI",
+    "npm.step1_desc": "Open your web browser and navigate to http://<SERVER_IP>:81. The default bootstrap credentials are:",
+    "npm.step2_title": "Add Private SSL/TLS Certificate (Air-gap)",
+    "npm.step2_desc": "Since Let's Encrypt cannot auto-issue certificates in an offline environment, you must manually upload a private CA-signed certificate.",
+    "npm.step3_title": "Add Proxy Host (for CertBridge API etc.)",
+    "npm.step3_desc": "Create a new proxy host in NPM to forward external HTTPS requests to internal docker containers safely.",
+    "authentik.title": "5. Authentik SSO / MFA Federation Protocol",
+    "authentik.desc": "Authentik provides centralized SSO and MFA, preventing unauthorized entry to the API, MinIO Console, and Neo4j Graph DB.",
+    "authentik.step1_title": "Initial Setup and Admin Initialization",
+    "authentik.step1_desc": "Navigate to http://<SERVER_IP>:9000/if/flow/initial-setup/ on your browser. Complete initialization by defining a secure password for the default admin account akadmin.",
+    "authentik.step2_title": "Create Proxy Provider (for NPM Forward Auth)",
+    "authentik.step2_desc": "Create a Proxy Provider in Authentik to protect web applications like MinIO and Neo4j.",
+    "authentik.step3_title": "Apply Custom Nginx Configuration in NPM",
+    "authentik.step3_desc": "Insert custom Nginx configurations into NPM proxy hosts so that all requests route through Authentik authentication filters.",
+    "trouble.title": "6. Troubleshooting Guide"
+  }
+};
+/* ─────────────────────────────────────────
+   Language Changer
+   ───────────────────────────────────────── */
+function changeLanguage(lang) {
+  document.querySelectorAll("[data-i18n]").forEach(el => {
+    const key = el.getAttribute("data-i18n");
+    if (i18n[lang] && i18n[lang][key]) {
+      el.innerHTML = i18n[lang][key];
+    }
+  });
+  document.getElementById("html-title").innerText = i18n[lang]["hero.title"] || "CertBridge Security Guide";
+}
+/* ─────────────────────────────────────────
+   Copy to Clipboard
+   ───────────────────────────────────────── */
+function copyCode(btn) {
+  const pre = btn.closest('.code-wrap').querySelector('pre');
+  const text = pre.innerText;
+  navigator.clipboard.writeText(text).then(() => {
+    const originalText = btn.innerText;
+    btn.innerText = "복사됨!";
+    btn.style.background = "var(--accent-emerald)";
+    btn.style.borderColor = "var(--accent-emerald)";
+    btn.style.color = "white";
+    setTimeout(() => {
+      btn.innerText = originalText;
+      btn.style.background = "var(--bg-secondary)";
+      btn.style.borderColor = "var(--border-subtle)";
+      btn.style.color = "var(--text-secondary)";
+    }, 2000);
+  });
+}
+// Sidebar Navigation Highlighting
+const sections = document.querySelectorAll(".section");
+const navLinks = document.querySelectorAll(".sidebar nav a");
+window.addEventListener("scroll", () => {
+  let current = "";
+  sections.forEach(section => {
+    const sectionTop = section.offsetTop;
+    if (pageYOffset >= sectionTop - 60) {
+      current = section.getAttribute("id");
+    }
+  });
+  navLinks.forEach(link => {
+    link.classList.remove("active");
+    if (link.getAttribute("href").substring(1) === current) {
+      link.classList.add("active");
+    }
+  });
+});
+</script>
+</body>
+</html>