100x 建設者手冊:自我託管的 Next.js 與 Kamal 2 和雲端虛擬機

在幾天內發送您的產品。告別伺服器恐懼症!

本課程已經機器翻譯成 繁體中文

screenshot

你好!感謝你花時間閱讀這本書。
現在是2024年底,顯然我們在全球面臨許多挑戰:通貨膨脹沒有停止,借錢變得更加困難,科技公司的預算也更加緊縮。

但有一件事沒有改變:人們期望從他們購買的任何商品或服務中獲得更多價值。
作為一名科技工作者和創作者,我相信我們需要適應這些挑戰,並以更少的努力建造更多的東西。
我們不僅需要快速交付,更需要真正構建,使用成熟的技術堆棧,並降低計算成本,即裸金屬或雲虛擬機。

隨著大型語言模型的增長,開發軟體應用程序不再像以前那樣昂貴和緩慢。
同時,越來越多的新技術堆棧被創建以促進開發。
然而,我們一直被教育成為“DevOps是昂貴且風險高的”,“你應該無伺服器”。
我曾經也這樣相信過。我嘗試了許多來自Google App Engine的無伺服器堆棧,但沒有找到適合我業務的選擇。近年來,我們有許多其他選擇,如Vercel。儘管我尊重他們在開發體驗方面的努力,但我仍然相信無伺服器並不是一種可持續的建設方式。

上個月早些時候,DHH在37signals/basecamp發布了Kamal 2,基於去年發布的Kamal (MSRK)。它有一個巨大的新功能,允許你在單個Linux機器上部署多個不同的Web應用程序。這在Kamal 1中實際上是可能的,但需要許多黑客技術。
對於一人或少數人團隊來說,這是一個有用的變化。因為你甚至可以在早期項目中節省更多。

同時,Gumroad的CEO 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%的其他技術堆棧更務實的真實世界技術堆棧的思考和分享的第一部分。它不僅旨在快速交付,還以低成本(無論是消耗的時間還是運行時的雲費用)進行交付。因為正如Jeff Bezos所說,“你的利潤就是我的機會”。如果你的競爭對手在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來添加這個文件,內容如下: