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 推到对象存储)
相关推荐
「、皓子~31 分钟前
海狸IM 2.1 正式发布
flutter·微服务·golang·electron·开源软件·im·海狸im
AICoder码农王32 分钟前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
律宏阔41 分钟前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究1 小时前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端
深念Y1 小时前
Nuxt 项目 Docker 构建:从 pnpm+node 迁移到全 bun
java·前端·docker
qq_426003961 小时前
UI自动化元素定位不到解决方案
前端·pycharm·自动化
EthanChou20201 小时前
AES67协议笔记
前端·笔记·es6
马优晨1 小时前
pom.xml 中 jquery webjars 依赖解释
xml·前端·jquery·jquery webjars·webjars依赖
星期一研究室1 小时前
原来每天在听的网易云是这样的……
微服务·产品·设计
里欧跑得慢1 小时前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web