certbridge / security-setup-guide.html

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

fed0bec verified 28 days ago

42.7 kB

	<!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> > <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> > <b>Providers</b> > <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>