Mengapa Stack Ini?

Setiap komponen dipilih karena alasan spesifik:

Struktur Proyek Standard Kami

saas-project/
├── frontend/                 # Next.js 14
│   ├── app/
│   │   ├── (dashboard)/      # Route group: halaman setelah login
│   │   │   ├── layout.tsx    # Dashboard layout + auth check
│   │   │   ├── page.tsx      # Main dashboard
│   │   │   └── settings/
│   │   ├── (auth)/           # Route group: login, register
│   │   │   ├── login/
│   │   │   └── register/
│   │   └── api/              # Next.js API Routes (BFF pattern)
│   ├── components/
│   │   ├── ui/               # Reusable UI components
│   │   └── features/         # Feature-specific components
│   └── lib/
│       ├── api.ts            # API client
│       └── utils.ts
│
├── backend/                  # FastAPI
│   ├── app/
│   │   ├── api/v1/
│   │   │   ├── auth.py
│   │   │   ├── users.py
│   │   │   └── tenants.py
│   │   ├── models/           # SQLAlchemy ORM models
│   │   ├── schemas/          # Pydantic request/response schemas
│   │   └── core/
│   │       ├── config.py     # Settings dari .env
│   │       ├── security.py   # JWT, password hashing
│   │       └── database.py   # DB connection
│   └── alembic/              # Database migrations
│
└── docker-compose.yml        # Local development

Auth Pattern yang Aman: HTTP-only Cookie

Jangan gunakan localStorage untuk JWT — ini kerentanan XSS yang umum. Gunakan HTTP-only cookie:

# FastAPI — set cookie setelah login berhasil
@router.post("/auth/login")
async def login(credentials: LoginSchema, response: Response, db: Session = Depends(get_db)):
    user = authenticate_user(db, credentials.email, credentials.password)
    if not user:
        raise HTTPException(status_code=401, detail="Invalid credentials")

    access_token = create_access_token(data={"sub": str(user.id)})

    response.set_cookie(
        key="auth_token",
        value=access_token,
        httponly=True,       # JavaScript tidak bisa akses
        secure=True,         # HTTPS only
        samesite="strict",   # CSRF protection
        max_age=7 * 24 * 3600  # 7 hari
    )
    return {"status": "ok", "user_id": user.id}

Multi-tenant dengan Schema PostgreSQL

Untuk setiap tenant baru, kita buat schema PostgreSQL tersendiri. Data benar-benar terisolasi tanpa perlu database terpisah:

-- PENTING: gunakan %1$I (positional) bukan %I saja
-- Bug umum yang susah di-debug!
CREATE OR REPLACE FUNCTION provision_tenant(tenant_slug TEXT)
RETURNS void AS $$
BEGIN
  -- Buat schema baru
  EXECUTE format('CREATE SCHEMA IF NOT EXISTS %1$I', tenant_slug);

  -- Buat tabel utama
  EXECUTE format('
    CREATE TABLE %1$I.users (
      id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
      email TEXT UNIQUE NOT NULL,
      role TEXT DEFAULT ''member'',
      created_at TIMESTAMPTZ DEFAULT NOW()
    )
  ', tenant_slug);

  EXECUTE format('
    CREATE TABLE %1$I.transactions (
      id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
      amount DECIMAL(15,2) NOT NULL,
      description TEXT,
      created_at TIMESTAMPTZ DEFAULT NOW()
    )
  ', tenant_slug);
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Deployment: Vercel + VPS

Frontend → Vercel

Setup paling sederhana untuk Next.js. Connect GitHub repo, set environment variables, done. Preview deployment otomatis untuk setiap PR — sangat membantu untuk review dengan klien.

# vercel.json — konfigurasi minimal
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "env": {
    "NEXT_PUBLIC_API_URL": "https://api.yourdomain.com"
  }
}

Backend → VPS dengan Nginx + PM2

Kami menggunakan VPS IDCloudHost Singapore (latensi rendah ke Indonesia). Setup standar:

# ecosystem.config.js untuk PM2
module.exports = {
  apps: [{
    name: 'saas-backend',
    script: 'uvicorn',
    args: 'app.main:app --host 0.0.0.0 --port 8000 --workers 2',
    interpreter: '/path/to/venv/bin/python',
    env: { NODE_ENV: 'production' },
    error_file: './logs/err.log',
    out_file: './logs/out.log'
  }]
}

# Nginx config
server {
    server_name api.yourdomain.com;
    location / {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Tips penting untuk Vercel deployment: Kalau ada config.js atau file yang perlu dimodifikasi saat build, gunakan buildCommand di vercel.json dengan sed injection daripada memodifikasi file langsung. Ini menghindari masalah file reverting ke versi lama setelah deployment.

Kapan Tidak Pakai Stack Ini?