Devtools Hub

Dev Tools 5종의 단일 진입점이자 랜딩 페이지들을 Host-based vhost로 서빙하는 Nginx 허브입니다.

개요

항목	내용
위치	workspace/_devtools/hub/
용도	진입점 랜딩 + 4개 1차 랜딩 vhost 통합 서빙
기반 이미지	nginx:alpine
포트	7001
진입 도메인	devtools.codebase.how (🌐 공개)
1차 랜딩 도메인	ai-core/db/redis/monitor.codebase.how (🌐 공개, Host-based 분기)

역할

Hub 컨테이너는 Nginx 하나로 5개 호스트를 vhost 분기합니다:

Host 헤더	서빙 경로
devtools.codebase.how	site/ (메인 카드 UI)
ai-core.codebase.how	site/landings/ai-core/
db.codebase.how	site/landings/db/
redis.codebase.how	site/landings/redis/
monitor.codebase.how	site/landings/monitor/

NPM Proxy Host 측면에서는 5개 도메인 → 모두 host:7001 로 동일하게 포워드. Hub 내부 Nginx가 Host 헤더를 보고 분기합니다.

시작하기

# 컨테이너 시작
make up NAME=_devtools/hub

# 상태 확인
make status NAME=_devtools/hub

# 로그
make logs NAME=_devtools/hub

접속

용도	URL	비고
메인 진입	https://devtools.codebase.how	카드 UI 5종
각 도구 랜딩	https://{tool}.codebase.how	Hub Nginx vhost
로컬 개발	http://localhost:7001	기본 진입

폴더 구조

workspace/_devtools/hub/
├── _docker/
│   ├── docker-compose.{amd64,arm64}.yml
│   └── conf/
│       └── default.conf            # Nginx vhost 정의
├── site/
│   ├── index.html                  # 메인 진입 (카드 UI)
│   ├── landings/
│   │   ├── _shared.css             # 공용 스타일
│   │   ├── ai-core/index.html      # ai-core.codebase.how 랜딩
│   │   ├── db/index.html           # db.codebase.how 랜딩
│   │   ├── redis/index.html        # redis.codebase.how 랜딩
│   │   └── monitor/index.html      # monitor.codebase.how 랜딩
│   └── assets/                     # 공용 이미지/아이콘
└── AGENTS.md

Nginx vhost 구성 예시

_docker/conf/default.conf:

# 각 1차 랜딩 서브도메인
server {
    listen 80;
    server_name ai-core.codebase.how;
    root /usr/share/nginx/html/landings/ai-core;
    location /_shared.css { alias /usr/share/nginx/html/landings/_shared.css; }
    location / { try_files $uri $uri/ /index.html; }
}

server {
    listen 80;
    server_name db.codebase.how;
    root /usr/share/nginx/html/landings/db;
    location /_shared.css { alias /usr/share/nginx/html/landings/_shared.css; }
    location / { try_files $uri $uri/ /index.html; }
}

# redis / monitor 동일 패턴 …

# 기본 (devtools.codebase.how, localhost)
server {
    listen 80 default_server;
    server_name _;
    root /usr/share/nginx/html;

    # 구 경로 → 신 1차 도메인 301 redirect
    location = /tools/pgadmin.html       { return 301 https://db.codebase.how/; }
    location = /tools/redisinsight.html  { return 301 https://redis.codebase.how/; }
    location = /tools/monitoring.html    { return 301 https://monitor.codebase.how/; }

    location / { try_files $uri $uri/ /index.html; }
}

동작 흐름

사용자 관점

1. 사용자 → https://devtools.codebase.how
           ↓ NPM → host:7001
2. Hub Nginx (default vhost) → site/index.html (카드 UI)
3. 사용자가 카드 클릭 (예: "AI Core 자세히 보기")
           ↓
4. https://ai-core.codebase.how
           ↓ NPM → host:7001
5. Hub Nginx (ai-core vhost) → site/landings/ai-core/index.html
6. 랜딩 페이지 "관리자 접속" 버튼
           ↓
7. https://ai-core.devtools.codebase.how/platform
           ↓ NPM → host:7000 (Laravel Filament)
8. 로그인 → 어드민 콘솔

2단계 진입 (랜딩 → 어드민)의 이점

• 공개 랜딩: SEO·마케팅·기능 소개에 활용 (누구나 접속)
• 운영 어드민: Tailscale IP 제한으로 보안 격리

카드 UI (메인 랜딩)

site/index.html은 5개 도구를 카드 형태로 소개:

• 🤖 AI Core Dashboard
• 🐘 pgAdmin
• 🔴 RedisInsight
• 📊 Grafana LGTM
• 🏠 (자기 자신은 카드 아님, 로고만)

각 카드에는 [자세히 보기] (랜딩으로) + [바로 열기] (어드민으로, 파워유저 전용) 두 버튼이 있습니다.

환경변수 (.env)

DEVTOOLS_HUB_PORT=7001
PLATFORM_DEVTOOLS_URL=https://devtools.codebase.how

# 각 1차 랜딩 URL
PLATFORM_AI_CORE_URL=https://ai-core.codebase.how
PLATFORM_DB_URL=https://db.codebase.how
PLATFORM_REDIS_URL=https://redis.codebase.how
PLATFORM_MONITOR_URL=https://monitor.codebase.how

보안

Hub 자체와 랜딩 4종은 공개 목적이므로 인증 불필요.

다만 카드 UI의 "바로 열기" 링크는 어드민 URL로 이동하므로 해당 어드민의 Access List에 의해 자동 차단됩니다 (Hub 단에서는 제한하지 않음).

구 경로 호환

# 과거 사용했던 경로 → 신 1차 도메인으로 301
/tools/pgadmin.html       → https://db.codebase.how/
/tools/redisinsight.html  → https://redis.codebase.how/
/tools/monitoring.html    → https://monitor.codebase.how/

브라우저 북마크나 외부 링크가 남아있어도 자연스럽게 전환됩니다.

새 도구 추가 절차

1. 도메인 등록

   • Cloudflare: {new-tool}.codebase.how A 레코드
   • NPM Proxy Host: → host:7001 포워드

2. Nginx vhost 추가

   # _docker/conf/default.conf에 server 블록 추가
   server {
       listen 80;
       server_name {new-tool}.codebase.how;
       root /usr/share/nginx/html/landings/{new-tool};
       location / { try_files $uri $uri/ /index.html; }
   }

3. 랜딩 HTML 작성

   mkdir workspace/_devtools/hub/site/landings/{new-tool}
   # site/landings/{new-tool}/index.html (기존 4개 참조)

4. 메인 카드 UI 업데이트

   • site/index.html에 신규 카드 추가

5. 어드민 도메인 (필요 시)

   • {new-tool}.devtools.codebase.how NPM Proxy Host 추가
   • Tailscale Access List 적용

6. 재기동

   make restart NAME=_devtools/hub

관련 문서

• Dev Tools 개요
• 플랫폼 공용 도메인
• AI Core
• pgAdmin
• RedisInsight
• Monitoring