HOW - 构建一个轻量前后端一体服务

文章目录

  • [方案 A:PocketBase + 自己写前端(强烈推荐,最轻量)](#方案 A:PocketBase + 自己写前端(强烈推荐,最轻量))
  • [方案 B:Next.js 全栈一体(最现代)](#方案 B:Next.js 全栈一体(最现代))
  • [方案 C:Directus / Strapi / Payload CMS(管理后台最强)](#方案 C:Directus / Strapi / Payload CMS(管理后台最强))
  • 三套方案对比
  • [服务器 + 域名规划](#服务器 + 域名规划)

一个域名 + 一台 2C2G 的 VPS 完全足够,而且这种需求是"轻量后台 + 内容站"的经典场景,有很多成熟到几乎不用写后端代码的方案。下面按"省心程度"从高到低给三个推荐,挑一个最对路的就行。

方案 A:PocketBase + 自己写前端(强烈推荐,最轻量)

适合: 个人 / 小团队、想最快跑起来、又想保留自己写前端的自由度。

PocketBase 是一个 Go 写的单二进制文件(10MB 左右),内置:

  • SQLite 数据库(一个 .db 文件,备份就是拷贝文件)
  • 管理员后台 UI(开箱即用,自动按表生成 CRUD 界面)
  • 用户/管理员认证(JWT、OAuth、邮箱)
  • 自动 REST API + 实时订阅(WebSocket)
  • 文件存储、定时任务、钩子函数

前端用 Vite + React/Vue(或者就 HTML/CSS/JS)调用 pb.collection('xxx').getList() 即可。

代码量: 后端 0 行(最多写几个 hook),全部精力放前端。

部署:

bash 复制代码
服务器
├── /opt/pocketbase/pocketbase serve   # 后端进程,监听 8090
└── /opt/site/dist/                    # 前端静态文件
Nginx 反代:
  yourdomain.com         → /opt/site/dist (前端)
  yourdomain.com/api/*   → 127.0.0.1:8090 (PocketBase)
  yourdomain.com/_/      → 127.0.0.1:8090 (PocketBase admin UI)

方案 B:Next.js 全栈一体(最现代)

适合: React 派、希望前后端代码在同一个仓库、未来想 SSR 优化 SEO。

Next.js 一个项目同时承载:

  • 前端页面(App Router、SSR/SSG)
  • 后端 API(app/api/* 路由,等同 Express)
  • 管理后台(自己写几个 /admin/* 页面)
  • 认证: Auth.js(NextAuth v5),邮箱/账号密码 5 分钟接好
  • 数据库: SQLite + Drizzle/Prisma(小项目首选);以后流量大了无缝换 PostgreSQL

部署:pm2 start npm -- start 或 Docker;Nginx 反代 3000 端口。

代价: 后端代码要自己写、管理后台要自己写界面(用 shadcn/ui 也很快)。

方案 C:Directus / Strapi / Payload CMS(管理后台最强)

适合: 内容字段会经常变、需要给非技术人员用、有富文本/多语言/媒体库需求。

  • Directus / Payload 等 headless CMS:管理后台比 PocketBase 强大很多(关系、权限、版本、媒体库、Webhook...),同样自带 API。
  • 前端依然开发自己写,调用它的 REST/GraphQL。
  • 比 PocketBase 重一些(需要 Node.js + 通常 PostgreSQL),但小项目用 SQLite 也行。

三套方案对比

服务器 + 域名规划

  • 服务器: 一台 2C2G 的 VPS 足够(阿里云/腾讯云/Vultr/Hetzner 都行,月费 ¥30~¥50)
  • 域名: 一个就够,两种切法二选一:
    • 路径切分(推荐,省事):yourdomain.com 跑前端,yourdomain.com/api/* 走后端,yourdomain.com/admin 走管理后台
    • 子域名切分:www.yourdomain.com(前端)+ api.yourdomain.com(后端)+ admin.yourdomain.com(后台)------ Nginx 配 3 个 server block
  • 必备配置:
    • Nginx 反向代理(统一入口、gzip、缓存)
    • Caddy 是更省心的选择,自动签发并续期 HTTPS,配置文件比 Nginx 短得多
    • Let's Encrypt SSL(Caddy 自动;Nginx 用 certbot)
    • ufw 只开 22/80/443
    • 数据库文件定时备份(SQLite 就是 cp 一下,配合 rclone 推到对象存储)
相关推荐
fanly1114 小时前
Surging AI Agent 完整产品介绍
微服务·microservice
kyriewen17 小时前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试
IT_陈寒17 小时前
Java的Date类又坑了我一次,改用时间戳真香
前端·人工智能·后端
小林攻城狮18 小时前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js
前端缘梦18 小时前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)
前端·react.js·全栈
the_answer18 小时前
Webpack vs Vite 深度对比分析
前端·webpack
转转技术团队19 小时前
验证码识别实战:前端不写页面,改训模型了?
前端
MomentYY19 小时前
Temperature:AI 的“脑洞旋钮”
前端·llm·ai编程
远航_19 小时前
OpenSpec 完整详细介绍
前端·后端
召钱熏19 小时前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端