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