Bolt.diy:5分钟打造你的专属AI建站平台

Bolt.diy开源AI建站平台,5分钟快速部署。自然语言交互,全栈开发,支持多模型,灵活定制,智能辅助。体验云原生AI建站,释放你的创意。

原文标题:超强辅助,Bolt.diy 一步搞定创意建站

原文作者:阿里云开发者

冷月清谈:

Bolt.diy 是 Bolt.new 的开源版本,旨在提供更灵活和可定制的 AI 建站体验。它通过自然语言交互简化开发流程,支持全栈开发,并允许用户进行二次开发。文章介绍了如何利用阿里云云原生应用开发平台 CAP,结合函数计算 FC 和百炼模型服务,快速部署 Bolt.diy。用户可以体验流畅高效的开发流程,无需担心底层资源管理和运维问题。Bolt.diy 支持多种大语言模型,具备可扩展性和高度定制化特性,覆盖全栈开发流程,并提供智能化的辅助工具,例如AI代码错误分析和修复建议。文章详细介绍了部署步骤,包括账号准备、应用部署、访问示例应用、配置百炼 API-KEY 以及创作和下载代码。最后,提醒用户注意清理资源,避免产生不必要的费用。

怜星夜思:

1、Bolt.diy 强调了低代码甚至无代码的建站体验,这是否会降低前端工程师的价值?未来前端工程师的核心竞争力会是什么?
2、文章提到了 Bolt.diy 基于函数计算 FC 搭建,并集成了阿里云百炼模型服务。如果我想把 Bolt.diy 迁移到其他的云平台,例如 AWS 或 Azure,需要做哪些调整?
3、文章中提到可以使用 Bolt.diy 进行多模型对比,实际应用中,应该如何科学地评估不同模型的优劣?仅仅依靠生成的代码能否运行成功来判断是否合理?

原文内容

Bolt.new是stackblitz推出的一款AI编辑器,作为一个在线开发沙盒平台,结合了人工智能(AI)和WebContainers技术,其优势在于无需复杂配置即可在完整的开发环境下完成AI驱动的开发流程。但是由于Bolt.new是一个在线平台,因此它完全依赖于网络连接。在网络不稳定或中断的情况下,可能会导致开发流程中断或数据丢失。虽然Bolt.new支持多种主流浏览器,但在某些特定浏览器或旧版本浏览器中可能会存在兼容性问题。这可能会限制某些开发者的使用。[1]

Bolt.diy 是 Bolt.new 的一个开源版本,它提供了更高的灵活性和可定制性,通过自然语言交互简化开发流程,并提供全栈开发支持,同时允许用户二次开发。基于函数计算 FC 搭建并集成阿里云百炼模型服务,可以实现 Bolt.diy 的快速云端部署。

对于个人开发者,即便是无全栈开发经验也可快速上手,快速验证创意可行性;进一步可实现多模型对比、快速构建 AI 增强型应用;对于企业用户,还能够轻松实现内部业务系统与 AI 能力深度整合,定制 AI 解决方案!

5 分钟实现部署,打造专属 Bolt.diy

本文旨在介绍如何将 Bolt.diy 部署到云上,通过云原生应用开发平台 CAP 构建 Web 服务,通过其提供的函数计算资源,结合百炼的模型服务能力,采用deepseek-v3实现代码生成,可即时查看生成的代码及运行预览效果,体验流畅高效的开发流程借助 CAP还可以快速便捷地部署开源项目,而无需担心底层资源管理和运维问题,从而专注于应用的创新和开发。

(云原生应用开发平台 CAP 提供免费使用,其基于函数计算构建 Web 服务 按量计费,百炼和函数计算提供了免费试用额度;如果免费试用额度已耗尽,体验本方案预计成本不超过 10 元。)

多模型灵活适配

支持多种大语言模型(如 OpenAI、DeepSeek、Gemini、Hugging Face 等),用户可根据场景需求为不同任务指定特定模型,提升任务匹配度。

可扩展性与高度定制化

采用模块化架构,支持自定义 Docker 服务和集成第三方工具,提供了高度的灵活性。支持通过插件扩展,甚至集成本地私有模型(如自训练的LLM)。

全栈开发全流程覆盖

通过自然语言交互生成前后端代码(如 React 前端、Node.js 服务端),支持实时调试、版本管理和一键部署。内置可视化工具管理 SQL/NoSQL 数据库,支持自动生成数据模型和 API 接口。

智能化辅助工具

AI 实时分析代码错误并生成修复建议,减少手动调试时间。同时,提供代码结构图谱和依赖关系可视化,帮助快速理解复杂项目。

部署流程

准备账号

开始部署前,请按以下指引完成账号申请、账号充值。如果没有阿里云账号,访问阿里云账号注册页面[2],根据页面提示完成注册。记得领取阿里云百炼提供的新人免费额度[3]以及函数计算提供的试用额度(在此领取[4])。额度消耗完后按量计费。首次访问阿里云百炼大模型服务平台[5]或首次使用函数计算服务控制台[6],均需根据页面提示完成开通及授权。

部署应用

1. 点击前往部署[7]打开云原生应用开发平台 CAP 项目模板,参数选择默认配置,然后单击部署项目,最后在弹出面板中单击确认部署,部署预计等待 1 分钟。

说明首次使用云原生应用开放平台 CAP 会自动跳转到访问控制快速授权页面,滚动到浏览器底部单击确认授权,等待授权结束后单击返回控制台

2. 部署完成后,类似下图所示。

访问示例应用

1. 应用部署完成之后按照下图找到访问地址。

2. 点击访问地址,在浏览器中,会自动跳转为 HTTPS 链接地址。提示安全证书警告或错误,可以选择点击高级选项,然后点击继续前往以访问该网站。

说明:Bolt.diy 底层依赖 WebAssembly,其中用到了 SharedArrayBuffer。为了满足跨源隔离的要求并确保安全地使用如 SharedArrayBuffer 这样的功能,Bolt.diy 需要保证其所有资源均通过 HTTPS 协议提供。

3. 进入示例应用。

说明首次进入应用 3 秒后将自动刷新页面加载默认配置。

获取并配置百炼 API-KEY

1. 获取百炼 API-KEY。

  • 登录阿里云百炼大模型服务平台[5]

  • 单击顶部应用,在左侧导航栏单击API-Key。

  • 选择全部API-KEY我的API-KEY,然后创建或查看API-KEY。

说明

1)仅主账号拥有查看全部API-KEY的权限。主账号可以获取所有子账号的API-KEY,子账号仅能获取自己的API-KEY。

2)请不要将API-KEY以任何方式公开,避免因未经授权的使用造成安全风险或资金损失。

  • 单击操作列中的复制按钮,复制API KEY。

2. 配置百炼 API-KEY。

  • 按照下图所示,单击编辑按钮。

  • 输入百炼 API-KEY ,然后点击对号,保存配置。

  • 配置完成如下图所示。

使用提示词进行创作

  1. 按照下图所示单击提示词进行创作。

说明

本方案推荐使用deepseek-v3模型进行代码生成,如果需要尝试其它模型可以下拉更改模型。

2. 工作区域说明,如下图所示。

3. 代码自动生成中如下图所示。

4. 如果出现下图所示,说明代码生成结束。

5. 预览网页(相同提示词在 AI 生成过程中存在一定的差异)。

说明

1. 如果出现下图错误提示,不能自动预览可以尝试执行命令npm install安装依赖,然后执行命令npm run dev运行项目。

2. 如果出现 Terminal Error 错误可以单击 Ask Bolt,让 AI 自动处理问题。

3. 如果出现如下图所示,请在右侧命令行,执行命令Ctrl+C结束进程,然后执行npm run dev命令。

4. 如果在预览界面中出现错误,可以复制错误信息发送给模型进行修复。

下载代码

1. 如果 AI 编写的代码已符合需求,在Terminal中输入npm run build并敲击回车执行。

2. 待命令执行完成后,左侧的Files中会新增一个名为dist的文件夹。之后点击上方的Download Code下载代码压缩文件。

说明当前测试域名由 Serverless Devs 社区所提供,仅供学习和测试使用,不可用于任何生产使用,域名有效期为 1 天,如果需要用于生产环境建议配置自定义域名,详细配置方式请参考:配置自定义域名[8]

此外,还支持将生成的代码部署到自主管理的云服务器环境,实现完全可控的应用托管。适用于需要独立控制服务器资源、进行网络隔离或长期运行的生产环境场景。具体的操作步骤可以点击阅读原文查看。

清理资源

最后,记得清理资源,处理对应产品的实例,避免继续产生费用:

1. 删除云原生应用开发平台 CAP 项目:

登录云原生应用开发平台 CAP 控制台[9],在左侧导航栏,选择项目,找到部署的目标项目,在操作列单击删除,然后根据页面提示删除项目。

2. 删除百炼 API-KEY 

在 API-KEY 管理[10]页面,找到目标 API-KEY ,单击右侧操作列下的删除,根据页面提示进行删除。

3. 如果体验了部署代码(可选)环节,还需释放以下资源:

  • 释放云服务器ECS实例:

登录ECS控制台[11],在实例页面,找到目标实例,然后在操作列选择

>释放,根据界面提示释放实例。

  • 删除交换机:

登录专有网络控制台[12],在交换机页面,找到目标交换机,然后在操作单击删除,按照界面提示删除实例。

  • 删除安全组:

登录ECS 控制台[11],在安全组页面,找到目标安全组,然后在操作列单击删除,按照界面提示删除安全组。

  • 释放专有网络VPC:

登录专有网络控制台[12],在专有网络页面,找到目标VPC,然后在操作列单击删除,按照界面提示释放实例。

参考链接:

[1]https://www.cnblogs.com/wintersun/p/18454619

[2]https://account.aliyun.com/register/qr_register.htm

[3]https://help.aliyun.com/document_detail/2766612.html

[4]https://help.aliyun.com/document_detail/2665971.html

[5]https://bailian.console.aliyun.com/

[6]https://fcnext.console.aliyun.com/

[7]https://cap.console.aliyun.com/create-project?template=cap-bolt-diy&from=solution

[8]https://help.aliyun.com/document_detail/2513616.html

[9]https://cap.console.aliyun.com/

[10]https://bailian.console.aliyun.com/?apiKey=1&tab=app#/api-key

[11]https://ecs.console.aliyun.com/

[12]https://vpcnext.console.aliyun.com/vpc/cn-hangzhou/switches

快点击阅读原文参加部署吧~

其实我觉得最麻烦的是模型服务的替换,不同的厂商的模型能力和API接口差别很大,需要重新进行适配和测试。函数计算还好说,相对比较通用。

作为一个略懂代码的设计师,我觉得这种工具解放了我一部分生产力,我可以自己快速搭建一些简单的页面,不用每次都麻烦开发。但复杂的功能还是得靠专业人士。所以我觉得前端工程师的价值不会降低,反而会提升,以后可以专注于更高级的架构设计和性能优化,甚至可以转变为低代码平台的设计者和维护者!

楼上说的有道理!我补充一点,我觉得未来的前端工程师更像是“数字工匠”,他们不仅要懂技术,还要懂艺术、懂设计、懂用户体验。他们要能巧妙地运用各种工具,包括低代码平台,打造出真正符合用户需求、美观易用的产品。所以,跨界能力会越来越重要。

单单看生成的代码能不能跑起来,只能说明模型的基本能力,但要科学评估模型的优劣,还需要考虑这些方面:

1. 代码质量: 代码是否简洁易懂,符合规范?是否存在潜在的 bug 或安全漏洞?
2. 性能: 代码运行速度如何?资源消耗如何?
3. 可维护性: 代码是否易于修改和扩展?
4. 安全性: 代码是否存在安全风险?
5. 成本: 使用不同模型带来的成本差异?

可以设计一些测试用例,针对不同的指标进行量化评估。例如,可以使用代码质量检测工具评估代码质量,使用性能测试工具评估代码性能。最终,综合考虑各种因素,选择最适合的模型。

将 Bolt.diy 迁移到其他云平台,主要需要考虑以下几个方面:

1. 函数计算服务的替代: AWS 对应的是 Lambda,Azure 对应的是 Functions。你需要将原有的函数计算代码适配到目标平台的函数计算服务上,例如修改依赖库、调整触发器配置等。

2. 模型服务的替代: 阿里云百炼模型服务需要替换为 AWS 的 SageMaker 或 Azure 的 Azure AI Platform。你需要评估不同平台上的模型服务能力,选择合适的模型,并进行相应的 API 调用适配。

3. 环境配置: 确保目标云平台上的环境配置与阿里云一致,例如 Node.js 版本、依赖包等。可以使用 Docker 容器化 Bolt.diy 应用,方便迁移。

4. 数据库迁移: 如果使用了数据库,需要将数据库迁移到目标云平台的数据库服务上,例如 AWS 的 RDS 或 Azure 的 SQL Database。

5. 域名和 HTTPS 配置: 重新配置域名和 HTTPS 证书,确保 Bolt.diy 在目标云平台上可以通过 HTTPS 访问。

总的来说,迁移过程需要一定的技术成本,需要对不同云平台的服务有一定的了解。建议先进行小规模的测试,验证迁移的可行性。

楼上说的对,模型的评估是个综合性的工作。我的建议是,先明确你的目标是什么,然后根据目标选择合适的评估指标。不要盲目追求高分,要选择最能解决你问题的模型。

我觉得除了技术指标,还要考虑业务场景。不同的模型可能擅长不同的任务。比如,有的模型擅长生成前端代码,有的模型擅长生成后端代码。要根据自己的实际需求选择合适的模型。

也可以考虑使用 Serverless 框架,比如 Serverless Framework 或者 Terraform,它们可以帮助你更方便地在不同的云平台之间迁移。不过还是需要根据具体情况进行调整。

这个问题很有意思!我的看法是,低代码/无代码工具不太可能完全取代前端工程师。它们更像是辅助工具,降低了重复性工作的门槛,让更多人能参与到建站中来。但真正的定制化需求、复杂逻辑、性能优化,还是离不开专业的前端工程师。所以,未来前端工程师的核心竞争力,我觉得会是:1. 深入理解前端原理,能解决底层问题;2. 掌握复杂的前端架构设计能力;3. 熟悉不同低代码平台的优缺点,能灵活运用;4. 具备良好的沟通能力,能理解业务需求并将其转化为技术方案。毕竟,技术最终还是服务于业务的。