Initial commit: CF Multisite 멀티테넌트 정적 호스팅

- Cloudflare Workers + R2 기반 - Edge 캐싱으로 비용 절감 - 티어별 Rate Limiting (free/basic/pro) - KV 기반 사용량 추적 - Admin API (usage, customers, tiers, stats) - Gitea Actions 배포 워크플로우 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 09:20:46 +09:00
commit 8850031c45
12 changed files with 4824 additions and 0 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,62 @@
+# Gitea Actions 워크플로우 예시
+# 고객 저장소에서 사용할 템플릿
+
+name: Deploy to CF Multisite
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # Hugo 사이트인 경우 (선택사항)
+      # - name: Setup Hugo
+      #   run: |
+      #     wget -qO- https://github.com/gohugoio/hugo/releases/download/v0.139.0/hugo_extended_0.139.0_linux-amd64.tar.gz | tar xz
+      #     sudo mv hugo /usr/local/bin/
+
+      # - name: Build Hugo
+      #   run: hugo --minify
+
+      - name: Install AWS CLI
+        run: |
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip -q awscliv2.zip
+          sudo ./aws/install
+
+      - name: Upload to R2
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_KEY }}
+          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
+          R2_BUCKET: multisite-bucket
+          # 저장소 이름을 고객 ID로 사용 (또는 별도 설정)
+          CUSTOMER_ID: ${{ github.repository_owner }}
+        run: |
+          # 정적 파일 디렉토리 (Hugo: public, 일반: . 또는 dist)
+          SOURCE_DIR="."
+
+          # Hugo 빌드 결과가 있으면 그것 사용
+          if [ -d "public" ]; then
+            SOURCE_DIR="public"
+          fi
+
+          aws s3 sync "$SOURCE_DIR" "s3://${R2_BUCKET}/sites/${CUSTOMER_ID}/" \
+            --endpoint-url "$R2_ENDPOINT" \
+            --exclude ".git/*" \
+            --exclude ".gitea/*" \
+            --exclude "*.md" \
+            --exclude "README*" \
+            --delete
+
+          echo "Deployed to: https://${CUSTOMER_ID}.yoursite.com"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.wrangler/
+.dev.vars
+*.log
+.DS_Store
--- a/README.md
+++ b/README.md
@@ -0,0 +1,358 @@
+# CF Multisite
+
+Cloudflare Workers + R2 기반 멀티테넌트 정적 사이트 호스팅 플랫폼
+
+## 아키텍처
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        Gitea (gitea.anvil.it.com)               │
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐                       │
+│  │ site-a   │  │ site-b   │  │ site-c   │  ...                  │
+│  └────┬─────┘  └────┬─────┘  └────┬─────┘                       │
+│       │ push        │ push        │ push                        │
+└───────┼─────────────┼─────────────┼─────────────────────────────┘
+        ▼             ▼             ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                     Gitea Actions Runner (jp1)                   │
+│                        aws s3 sync → R2                          │
+└───────────────────────────┬─────────────────────────────────────┘
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                    Cloudflare R2 Bucket                          │
+│  /sites/site-a/index.html                                        │
+│  /sites/site-b/index.html                                        │
+│  /sites/site-c/index.html                                        │
+└───────────────────────────┬─────────────────────────────────────┘
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                    Cloudflare Workers                            │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐              │
+│  │   Cache     │  │ Rate Limit  │  │  Admin API  │              │
+│  │   (Edge)    │  │    (KV)     │  │   (REST)    │              │
+│  └─────────────┘  └─────────────┘  └─────────────┘              │
+└───────────────────────────┬─────────────────────────────────────┘
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                    Custom Domains                                │
+│  site-a.actions.it.com  site-b.actions.it.com  ...              │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## 주요 기능
+
+### 멀티테넌트 호스팅
+- 서브도메인 기반 고객 분리: `{customer}.actions.it.com`
+- R2에 고객별 디렉토리 구조: `/sites/{customer}/`
+- 자동 index.html 라우팅
+
+### 캐싱 전략
+- Edge 캐시로 R2 요청 최소화 → 비용 절감
+- 파일 타입별 TTL 최적화:
+
+| 파일 타입 | 캐시 TTL |
+|-----------|----------|
+| HTML | 1시간 |
+| CSS, JS, JSON | 24시간 |
+| 이미지 (PNG, JPG, GIF, SVG) | 7일 |
+| 폰트 (WOFF, WOFF2, TTF) | 30일 |
+
+### Rate Limiting (티어별)
+
+| 티어 | 분당 요청 | 일일 대역폭 | 월간 대역폭 |
+|------|-----------|-------------|-------------|
+| Free | 60 | 5GB | ~150GB |
+| Basic | 300 | 50GB | ~1.5TB |
+| Pro | 1,000 | 500GB | ~15TB |
+
+### 사용량 추적 (KV)
+- 고객별 일일 요청 수
+- 고객별 일일 대역폭
+- 분당 요청 수 (Rate Limit용)
+- 7일간 데이터 보관
+
+## Admin API
+
+모든 API는 Bearer 토큰 인증 필요:
+```bash
+curl -H "Authorization: Bearer $ADMIN_TOKEN" https://site.actions.it.com/api/...
+```
+
+### 엔드포인트
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/api/usage/:customer?days=7` | 고객 사용량 조회 |
+| GET | `/api/customers` | 전체 고객 목록 |
+| PUT | `/api/tier/:customer` | 고객 티어 변경 |
+| GET | `/api/stats` | 전체 통계 |
+| DELETE | `/api/customer/:customer` | 고객 데이터 삭제 |
+
+### 사용 예시
+
+```bash
+# 고객 사용량 조회
+curl -H "Authorization: Bearer $TOKEN" \
+  "https://multisite-demo.actions.it.com/api/usage/multisite-demo?days=7"
+
+# 티어 변경
+curl -X PUT \
+  -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"tier": "basic"}' \
+  "https://multisite-demo.actions.it.com/api/tier/customer-name"
+
+# 전체 통계
+curl -H "Authorization: Bearer $TOKEN" \
+  "https://multisite-demo.actions.it.com/api/stats"
+```
+
+## 설치 및 배포
+
+### 1. 프로젝트 클론
+
+```bash
+cd ~/projects
+git clone <repo> cf-multisite
+cd cf-multisite
+npm install
+```
+
+### 2. Cloudflare 설정
+
+```bash
+# wrangler 로그인
+npx wrangler login
+
+# KV 네임스페이스 생성
+npx wrangler kv:namespace create USAGE
+
+# R2 버킷 생성 (이미 있으면 스킵)
+npx wrangler r2 bucket create multisite-bucket
+```
+
+### 3. wrangler.toml 설정
+
+```toml
+name = "cf-multisite"
+main = "src/worker.js"
+compatibility_date = "2024-12-01"
+
+[[r2_buckets]]
+binding = "BUCKET"
+bucket_name = "multisite-bucket"
+
+[[kv_namespaces]]
+binding = "USAGE"
+id = "<KV_NAMESPACE_ID>"
+
+routes = [
+  { pattern = "*.actions.it.com", zone_name = "actions.it.com" }
+]
+```
+
+### 4. 시크릿 설정
+
+```bash
+# Admin API 토큰 생성 및 설정
+openssl rand -hex 32  # 토큰 생성
+npx wrangler secret put ADMIN_TOKEN
+```
+
+### 5. 배포
+
+```bash
+npm run deploy
+# 또는
+npx wrangler deploy
+```
+
+## 고객 사이트 추가
+
+### 1. Gitea 저장소 생성
+
+고객용 저장소를 Gitea에 생성합니다.
+
+### 2. Workflow 파일 추가
+
+`.gitea/workflows/deploy.yml`:
+
+```yaml
+name: Deploy to CF Multisite
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install AWS CLI
+        run: |
+          curl -sL "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o /tmp/awscliv2.zip
+          cd /tmp && unzip -q awscliv2.zip && sudo ./aws/install
+
+      - name: Deploy to R2
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_KEY }}
+          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
+        run: |
+          SITE_ID="${{ github.event.repository.name }}"
+
+          aws s3 sync . "s3://multisite-bucket/sites/${SITE_ID}/" \
+            --endpoint-url "${R2_ENDPOINT}" \
+            --region auto \
+            --exclude ".git/*" \
+            --exclude ".gitea/*" \
+            --exclude "README.md" \
+            --delete
+
+          echo "Deployed to: https://${SITE_ID}.actions.it.com"
+```
+
+### 3. Secrets 설정 (Gitea Organization)
+
+| Secret | 값 |
+|--------|-----|
+| `R2_ACCESS_KEY` | R2 API 토큰 Access Key |
+| `R2_SECRET_KEY` | R2 API 토큰 Secret Key |
+| `R2_ENDPOINT` | `https://<account-id>.r2.cloudflarestorage.com` |
+
+### 4. Push → 자동 배포
+
+```bash
+git add .
+git commit -m "Initial site"
+git push origin main
+# → https://{repo-name}.actions.it.com 에서 확인
+```
+
+## 로컬 개발
+
+```bash
+# 개발 서버 실행
+npm run dev
+
+# 테스트 URL
+# http://localhost:8787?site=demo
+# http://localhost:8787?site=multisite-demo
+```
+
+## 파일 구조
+
+```
+cf-multisite/
+├── src/
+│   └── worker.js          # Workers 메인 코드
+│                          # - 라우팅
+│                          # - 캐싱
+│                          # - Rate Limiting
+│                          # - Admin API
+├── scripts/
+│   └── upload.js          # 수동 R2 업로드 스크립트
+├── sample-site/           # 샘플 사이트
+│   ├── index.html
+│   ├── about.html
+│   ├── contact.html
+│   └── style.css
+├── .gitea/
+│   └── workflows/
+│       └── deploy.yml     # Gitea Actions 템플릿
+├── wrangler.toml          # Workers 설정
+├── package.json
+└── README.md
+```
+
+## 인프라 구성
+
+| 컴포넌트 | 위치 | 용도 |
+|----------|------|------|
+| Gitea | gitea.anvil.it.com | Git 호스팅 |
+| Gitea Runner | jp1 (Incus) | CI/CD 실행 |
+| R2 Bucket | multisite-bucket | 정적 파일 저장 |
+| KV Namespace | USAGE | 사용량 추적 |
+| Workers | cf-multisite | 라우팅/캐싱/API |
+| Domain | *.actions.it.com | 와일드카드 도메인 |
+
+## 비용 구조
+
+### Cloudflare 무료 티어
+
+| 항목 | 무료 한도 |
+|------|-----------|
+| Workers 요청 | 일 10만 건 |
+| R2 저장 | 10GB |
+| R2 Class A (쓰기) | 월 100만 건 |
+| R2 Class B (읽기) | 월 1000만 건 |
+| KV 읽기 | 일 10만 건 |
+| KV 쓰기 | 일 1000건 |
+
+### 예상 비용 (1000 고객 기준)
+
+```
+저장: 1000 × 50MB = 50GB → 초과 40GB × $0.015 = $0.60/월
+읽기: 캐시 히트율 90% 가정 → 대부분 무료
+Workers: 캐시 히트 시에도 실행됨 → 유료 플랜 권장 ($5/월)
+```
+
+## 모니터링
+
+### 응답 헤더
+
+| 헤더 | 설명 |
+|------|------|
+| `X-Cache: HIT/MISS` | 캐시 상태 |
+| `X-Customer` | 고객 ID |
+| `X-Tier` | 고객 티어 |
+| `X-RateLimit-Reason` | Rate Limit 사유 (rpm/bandwidth) |
+
+### 사용량 확인
+
+```bash
+# 특정 고객
+curl -H "Authorization: Bearer $TOKEN" \
+  "https://any.actions.it.com/api/usage/customer-name"
+
+# 전체 현황
+curl -H "Authorization: Bearer $TOKEN" \
+  "https://any.actions.it.com/api/stats"
+```
+
+## 확장 계획
+
+### 클러스터링 옵션
+
+| 방식 | 장점 | 적합한 규모 |
+|------|------|-------------|
+| Incus 단일 노드 | 간단, 저비용 | 현재 |
+| Incus 클러스터 (jp1+kr1) | HA, 마이그레이션 | 중규모 |
+| Kubernetes | 자동 스케일링 | 대규모 |
+
+### 결제 연동 (검토 중)
+
+| PG | 대상 | 비고 |
+|----|------|------|
+| Toss Payments | 국내 고객 | 보증보험 필요 |
+| Stripe (일본 법인) | 해외/텔레그램 | 직접 연동 가능 |
+
+## 크레덴셜 (Vault)
+
+```
+Vault: https://vault.anvil.it.com
+Path: secret/cf-multisite
+
+- admin_token: Admin API 인증 토큰
+- r2_access_key: R2 API Access Key
+- r2_secret_key: R2 API Secret Key
+```
+
+## 관련 링크
+
+- Cloudflare Dashboard: https://dash.cloudflare.com
+- Gitea: https://gitea.anvil.it.com
+- 샘플 사이트: https://multisite-demo.actions.it.com
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "cf-multisite",
+  "version": "1.0.0",
+  "description": "Multi-tenant static site hosting with Cloudflare Workers + R2",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "r2:create": "wrangler r2 bucket create multisite-bucket",
+    "r2:list": "wrangler r2 bucket list",
+    "upload": "node scripts/upload.js"
+  },
+  "devDependencies": {
+    "wrangler": "^3.99.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.700.0"
+  }
+}
--- a/sample-site/about.html
+++ b/sample-site/about.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>소개 - 데모 사이트</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <a href="/" class="logo">Demo Site</a>
+      <ul>
+        <li><a href="/">홈</a></li>
+        <li><a href="/about" class="active">소개</a></li>
+        <li><a href="/contact">연락처</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <section class="content">
+      <h1>소개</h1>
+      <p>이 사이트는 CF Multisite 플랫폼의 데모 사이트입니다.</p>
+
+      <h2>기술 스택</h2>
+      <ul>
+        <li><strong>Cloudflare Workers</strong> - 엣지에서 실행되는 서버리스 함수</li>
+        <li><strong>Cloudflare R2</strong> - S3 호환 오브젝트 스토리지</li>
+        <li><strong>Gitea</strong> - 셀프 호스팅 Git 서버</li>
+      </ul>
+
+      <h2>작동 방식</h2>
+      <ol>
+        <li>고객이 Gitea에 정적 파일 업로드</li>
+        <li>CI/CD가 R2 버킷에 파일 동기화</li>
+        <li>Workers가 요청을 받아 R2에서 파일 서빙</li>
+      </ol>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 CF Multisite. Powered by Cloudflare.</p>
+  </footer>
+</body>
+</html>
--- a/sample-site/contact.html
+++ b/sample-site/contact.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>연락처 - 데모 사이트</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <a href="/" class="logo">Demo Site</a>
+      <ul>
+        <li><a href="/">홈</a></li>
+        <li><a href="/about">소개</a></li>
+        <li><a href="/contact" class="active">연락처</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <section class="content">
+      <h1>연락처</h1>
+      <p>문의사항이 있으시면 아래로 연락해 주세요.</p>
+
+      <div class="contact-info">
+        <p><strong>이메일:</strong> contact@example.com</p>
+        <p><strong>GitHub:</strong> github.com/example</p>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 CF Multisite. Powered by Cloudflare.</p>
+  </footer>
+</body>
+</html>
--- a/sample-site/index.html
+++ b/sample-site/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>데모 사이트</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <a href="/" class="logo">Demo Site</a>
+      <ul>
+        <li><a href="/">홈</a></li>
+        <li><a href="/about">소개</a></li>
+        <li><a href="/contact">연락처</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>CF Multisite에 오신 것을 환영합니다</h1>
+      <p>Cloudflare Workers + R2로 구동되는 무료 웹 호스팅 서비스입니다.</p>
+    </section>
+
+    <section class="features">
+      <div class="feature">
+        <h3>무제한 사이트</h3>
+        <p>원하는 만큼 사이트를 만들 수 있습니다.</p>
+      </div>
+      <div class="feature">
+        <h3>글로벌 CDN</h3>
+        <p>전 세계 어디서나 빠른 속도를 제공합니다.</p>
+      </div>
+      <div class="feature">
+        <h3>자동 HTTPS</h3>
+        <p>SSL 인증서가 자동으로 적용됩니다.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 CF Multisite. Powered by Cloudflare.</p>
+  </footer>
+</body>
+</html>
--- a/sample-site/style.css
+++ b/sample-site/style.css
@@ -0,0 +1,148 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: #f5f5f5;
+}
+
+/* Header */
+header {
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+nav {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #667eea;
+  text-decoration: none;
+}
+
+nav ul {
+  display: flex;
+  list-style: none;
+  gap: 2rem;
+}
+
+nav a {
+  text-decoration: none;
+  color: #666;
+  transition: color 0.2s;
+}
+
+nav a:hover,
+nav a.active {
+  color: #667eea;
+}
+
+/* Main */
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+/* Hero */
+.hero {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 2rem;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.25rem;
+  opacity: 0.9;
+}
+
+/* Features */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.feature {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.feature h3 {
+  color: #667eea;
+  margin-bottom: 0.5rem;
+}
+
+/* Content */
+.content {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.content h1 {
+  color: #667eea;
+  margin-bottom: 1rem;
+}
+
+.content h2 {
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: #444;
+}
+
+.content ul,
+.content ol {
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.content li {
+  margin-bottom: 0.5rem;
+}
+
+.contact-info {
+  margin-top: 2rem;
+  padding: 1rem;
+  background: #f9f9f9;
+  border-radius: 8px;
+}
+
+.contact-info p {
+  margin-bottom: 0.5rem;
+}
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  margin-top: 2rem;
+}
--- a/scripts/upload.js
+++ b/scripts/upload.js
@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+/**
+ * R2 업로드 스크립트
+ *
+ * 사용법:
+ *   node scripts/upload.js <customer-id> <source-dir>
+ *
+ * 예시:
+ *   node scripts/upload.js demo-site ./sample-site
+ *
+ * 환경변수:
+ *   R2_ENDPOINT - R2 엔드포인트 URL
+ *   R2_ACCESS_KEY - R2 접근 키
+ *   R2_SECRET_KEY - R2 시크릿 키
+ *   R2_BUCKET - 버킷 이름 (기본: multisite-bucket)
+ */
+
+const { S3Client, PutObjectCommand, ListObjectsV2Command, DeleteObjectsCommand } = require('@aws-sdk/client-s3');
+const fs = require('fs');
+const path = require('path');
+
+// MIME 타입 매핑
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.pdf': 'application/pdf',
+  '.xml': 'application/xml',
+  '.txt': 'text/plain',
+  '.md': 'text/markdown',
+};
+
+// 재귀적으로 모든 파일 찾기
+function getAllFiles(dir, files = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      getAllFiles(fullPath, files);
+    } else {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+async function main() {
+  const [,, customerId, sourceDir] = process.argv;
+
+  if (!customerId || !sourceDir) {
+    console.error('Usage: node scripts/upload.js <customer-id> <source-dir>');
+    console.error('Example: node scripts/upload.js demo-site ./sample-site');
+    process.exit(1);
+  }
+
+  // 환경변수 체크
+  const endpoint = process.env.R2_ENDPOINT;
+  const accessKeyId = process.env.R2_ACCESS_KEY;
+  const secretAccessKey = process.env.R2_SECRET_KEY;
+  const bucket = process.env.R2_BUCKET || 'multisite-bucket';
+
+  if (!endpoint || !accessKeyId || !secretAccessKey) {
+    console.error('Missing environment variables:');
+    console.error('  R2_ENDPOINT, R2_ACCESS_KEY, R2_SECRET_KEY');
+    console.error('');
+    console.error('R2 API 토큰 생성: Cloudflare Dashboard > R2 > Manage R2 API Tokens');
+    process.exit(1);
+  }
+
+  // S3 클라이언트 생성 (R2는 S3 호환)
+  const s3 = new S3Client({
+    region: 'auto',
+    endpoint,
+    credentials: { accessKeyId, secretAccessKey },
+  });
+
+  const sourcePath = path.resolve(sourceDir);
+
+  if (!fs.existsSync(sourcePath)) {
+    console.error(`Source directory not found: ${sourcePath}`);
+    process.exit(1);
+  }
+
+  console.log(`Uploading to R2...`);
+  console.log(`  Customer: ${customerId}`);
+  console.log(`  Source: ${sourcePath}`);
+  console.log(`  Bucket: ${bucket}`);
+  console.log('');
+
+  // 모든 파일 수집
+  const files = getAllFiles(sourcePath);
+  const prefix = `sites/${customerId}`;
+
+  // 업로드
+  let uploaded = 0;
+  let failed = 0;
+
+  for (const file of files) {
+    const relativePath = path.relative(sourcePath, file);
+    const key = `${prefix}/${relativePath}`.replace(/\\/g, '/');
+    const ext = path.extname(file).toLowerCase();
+    const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+    try {
+      const body = fs.readFileSync(file);
+
+      await s3.send(new PutObjectCommand({
+        Bucket: bucket,
+        Key: key,
+        Body: body,
+        ContentType: contentType,
+      }));
+
+      console.log(`  ✓ ${key}`);
+      uploaded++;
+    } catch (error) {
+      console.error(`  ✗ ${key}: ${error.message}`);
+      failed++;
+    }
+  }
+
+  console.log('');
+  console.log(`Done! Uploaded: ${uploaded}, Failed: ${failed}`);
+
+  if (failed > 0) {
+    process.exit(1);
+  }
+}
+
+main().catch(error => {
+  console.error('Fatal error:', error);
+  process.exit(1);
+});
--- a/src/worker.js
+++ b/src/worker.js
@@ -0,0 +1,576 @@
+/**
+ * CF Multisite - Multi-tenant static site hosting
+ *
+ * 구조:
+ *   R2: /sites/{customer}/index.html
+ *   URL: {customer}.yoursite.com → /sites/{customer}/
+ *
+ * 캐시 전략:
+ *   - 정적 파일: 24시간 캐시 (CSS, JS, 이미지, 폰트)
+ *   - HTML: 1시간 캐시
+ *   - 캐시 히트 시 R2 요청 없음 → 비용 절감
+ *
+ * Rate Limiting:
+ *   - 분당 요청 수 제한
+ *   - 일일 대역폭 제한
+ *
+ * Admin API:
+ *   - GET  /api/usage/:customer - 고객 사용량 조회
+ *   - GET  /api/customers - 전체 고객 목록
+ *   - PUT  /api/tier/:customer - 고객 티어 변경
+ *   - GET  /api/stats - 전체 통계
+ */
+
+// MIME 타입 매핑
+const MIME_TYPES = {
+  html: 'text/html; charset=utf-8',
+  css: 'text/css',
+  js: 'application/javascript',
+  json: 'application/json',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  svg: 'image/svg+xml',
+  ico: 'image/x-icon',
+  woff: 'font/woff',
+  woff2: 'font/woff2',
+  ttf: 'font/ttf',
+  pdf: 'application/pdf',
+  xml: 'application/xml',
+  txt: 'text/plain',
+  md: 'text/markdown',
+};
+
+// 캐시 TTL 설정 (초 단위)
+const CACHE_TTL = {
+  html: 3600,
+  css: 86400,
+  js: 86400,
+  json: 3600,
+  png: 604800,
+  jpg: 604800,
+  jpeg: 604800,
+  gif: 604800,
+  svg: 604800,
+  ico: 604800,
+  woff: 2592000,
+  woff2: 2592000,
+  ttf: 2592000,
+  pdf: 86400,
+  default: 3600,
+};
+
+// Rate Limit 설정 (티어별)
+const RATE_LIMITS = {
+  free: {
+    requests_per_minute: 60,
+    bandwidth_per_day: 5 * 1024 * 1024 * 1024,    // 5GB/일 → 150GB/월
+  },
+  basic: {
+    requests_per_minute: 300,
+    bandwidth_per_day: 50 * 1024 * 1024 * 1024,   // 50GB/일 → 1.5TB/월
+  },
+  pro: {
+    requests_per_minute: 1000,
+    bandwidth_per_day: 500 * 1024 * 1024 * 1024,  // 500GB/일 → 15TB/월
+  },
+};
+
+// HTML 템플릿들
+const notFoundHtml = `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>페이지를 찾을 수 없습니다</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; display: flex;
+           justify-content: center; align-items: center; height: 100vh;
+           margin: 0; background: #f5f5f5; }
+    .container { text-align: center; }
+    h1 { font-size: 72px; margin: 0; color: #333; }
+    p { color: #666; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>404</h1>
+    <p>요청하신 페이지를 찾을 수 없습니다.</p>
+  </div>
+</body>
+</html>`;
+
+const noSiteHtml = `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>사이트 준비 중</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; display: flex;
+           justify-content: center; align-items: center; height: 100vh;
+           margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+    .container { text-align: center; color: white; }
+    h1 { font-size: 48px; margin: 0 0 16px 0; }
+    p { opacity: 0.9; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Coming Soon</h1>
+    <p>이 사이트는 현재 준비 중입니다.</p>
+  </div>
+</body>
+</html>`;
+
+const rateLimitHtml = `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>요청 제한 초과</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; display: flex;
+           justify-content: center; align-items: center; height: 100vh;
+           margin: 0; background: #fff3cd; }
+    .container { text-align: center; }
+    h1 { font-size: 48px; margin: 0; color: #856404; }
+    p { color: #856404; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>429</h1>
+    <p>요청 한도를 초과했습니다. 잠시 후 다시 시도해주세요.</p>
+  </div>
+</body>
+</html>`;
+
+// 유틸리티 함수
+function getToday() {
+  return new Date().toISOString().split('T')[0];
+}
+
+function getMinuteKey() {
+  const now = new Date();
+  return `${now.getUTCHours()}:${now.getUTCMinutes()}`;
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function jsonResponse(data, status = 200) {
+  return new Response(JSON.stringify(data, null, 2), {
+    status,
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    }
+  });
+}
+
+// 고객 티어 조회
+async function getCustomerTier(env, customer) {
+  const tier = await env.USAGE.get(`tier:${customer}`);
+  return tier || 'free';
+}
+
+// Rate Limit 체크
+async function checkRateLimit(env, customer) {
+  const tier = await getCustomerTier(env, customer);
+  const limits = RATE_LIMITS[tier] || RATE_LIMITS.free;
+
+  const today = getToday();
+  const minute = getMinuteKey();
+
+  const minuteKey = `rpm:${customer}:${minute}`;
+  const currentRpm = parseInt(await env.USAGE.get(minuteKey) || '0');
+
+  if (currentRpm >= limits.requests_per_minute) {
+    return { allowed: false, reason: 'rpm', limit: limits.requests_per_minute };
+  }
+
+  const bandwidthKey = `bw:${customer}:${today}`;
+  const currentBw = parseInt(await env.USAGE.get(bandwidthKey) || '0');
+
+  if (currentBw >= limits.bandwidth_per_day) {
+    return { allowed: false, reason: 'bandwidth', limit: limits.bandwidth_per_day };
+  }
+
+  return { allowed: true, tier, limits };
+}
+
+// 사용량 기록
+async function recordUsage(env, customer, bytes) {
+  const today = getToday();
+  const minute = getMinuteKey();
+
+  const minuteKey = `rpm:${customer}:${minute}`;
+  const currentRpm = parseInt(await env.USAGE.get(minuteKey) || '0');
+  await env.USAGE.put(minuteKey, String(currentRpm + 1), { expirationTtl: 120 });
+
+  const bandwidthKey = `bw:${customer}:${today}`;
+  const currentBw = parseInt(await env.USAGE.get(bandwidthKey) || '0');
+  await env.USAGE.put(bandwidthKey, String(currentBw + bytes), { expirationTtl: 86400 * 7 });
+
+  const dailyReqKey = `req:${customer}:${today}`;
+  const currentReq = parseInt(await env.USAGE.get(dailyReqKey) || '0');
+  await env.USAGE.put(dailyReqKey, String(currentReq + 1), { expirationTtl: 86400 * 7 });
+
+  // 고객 목록에 추가 (처음 요청하는 고객)
+  const customersKey = 'customers:list';
+  const customersList = JSON.parse(await env.USAGE.get(customersKey) || '[]');
+  if (!customersList.includes(customer)) {
+    customersList.push(customer);
+    await env.USAGE.put(customersKey, JSON.stringify(customersList));
+  }
+}
+
+// ============================================
+// Admin API 핸들러
+// ============================================
+
+// 인증 체크
+function checkAuth(request, env) {
+  const authHeader = request.headers.get('Authorization');
+  if (!authHeader || !authHeader.startsWith('Bearer ')) {
+    return false;
+  }
+  const token = authHeader.slice(7);
+  return token === env.ADMIN_TOKEN;
+}
+
+// 고객 사용량 조회
+async function getCustomerUsage(env, customer, days = 7) {
+  const tier = await getCustomerTier(env, customer);
+  const limits = RATE_LIMITS[tier] || RATE_LIMITS.free;
+
+  const usage = {
+    customer,
+    tier,
+    limits: {
+      requests_per_minute: limits.requests_per_minute,
+      bandwidth_per_day: formatBytes(limits.bandwidth_per_day),
+      bandwidth_per_day_bytes: limits.bandwidth_per_day,
+    },
+    daily: [],
+    total: {
+      requests: 0,
+      bandwidth: 0,
+      bandwidth_formatted: '0 B',
+    }
+  };
+
+  // 최근 N일 데이터 수집
+  for (let i = 0; i < days; i++) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    const dateStr = date.toISOString().split('T')[0];
+
+    const requests = parseInt(await env.USAGE.get(`req:${customer}:${dateStr}`) || '0');
+    const bandwidth = parseInt(await env.USAGE.get(`bw:${customer}:${dateStr}`) || '0');
+
+    usage.daily.push({
+      date: dateStr,
+      requests,
+      bandwidth,
+      bandwidth_formatted: formatBytes(bandwidth),
+      bandwidth_percent: ((bandwidth / limits.bandwidth_per_day) * 100).toFixed(2) + '%',
+    });
+
+    usage.total.requests += requests;
+    usage.total.bandwidth += bandwidth;
+  }
+
+  usage.total.bandwidth_formatted = formatBytes(usage.total.bandwidth);
+
+  return usage;
+}
+
+// API 라우터
+async function handleAPI(request, env, url) {
+  const path = url.pathname;
+  const method = request.method;
+
+  // CORS preflight
+  if (method === 'OPTIONS') {
+    return new Response(null, {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      }
+    });
+  }
+
+  // 인증 체크 (ADMIN_TOKEN 환경변수 필요)
+  if (!checkAuth(request, env)) {
+    return jsonResponse({ error: 'Unauthorized', message: 'Invalid or missing token' }, 401);
+  }
+
+  // GET /api/usage/:customer - 고객별 사용량
+  const usageMatch = path.match(/^\/api\/usage\/([^\/]+)$/);
+  if (usageMatch && method === 'GET') {
+    const customer = usageMatch[1];
+    const days = parseInt(url.searchParams.get('days') || '7');
+    const usage = await getCustomerUsage(env, customer, days);
+    return jsonResponse(usage);
+  }
+
+  // GET /api/customers - 전체 고객 목록
+  if (path === '/api/customers' && method === 'GET') {
+    const customersList = JSON.parse(await env.USAGE.get('customers:list') || '[]');
+    const customers = [];
+
+    for (const customer of customersList) {
+      const tier = await getCustomerTier(env, customer);
+      const today = getToday();
+      const requests = parseInt(await env.USAGE.get(`req:${customer}:${today}`) || '0');
+      const bandwidth = parseInt(await env.USAGE.get(`bw:${customer}:${today}`) || '0');
+
+      customers.push({
+        customer,
+        tier,
+        today: {
+          requests,
+          bandwidth: formatBytes(bandwidth),
+          bandwidth_bytes: bandwidth,
+        }
+      });
+    }
+
+    // 대역폭 기준 내림차순 정렬
+    customers.sort((a, b) => b.today.bandwidth_bytes - a.today.bandwidth_bytes);
+
+    return jsonResponse({
+      count: customers.length,
+      customers,
+    });
+  }
+
+  // PUT /api/tier/:customer - 티어 변경
+  const tierMatch = path.match(/^\/api\/tier\/([^\/]+)$/);
+  if (tierMatch && method === 'PUT') {
+    const customer = tierMatch[1];
+
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonResponse({ error: 'Invalid JSON body' }, 400);
+    }
+
+    const newTier = body.tier;
+    if (!['free', 'basic', 'pro'].includes(newTier)) {
+      return jsonResponse({ error: 'Invalid tier. Must be: free, basic, or pro' }, 400);
+    }
+
+    await env.USAGE.put(`tier:${customer}`, newTier);
+
+    return jsonResponse({
+      success: true,
+      customer,
+      tier: newTier,
+      limits: RATE_LIMITS[newTier],
+    });
+  }
+
+  // GET /api/stats - 전체 통계
+  if (path === '/api/stats' && method === 'GET') {
+    const customersList = JSON.parse(await env.USAGE.get('customers:list') || '[]');
+    const today = getToday();
+
+    let totalRequests = 0;
+    let totalBandwidth = 0;
+    const tierCounts = { free: 0, basic: 0, pro: 0 };
+
+    for (const customer of customersList) {
+      const tier = await getCustomerTier(env, customer);
+      tierCounts[tier]++;
+
+      const requests = parseInt(await env.USAGE.get(`req:${customer}:${today}`) || '0');
+      const bandwidth = parseInt(await env.USAGE.get(`bw:${customer}:${today}`) || '0');
+
+      totalRequests += requests;
+      totalBandwidth += bandwidth;
+    }
+
+    return jsonResponse({
+      date: today,
+      customers: {
+        total: customersList.length,
+        by_tier: tierCounts,
+      },
+      today: {
+        requests: totalRequests,
+        bandwidth: formatBytes(totalBandwidth),
+        bandwidth_bytes: totalBandwidth,
+      }
+    });
+  }
+
+  // DELETE /api/customer/:customer - 고객 삭제 (데이터만)
+  const deleteMatch = path.match(/^\/api\/customer\/([^\/]+)$/);
+  if (deleteMatch && method === 'DELETE') {
+    const customer = deleteMatch[1];
+
+    // 고객 목록에서 제거
+    const customersList = JSON.parse(await env.USAGE.get('customers:list') || '[]');
+    const newList = customersList.filter(c => c !== customer);
+    await env.USAGE.put('customers:list', JSON.stringify(newList));
+
+    // 티어 정보 삭제
+    await env.USAGE.delete(`tier:${customer}`);
+
+    return jsonResponse({
+      success: true,
+      message: `Customer ${customer} removed from tracking`,
+    });
+  }
+
+  return jsonResponse({ error: 'Not Found', endpoints: [
+    'GET  /api/usage/:customer?days=7',
+    'GET  /api/customers',
+    'PUT  /api/tier/:customer  {"tier": "free|basic|pro"}',
+    'GET  /api/stats',
+    'DELETE /api/customer/:customer',
+  ]}, 404);
+}
+
+// ============================================
+// 메인 핸들러
+// ============================================
+
+export default {
+  async fetch(request, env, ctx) {
+    const url = new URL(request.url);
+    const host = url.hostname;
+    const path = url.pathname;
+
+    // Admin API 라우팅
+    if (path.startsWith('/api/')) {
+      return handleAPI(request, env, url);
+    }
+
+    // 고객 ID 추출
+    let customer = url.searchParams.get('site');
+
+    if (!customer) {
+      const parts = host.split('.');
+      if (parts.length >= 2 && parts[0] !== 'www') {
+        customer = parts[0];
+      }
+    }
+
+    // 고객 ID 없으면 메인 페이지
+    if (!customer || customer === 'localhost') {
+      return new Response(noSiteHtml, {
+        headers: { 'Content-Type': 'text/html; charset=utf-8' }
+      });
+    }
+
+    // Rate Limit 체크
+    const rateCheck = await checkRateLimit(env, customer);
+    if (!rateCheck.allowed) {
+      return new Response(rateLimitHtml, {
+        status: 429,
+        headers: {
+          'Content-Type': 'text/html; charset=utf-8',
+          'Retry-After': rateCheck.reason === 'rpm' ? '60' : '3600',
+          'X-RateLimit-Reason': rateCheck.reason,
+        }
+      });
+    }
+
+    // 경로 정규화
+    let filePath = path;
+
+    if (filePath.endsWith('/')) {
+      filePath += 'index.html';
+    }
+
+    if (!filePath.includes('.')) {
+      filePath += '.html';
+    }
+
+    // 캐시 키 생성
+    const cacheKey = new Request(`https://cache.internal/${customer}${filePath}`, request);
+    const cache = caches.default;
+
+    // 1. 캐시에서 먼저 확인
+    let response = await cache.match(cacheKey);
+
+    if (response) {
+      const headers = new Headers(response.headers);
+      headers.set('X-Cache', 'HIT');
+
+      const contentLength = parseInt(response.headers.get('Content-Length') || '0');
+      ctx.waitUntil(recordUsage(env, customer, contentLength));
+
+      return new Response(response.body, {
+        status: response.status,
+        headers
+      });
+    }
+
+    // 2. 캐시 미스 - R2에서 가져오기
+    const key = `sites/${customer}${filePath}`;
+
+    try {
+      const object = await env.BUCKET.get(key);
+
+      if (!object) {
+        if (filePath === '/index.html') {
+          return new Response(noSiteHtml, {
+            status: 404,
+            headers: { 'Content-Type': 'text/html; charset=utf-8' }
+          });
+        }
+
+        return new Response(notFoundHtml, {
+          status: 404,
+          headers: { 'Content-Type': 'text/html; charset=utf-8' }
+        });
+      }
+
+      const ext = filePath.split('.').pop().toLowerCase();
+      const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+      const ttl = CACHE_TTL[ext] || CACHE_TTL.default;
+
+      const headers = new Headers({
+        'Content-Type': contentType,
+        'Content-Length': object.size,
+        'Cache-Control': `public, max-age=${ttl}`,
+        'X-Customer': customer,
+        'X-Cache': 'MISS',
+        'X-Tier': rateCheck.tier,
+      });
+
+      if (object.etag) {
+        headers.set('ETag', object.etag);
+      }
+
+      response = new Response(object.body, { headers });
+
+      ctx.waitUntil(Promise.all([
+        cache.put(cacheKey, response.clone()),
+        recordUsage(env, customer, object.size)
+      ]));
+
+      return response;
+
+    } catch (error) {
+      console.error('Error fetching from R2:', error);
+      return new Response('Internal Server Error', {
+        status: 500,
+        headers: { 'Content-Type': 'text/plain' }
+      });
+    }
+  }
+};
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -0,0 +1,30 @@
+name = "cf-multisite"
+main = "src/worker.js"
+compatibility_date = "2024-12-01"
+
+# R2 버킷 바인딩
+[[r2_buckets]]
+binding = "BUCKET"
+bucket_name = "multisite-bucket"
+
+# KV 네임스페이스 (사용량 추적)
+[[kv_namespaces]]
+binding = "USAGE"
+id = "16cb07c303e64ed49ab179b6d5be7c32"
+
+# 커스텀 도메인 설정
+routes = [
+  { pattern = "*.actions.it.com", zone_name = "actions.it.com" }
+]
+
+# 개발용 로컬 R2
+[dev]
+port = 8787
+
+# 환경별 설정
+[env.production]
+name = "cf-multisite-prod"
+
+[[env.production.r2_buckets]]
+binding = "BUCKET"
+bucket_name = "multisite-bucket"