📚 本教程將透過實戰案例，詳細介紹如何利用 Cursor 和 Devbox 開發環境，在一天內完成專業企業官網的開發和部署。適合產品經理、初級開發者或任何想要快速搭建網站的人群。
因為業務的需要，我需要開發一個英文網站，一直在使用 Cursor，Cursor 第一時間上線了最新模型，包括 openai 的 o1 preview 和 o1mini。雖然各個媒體把 o1 吹上了天，但我自己實際體驗下來，感覺編碼能力上，還是 Claude 3.5 sonnet 更強。
23 號早上起床，看到 Claude3.5 升級了最新版本，開啟 Cursor，點選模型選擇按鈕，第一眼就看到 daude-3-5-sonnet-20241022，臥槽，這踏馬也太爽了。哈哈。
與大模型打交道，提示器是關鍵，前陣子仔細琢磨了李繼剛老師的提示詞，看了吳恩達老師的提示詞教學影片。然後看了又到 Claude 與 OpenAI 的官網看了官方與提示詞相關的文件，受益匪淺。一個對大模型回答提升非常大的一點就是讓大模型不急著回覆，而是要求它逐步思考。
開乾的第一步，我想到了 Sealos 的新產品 Devbox。
為什麼會突然想到 Sealos 呢？因為我之前用過他們的雲開發產品和 AI 知識庫產品 FastGPT，都非常牛逼，一直混跡在他們官方社群中。他們每次發的文章都很有意思，我都看過，一點也不像其他技術文章那樣枯燥無味。
你們連 AI 都玩的那麼溜了，想必開發個網站並且無痛上線問題也不大吧？
正好前幾天他們的新產品 Devbox 釋出了，我就想試試。
建立 Devbox 開發環境
開乾的第一步，就是進入 Sealos 桌面，然後開啟 Devbox：
新建一個專案，語言選擇 Node.js，CPU 調整到 1C、記憶體 2G 就夠了，網路配置中記得將埠改為 3000 (待會兒我們會用 React 框架來寫)，系統會自動分配 HTTPS 域名，透過該域名即可訪問 Devbox 中的 3000 埠。
選擇框架後點選建立，幾秒鐘即可啟動開發環境。
在操作選項中選擇使用 Cursor 連線：
首次開啟會提示安裝 Devbox 外掛，安裝後即可自動連線開發環境。
是不是非常簡單？直接省略了配置域名解析、申請 SSL 證書，配置閘道器等與開發無關的繁瑣操作，爽！
動嘴讓 Cursor 寫程式碼
我們天天當牛馬都當夠了，現在我要當老闆，Cursor 給我當牛馬！
按下 Ctrl+I 開啟對話皮膚，第一次給的提示詞是：
我的公司是 antworers llc，公司的主營業務是提供 SaaS 服務，具體的服務內容請你來定。我現在需要開發一個官網。要求網站非常現代化，有蘋果官網的感覺，請你根據我的需要，一步一步思考，給我開發一個官網（使用 react 框架開發）
要求：如果需要執行命令，請暫停建立檔案，讓我先執行命令
由於 Cursor 目前只能幫我們新建檔案，還不能幫我們執行命令，所以我在提示詞中說明了如果有執行命令的需求，就通知我執行，執行完了它再繼續。
執行命令初始化專案之後，它就開始給我吭哧吭哧幹活了。我就看著它給我新建資料夾，新建檔案，寫程式碼，一頓操作猛如虎。
如果遇到依賴安裝比較慢的問題，可以使用以下命令替換成國內源：
npm config set registry https://registry.npmmirror.com
一陣忙完它還問我，有哪些區，你要先完成哪部分，這些無所謂的問題就由它自己來定了。
哈哈，它又是一通忙活。這可能就是新版 Claude 的新功能，他能與使用者互動，並根據使用者的反饋調整自己的回答。我覺得非常好。這在以前是沒有這功能的。有一個外掛原來叫 Claude dev 現在叫 Cline，它的能力也非常強，也與使用者互動，但它每一步都要求使用者確認，我覺得有點囉嗦。而現在 Cursor+新版 Claude3.5 這點控制得非常好。
一通輸出完成後，我問它怎麼看到效果。其實我知道怎麼做，只是閒得蛋疼故意調戲哈大模型。它告訴我要在終端命令列輸入啥啥啥的。這一點 Cursor 做得不如 Cline，Cline 在這種情況下它會自動呼叫終端命令，只要你點選確認就會直接編譯執行，這點 Cursor 後期估計也會上。
在網頁開啟的那一瞬間，這畫面不能說是達到我的要求，而是遠遠超出我的預期，頁面的配色，排版，動畫完全驚豔到我了，因為前不久我也用 Cursor 寫了個網頁，來來回回溝通很久也沒達到我要的效果。而這次是第一版就遠遠超出我的預期了。先給大家看看效果。
在 Devbox 開發環境中預覽網頁非常簡單，直接使用之前建立 Devbox 開發環境時自動分配的 HTTPS 域名進行訪問即可。
當然，因為我沒告訴它公司具體業務，所以它在頁面裡呈現的內容也非常空泛，就像寫報告一堆空話屁話一樣。這就需要你一步一步來跟大模型交流了。
就這樣幾輪對話網站大體上就成型了。後續再幫我修改內容，改成中英文雙語版。
過程中也可能不斷出錯，你把錯誤告訴它它就會自動幫你改改改，搞得我像個甲方爸爸了。在整個過程中，我始終沒有手動寫過一句程式碼，也沒手動修改一句程式碼。一來我是想試試大模型的能力，再個最主要的原因還是不想費那神。新 Claude3.5 sonnet 確實也沒讓我失望。
最終網站效果：
網站上線
前端頁面完成，洋洋灑灑放了這一通彩虹屁後，後端部署也需要重點講講。對於我當前網站，我知道就算一年也沒幾個人來看，但是又需要它裝個門面，所以要求就是 1 要便宜，2 要簡單，那些要敲各種 Linux 命令的方案我看到就暈。
而在 Devbox 開發環境裡開發的專案部署起來非常的簡單無腦。。。
來，看步驟：
為了保持專案結構簡單，我們需要把專案中的所有檔案移到根目錄，可以在 Cursor 中開啟終端，然後執行以下命令：
cp -rf antworers-website/* .
cp -rf antworers-website/.* .
rm -rf antworers-website
接下來我們需要往 entrypoint.sh 這個檔案中寫入專案的啟動命令 (因為 Devbox 專案釋出之後的啟動命令就是執行 entrypoint.sh 指令碼)。
指令碼修改完並儲存之後，點選【釋出版本】：
填寫資訊後點選【發版】。
注意：發版會暫時停止 Devbox，發版後會自動啟動，請先儲存好專案避免丟失資料。
稍等片刻，即可在版本列表中找到發版資訊，點選上線後會跳轉到部署頁面，點選部署應用即可部署到生產環境。
CPU 和記憶體可以根據自己的專案情況進行調整。
生產環境分配的 HTTPS 域名與開發環境獨立，部署後即可透過生產環境域名訪問服務。
我的線上 demo 會一直放在這邊不刪 (至少放一個星期吧)，想直觀看到效果的同學可以透過這個域名訪問：https://tbhkzwzfjbvb.hzh.sealos.run
總結
Sealos 的操作確實是簡單，而且費用也確實是低。如果選擇最低配置，一天才幾毛錢。
從專案開始到上線，總共只需要 1 天時間，其實還是利用空餘時間來做的，因為我不是專職碼農。這效率放到以前想都不敢想。很多自媒體都在唱 AI 要取代程式設計師，它這是在取代程式設計師嗎？這分明是在助力程式設計師啊！ 害得我恨不得把原來寫的哪些屎山程式碼拿出來重新翻炒一番了。