将 Next.js + Pocketbase 部署到单台 Fly.io 机器

# Web 开发# 编程# Typescript# 初创公司

我经常启动业余项目，和许多人一样，我试图尽快推出产品。我以前以为 Next.js + Supabase 已经触及了极乐世界，但做了这么多项目之后，你不得不开始向 Supabase 支付大笔费用！

完成两个项目后，您需要每月向 Supabase 支付 25 美元，每增加一个项目，每月需额外支付 10 美元。对于尚未赚钱的副业来说，价格昂贵。

nicholaso​​xford/pocketwatcher

🚀 带有 PocketBase 和 shadcn/ui 的可用于生产的 Next.js 模板。包括身份验证、漂亮的 UI 组件和一键部署。

袖珍守望者

Next.jsPocketBaseshadcn/uiBunLicense

概述

一个现代的全栈模板，结合了 Next.js 的强大功能、PocketBase 的简单性以及 shadcn/ui 的美观性。非常适合快速启动具有身份验证和精美 UI 的生产就绪 Web 应用程序。

特征

  • 🚀 Next.js 15+ 应用路由器
  • 📦 PocketBase 后端具有内置身份验证
  • 🎨 来自 shadcn/ui 的精美 UI 组件
  • 🌐 服务器端渲染和客户端交互
  • 🔄 使用 React Server Actions 处理表单
  • 🔐 通过电子邮件/密码完成身份验证系统
  • 🐳 生产就绪的 Docker 设置
  • ☁️ 一键部署至 Fly.io
  • 🔒 基于 cookie 的安全身份验证
  • 🛡️ 使用 TypeScript 进行类型安全开发
  • ⚡ Bun 用于快速包管理和运行脚本

    • 入门

    先决条件

  • 良好的运行时间
  • Fly.io CLI（用于部署）

    • 本地开发

  • 克隆存储库：
    • git clone https://github.com/yourusername/pocketwatcher.git
cd pocketwatcher
  • 安装依赖项：
    • bun install
  • 启动开发服务器：

    • 在一个终端中，启动 PocketBase：

    ./pocketbase serve

    在另一个终端中，启动 Next.js 开发服务器：

    bun run dev
  • 访问应用程序 Next.js：http://localhost:3000 PocketBase Admin…
    • 在 GitHub 上查看

    我部署了太多的 Supabase 项目，因此我创建了一个 CLI，用于在 fly.io、Supafly 上自行托管 Supabase

    业余项目的成败取决于烦人的阻碍，这些阻碍不该阻碍你前进。在完成 10、15、20 个左右的业余项目后，你可能会开始了解何时应该使用哪个平台。

    如果我们能够以熟悉的方式在一台机器上托管整个应用程序会怎么样？我们的数据库、API 和前端。我们还应该能够托管这些，并轻松进行本地开发。使用 Supabase 进行本地开发通常有点烦人。

    Charles Sheeler Painting

    这为您提供了身份验证、SQLite 数据库（基于）、自部署的 next.js 应用程序（也是您的 api 层）以及轻松执行文件上传 + 电子邮件的能力。

    将您的堆栈部署到 fly.io

    让您的应用上线非常简单。与传统的部署不同，您需要同时处理多个服务，而这一切都可以一次性完成。

    首次设置

    如果尚未安装 Fly.io CLI，请安装

    curl -L https://fly.io/install.sh | sh
fly auth login

    启动过程

    bun run launch

    运行此程序时，您会看到两个提示：

    "Do you want to tweak these settings before proceeding?"
→ Just hit enter (the defaults work great)
"Would you like to allocate dedicated ipv4 and ipv6 addresses now?"
→ Type Y (you'll need this)

    获取管理员权限

    这是经常让人犯难的关键部分。您的 PocketBase 管理员设置需要一个特殊的 URL，但很容易找到：

    fly logs | grep pbinstal
This will show you something like:
Copyhttp://0.0.0.0:8090/api/admins/confirm-password-reset?token=YOUR_TOKEN_HERE

    替换为

    保持 URL 路径和 token 的其余部分完全相同

    设置完成后，您可以通过以下方式访问您的应用：

    主应用程序：https：//your-app-name.fly.dev

    管理面板：https：//your-app-name.fly.dev：8091/_/

    专业提示

    如果你没有立即看到 pbinstal 日志，请等待片刻，然后重试 logs 命令

    在设置帐户之前，请妥善保管初始管理员 URL

    设置管理员帐户后，该初始 URL 将不再起作用（这是一项安全功能）

    请访问 nicholaso​​xford.com 查看我的更多作品

    使用以下方式制作的项目：domainbobber.com