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 推到对象存储)
相关推荐
用户938515635077 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep8 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端8 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望8 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
90后的晨仔9 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔9 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端
kyriewen9 小时前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
谢小飞10 小时前
大文件上传很难?学会这招,GB文件秒传不是梦
前端·node.js
程序员黑豆10 小时前
Windows 系统 Java 环境变量配置全攻略:解决“不是内部或外部命令”
java·前端·ai编程
To_OC11 小时前
别只拿 useRef 绑 DOM 了,搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom