本文へ移動
cccskills
無料GitHub で公開

deploy-preview

快速部署 + 预览环境时使用。适用于 Vercel / Railway / Fly.io / Cloudflare / Docker Compose 快速上线。融合 Preview 环境 + 环境变量 + 数据库连接 + 域名。

インストール方法を見る

含まれるファイル(2)

  • SKILL.md5.1 KB
  • templates/deploy-checklist.md703 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

快速部署 + 预览(Deploy & Preview)

适用场景

  • 全栈项目快速部署
  • PR 预览环境
  • MVP 上线
  • Demo 环境
  • 内部工具部署

核心原则

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

2. Preview 环境必备
   每个 PR 自动部署预览

3. 环境变量分级
   dev / staging / prod 分开

4. 数据库连接安全
   不硬编码,用环境变量

5. 一键回滚
   出问题 5 分钟内回滚

部署平台速查

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

Vercel 部署(Next.js 推荐)

# 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 部署(含数据库)

# 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(自建 / 本地)

# 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"]

数据库连接

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

环境变量清单

必需:
  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             缓存

部署流程

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

配套模板

  • templates/deploy-checklist.md — 部署清单 + 环境变量 + 数据库 + 域名

质量自检

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

常见坑

  1. 最后才部署——环境问题堆积
  2. 环境变量硬编码——泄露
  3. 数据库连接不加 SSL——中间人攻击
  4. 不跑 Migration——表不存在
  5. Preview 环境共享生产 DB——数据污染
  6. Docker 镜像太大——> 1GB
  7. 不配 HTTPS——不安全
  8. 回滚流程不清——故障时慌

与其他 skill 的协作

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

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

A/B 测试设计与分析时使用。适用于产品实验、功能验证、转化率优化。融合假设驱动 + 样本量计算 + 置信度判断。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

上线前业务方/产品方验收时使用。适用于功能交付确认、UAT、发布会签。融合 BDD Given-When-Then、Specification by Example、ATDD。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

设计无障碍可访问的界面时使用。适用于满足 WCAG 标准、键盘导航、屏幕阅读器支持。优先使用 WCAG 2.2 AA 级标准 + 键盘 + 焦点 + 对比度 + ARIA。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

实现可访问性(无障碍)时使用。覆盖 WCAG 2.2 AA / ARIA / 键盘导航 / 屏幕阅读器 / 颜色对比 / 焦点管理。融合 React Aria / Radix UI / Headless UI 实践 + axe-core 自动化测试。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

AI 模型部署时使用。适用于推理服务 / GPU / TensorRT / 监控 / 扩缩容。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

数据分析报告输出时使用。适用于业务分析报告、周报、专项分析、决策支持。融合洞察 + 建议 + 行动项。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

zhaoxuya520 のスキルをすべて見る

このスキルの問題を報告する