SuperAPI AI Directory

deploy-preview

Deployment & operations

View repository

Updated 10-16 09:30

About this skill

Quick Deploy & Preview (Deploy & Preview)

Use Cases

  • Quick deployment of full-stack projects
  • PR preview environments
  • MVP launch
  • Demo environment
  • Internal tool deployment

Core Principles

1. 第一天就部署
   空项目也要部署,验证流水线

2. Preview 环境必备
   每个 PR 自动部署预览
  1. Environment variable tiering dev / staging / prod separated

  2. Database connection security No hardcoding, use environment variables

  3. One-click rollback Roll back within 5 minutes when problems occur


## 部署平台速查

| 平台 | 适合 | 免费额度 | 数据库 |
|---|---|---|---|
| **Vercel** | Next.js / Nuxt | 慷慨 | 需外部(Neon / Supabase)|
| **Railway** | 全栈(含 DB) | $5/月 | 内置 PG / Redis |
| **Fly.io** | Docker / 全球 | 有限 | 内置 PG |
| **Cloudflare Pages** | 静态 + Workers | 慷慨 | D1 / Turso |
| **Render** | 全栈 | 有限 | 内置 PG |
| **Supabase** | BaaS | 慷慨 | 内置 PG |
| **Docker Compose** | 自建 | - | 自建 |

## Vercel 部署(Next.js 推荐)

```bash
# 1. 安装 CLI
npm i -g vercel

# 2. 登录
vercel login

# 3. 部署(自动检测 Next.js)
vercel

# 4. 生产部署
vercel --prod

# 5. 环境变量
vercel env add DATABASE_URL production
vercel env add JWT_SECRET production
// vercel.json(可选)
{
  "buildCommand": "prisma generate && next build",
  "framework": "nextjs"
}

Railway Deployment (with database)

# 1. 安装 CLI
npm i -g @railway/cli

# 2. 登录
railway login

# 3. 初始化
railway init

# 4. 添加 PostgreSQL
railway add --plugin postgresql

# 5. 部署
railway up

# 6. 环境变量自动注入 DATABASE_URL

Docker Compose (self-hosted / local)

# docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/mydb
      - JWT_SECRET=${JWT_SECRET}
    depends_on:
      - db
      - redis

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: mydb
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

volumes:
  pgdata:
# Dockerfile
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npx prisma generate
RUN pnpm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Database Connection

Vercel + Neon(推荐):
  DATABASE_URL=postgresql://user:pass@ep-xxx.neon.tech/mydb?sslmode=require

Vercel + Supabase:
  DATABASE_URL=postgresql://postgres:pass@db.xxx.supabase.co:5432/postgres

Railway(自动注入):
  DATABASE_URL 自动设置

Docker Compose:
  DATABASE_URL=postgresql://user:pass@db:5432/mydb

Environment Variable Checklist

必需:
  DATABASE_URL          数据库连接
  JWT_SECRET            JWT 签名密钥
  NEXTAUTH_SECRET       NextAuth 密钥(如用)
  NEXTAUTH_URL          应用 URL

可选:
  GOOGLE_CLIENT_ID      社交登录
  GOOGLE_CLIENT_SECRET
  SMTP_HOST             邮件
  SMTP_USER
  SMTP_PASS
  S3_BUCKET             文件存储
  SENTRY_DSN            错误追踪
  REDIS_URL             缓存

Deployment Process

1. 选平台(Vercel / Railway / Docker)
   ↓
2. 配置环境变量
   ↓
3. 连接数据库
   ↓
4. 部署空项目(验证流水线)
   ↓
5. 运行 Migration
   ↓
6. 验证(健康检查 + 首页可访问)
   ↓
7. 配置域名(如需)
   ↓
8. 配置 Preview 环境(PR 自动部署)

Supporting Templates

  • templates/deploy-checklist.md — Deployment checklist + environment variables + database + domain

Quality Self-Check

□ 第一天就部署成功
□ Preview 环境可用
□ 环境变量不硬编码
□ 数据库连接正常
□ Migration 已执行
□ 健康检查通过
□ HTTPS 启用
□ 域名配置(如需)
□ 一键回滚可用
□ 监控接入(Sentry)

Common Pitfalls

  1. Deploying only at the end——Environment problems pile up
  2. Hardcoded environment variables——Leakage
  3. Database connection without SSL——Man-in-the-middle attack
  4. Not running Migration——Table does not exist
  5. Preview environment shares production DB——Data pollution
  6. Docker image too large——> 1GB
  7. No HTTPS configured——Insecure
  8. Rollback process unclear——Panic during failures

Collaboration with other skills

上游:
  fullstack-architecture → 部署平台选型
  e2e-feature-delivery → 部署是交付的最后一步

下游:
  devops-engineer(深度)→ CI/CD 正式化
  sre-operations → 监控告警