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 ,然後點選對號,儲存配置。

-
配置完成如下圖所示。

使用提示詞進行創作
-
按照下圖所示單擊提示詞進行創作。

說明
本方案推薦使用
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
快點選閱讀原文參加部署吧~