File size: 42,731 Bytes

fed0bec

<!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>