100倍构建者手册:自托管的 Next.js 与 Kamal 2 和云虚拟机

在几天内发货您的产品。告别服务器恐惧症!

本课程已机器翻译为 简体中文

screenshot

你好!感谢你花时间阅读这本书。
现在是2024年底,显然我们在全球面临许多挑战:通货膨胀没有停止,借钱变得更加困难,科技公司的预算更加紧张。

但有一件事没有改变:人们期望从他们购买的任何商品或服务中获得更多价值。
作为一名科技工作者和创作者,我相信我们需要适应这些挑战,以更少的努力创造更多。
我们不仅需要快速交付,还需要真正构建,使用成熟的技术栈进行迭代,降低计算成本,即裸金属或云虚拟机。

随着大型语言模型的增长,开发软件应用程序不再像以前那样昂贵和缓慢。
与此同时,越来越多的新技术栈被创建以促进开发。
然而,我们一直被教育成“DevOps是昂贵和风险的”,“你应该无服务器”。
我曾经也被说服过。我尝试了许多来自Google App Engine的无服务器栈,但没有找到适合我业务的。在最近几年,我们有很多其他选择,比如Vercel。尽管我尊重他们在开发体验方面的努力,但我仍然相信无服务器并不是构建事物的可持续方式。

上个月早些时候,DHH在37signals/basecamp发布了Kamal 2,基于去年发布的Kamal (MSRK)。它有一个巨大的新特性,允许你在单个Linux机器上部署多个不同的Web应用程序。实际上,这在Kamal 1中是可能的,但需要许多黑客手段。
对于一人或少数人团队来说,这是一个有用的变化。因为你甚至可以在早期项目中节省更多。

与此同时,Gumroad的首席执行官Sahil Lavingia进行了几次与Cursor和Next.js的实时编码流,展示了生产中的示例,这非常高效,只要你对TypeScript(或JavaScript)、CSS和一点命令行有基本了解。

目前,对于小团队的成长项目,一个完美的技术栈是Next.js,使用Docker交付,使用Kamal 2。
在我们开始之前,我想介绍一下自己。我出生于1990年代,1999年开始编程和使用互联网,那时我父亲开始申请硕士学位。那时,我们家里没有任何电脑。我和我父亲去网吧获取信息。
毕业后,我去了微软,参与了几个不同的项目,包括Outlook iOS、Android、Mac、Web和OneDrive/Sharepoint Web。我见过许多百万行代码的项目(显然包括Outlook和OneDrive)。有趣的是,你可以在photos.onedrive.com找到所有客户端代码的源映射。这些项目是公司的摇钱树。但我认为它们并不是软件开发的正确路径。简而言之,执行太慢,你无法看到技术对成功的贡献,至少截至今天。这些项目有良好的代码,相对现代的设计。但我觉得这是错误的,特别是在AI发展的背景下。因此,我离开了微软,开始了自己的事业。

本教程(也是一个社区)是对一个比99%的其他技术栈更务实的真实世界技术栈的思考和分享的第一部分。它不仅旨在快速交付,还以低成本(无论是时间消耗还是运行时云费用)进行交付。正如杰夫·贝索斯所说,“你的利润就是我的机会”。如果你的竞争对手在Vercel或Azure/AWS上,你在使用这个栈(Next.js + Kamal 2)时将有更多机会。我相信它在我们的IPO之前就能奏效 : )
感谢你阅读这一初步部分。希望你会喜欢。

现在,让我们专注于技术。

技术要求

本书主要涉及技术内容。以下是一些要求:

  • 硬件:一台可以运行Ruby、Docker、Node.js的计算机,通常Windows/Mac/Linux都适合。
  • 知识:
    • 最少或没有Ruby知识
    • Node.js(构建Next.js产品所需)
    • Next.js或其他Node.js框架,如Express.js
    • 基本的Linux/Docker知识

请确保在本地计算机上安装了Docker(或Docker Desktop)。如果没有,也可以接受在Linux机器上使用远程docker环境作为“构建器”(我们将在Kamal 2部分讨论这个概念)。

如果你发现这本书可能不适合你,不用担心,只要你没有完成超过30%的内容,你可以在购买后7天内申请退款。
如果你希望保持这本书的可访问性,但仍有一些建议或困难,请在本页下方评论,我们会帮助你。

快速开始:在15分钟内最小化Next.js生产环境

我们不想在进入生产之前耽搁你太久。因此,对于第一个项目,让我们开始一个最小的Next.js项目,并立即将其部署到生产环境。通常在许多书籍中,最后一部分是关于部署到生产环境的。那样我们无法快速交付。
我相信开发的最佳节奏是在确保代码完成且回归风险较低后立即交付到生产环境。
假设你已经准备好所有开发环境和云服务器(如DigitalOcean、OVH、Hetzner等的虚拟机),我们可以100%在15分钟内完成部署。第二次,你可能只需要5分钟就能让它工作。一旦你习惯了,你就不会失去构建产品的任何动力!

所以让我们先进行部署!

开始一个Next.js项目

你可以使用以下命令开始一个Next.js项目:npx create-next-app@latest next-kamal-playbook-minimal-demo
如果你对这个过程不熟悉,可以阅读Next.js的官方文档,https://nextjs.org/docs/getting-started/installation

输出将类似于

➜  next-playground npx create-next-app@latest next-kamal-playbook-minimal-demo
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*

你可以选择是否自定义默认导入别名。对于当前状态来说,这并没有太大关系,我们可以随时在后面更改。

下一步是确保最小演示正在运行。你可以切换到next-kamal-playbook-minimal-demo目录(在Linux/Mac/Windows上,你也可以在终端中运行cd next-kamal-playbook-minimal-demo),然后运行npm run dev
当打开http://localhost:3000时,你可以看到Next.js的初始屏幕。这意味着这个项目正在运行。
我们在这一部分不想更改任何Next.js代码。相反,我们将向该项目的根目录添加一个Dockerfile。你可以使用VSCode/Cursor或Vim添加这个文件,内容如下: