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 推到对象存储)
相关推荐
无限进步_1 小时前
【C++】C++11的类功能增强与STL变化
java·前端·数据结构·c++·后端·算法
一只小小Java1 小时前
Echarts单表多图实现
前端·javascript·echarts
dunky1 小时前
Spring AI 深度解析:把 LLM 抽象成 Spring Bean 的底层逻辑
前端
星栈1 小时前
Rust WASM 文件上传全链路:从浏览器到 S3,一个字节都不能少
前端·前端框架·开源
濮水大叔1 小时前
告别 Django Admin!这个 NodeJS 全栈框架让你在 DTO 中直接配置 Table/Form 渲染
前端·typescript·node.js
JarvanMo1 小时前
Flutter 3.44 & Dart 3.12重磅发布!这些新特性太香了
前端
竹林8181 小时前
用Viem替换ethers.js:一次合约交互的"减负"实战,我总算把TypeScript类型搞明白了
前端·javascript
To_OC1 小时前
一个让我懵了半小时的时钟 Bug,注重前端三权分立落地
前端·代码规范
归故里2 小时前
harmony-next.skills 为 AI 而生!
前端·后端·github