Sealos Devbox 使用指南：创建一个逼真的苹果官网原型
🚀 本教程将通过实际案例详细讲解如何使用 `Cursor` 和 `Devbox` 环境，在一天内完成企业官网的开发和部署。适合产品经理、初级开发者或任何想要快速搭建网站的人群。
由于业务需求，我需要开发一个英文网站。我一直使用 `Cursor`，它在最近上线了新的模型，包括 OpenAI 的 O1 preview 和 O1mini。虽然各个媒体都吹捧O1，但我自己实际体验下来，感觉编码能力上还是 Claude 3.5 sonnet 更强。
23号早上醒来时，我看到Claude3.5升级到了最新版本，并立即点击模型选择按钮。一眼就看到了daude-3-5-sonnet-20241022。哈哈！
我最近遇到了一个与大型模型打交道的难题——提示器。我在李继刚老师的提示词和吴恩达老师的教学视频中花了不少时间琢磨，并且观看了Claude与OpenAI的官网文档以及官方关于提示词的相关信息。这些学习经历让我受益匪浅，特别是了解到让大型模型在回答问题时逐步思考的重要性。
在提升大模型回答能力的一个关键点上，我意识到一个对大型模型的回答质量有显著影响的是通过引导其逐步思考的方式。例如，当问到一个问题时，不急于直接给出答案，而是要求模型一步一步地思考和推理。
我决定尝试一下Sealos的新产品Devbox。此前我对他们之前的产品——云开发平台FastGPT和AI知识库产品感兴趣，并且经常在他们的官方社群中混迹。每次发布的文章都充满了趣味性，阅读起来一点也不枯燥无味。
你们这些技术达人肯定也能轻松开发一个网站并实现无痛上线吧？这让我想起了近期Sealos的新品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 只能帮我们创建新文件，暂时还不支持执行命令。因此我在提示语中明确标注，如果有需要执行命令的情况，请告诉我进行操作，并等它完成后继续。
在执行命令初始化项目后，Cursor 就开始忙碌起来。我看着它创建了文件夹和文件，同时编写代码，仿佛是辛勤的“小蜜蜂”。
如果遇到依赖安装速度较慢的问题，可以尝试替换 npm 的国内源配置为：npm config set registry https://registry.npmmirror.com
这样就能加快项目初始化的速度，提升工作效率。
有一阵，我问它还有哪些区域可以进行。它告诉我，你需要先完成哪些部分工作。这些问题其实都是由它自己决定的。
哈哈，这家伙又是一通忙活。这可能就是新版Claude的新功能之一，它能够与用户进行互动，并根据用户的反馈调整回答内容。我觉得非常好。以前没有这个功能。有一个插件原来叫Clade Dev，现在叫Cline。它的能力也很强，但每一步都需要用户确认，感觉有点啰嗦。而现在Cursor+新版 Claude 3.5这一点控制得非常好。
一通输出完成后，我问它怎么能看到效果。其实我知道怎么做，只是闲得蛋疼故意调戏Claude大模型。它告诉我要在终端命令行输入什么啥啥的。这一点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 将持续展示此一周（至少），有兴趣的同学可以通过这个域名访问：tbhkzwzfjbvb.hzh.sealos.run
Sealos 的操作确实简单，费用也相对较低。最低配置一天才几毛钱。
从项目开始到上线，总共只需要 1 天时间。其实我也是利用空闲时间来完成的，并非专职码农。效率提升真是令人难以置信。
很多自媒体都在唱 AI 要取代程序员，这是否是在替代程序员呢？分明是为程序员提供助力！让我不得不重新审视自己以前写的那些“屎山代码”。