Sealos Devbox 基礎教程：使用 Cursor 從零開發一個完整的專案

米开朗基杨發表於2024-12-06

dev

作者：熊貓Jay，上市公司技術負責人，破局AI 提示詞、AI程式設計教練、通往AGI之路內容共創者

最近發現身邊越來越多人嘗試用 Cursor 寫程式碼、開發小產品了。

如果想要實現商業化或引流，我們的小工具和小產品必須釋出到網際網路上，這樣才能被更多人看到並使用。

可一到要部署上線，很多非技術的朋友們都抓瞎了：

不僅要安裝 Python，還要設定各種複雜的編譯環境引數，

然後是雲伺服器要採購、配置、部署程式碼，

最後還要搞什麼 https 證書...

有人可能會告訴你：“別擔心，百度、AI 搜尋，能找到一堆教程的”。

說實話，先不說他們願不願意去搜，即使搜到了也很難明白。

今天我要告訴你一個好訊息：不用記命令、不用配環境、不用碰伺服器，3分鐘就能輕鬆把專案部署上線。

想知道是什麼神仙操作嗎？接著往下看教程👇

安裝

在安裝前，我們需要做一些準備事項：

魔法上網
本地安裝 Cursor，可參考文章：有了 Cursor 後，真沒理由說不會寫程式碼了

第一步，註冊登入 Sealos，登入完成後，進入首頁，點選 Devbox。

過去 🐼 熊貓 Jay一直推薦大家學習 Python，這裡以 Python 專案為例來演示。

除此之外，還支援 Go、Java、Node.js、PHP、Rust 等主流的程式語言和框架。

建立專案後，在操作列選擇 Cursor 後，記得要單擊它。

點選 Open Cursor 後，將會自動開啟本地的 Cursor 程式設計工具。再點選 Install Extension and Open URI，安裝必備的一些外掛。

我們需要等待推薦的外掛都安裝完成，這裡可能需要花費一些時間。外掛出現 Disable 或者 Uninstall 的按鈕則代表安裝成功。

初體驗

在繫結了 Devbox 專案的 Cursor 介面，我們看到了初始化的程式碼結構。

我們來演示下如何啟動程式碼。

我們在左下方右擊空白處，點選 Open in integrated Terminal 開啟控制檯。

輸入命令 : python3 hello.py , 不出現任何報錯，則代表啟動成功。

其他程式語言，或者框架，具體啟動命令以實際為準，如果不清楚，可以直接問 Cursor。

我們開啟本地瀏覽器，檢視下執行效果。這裡的埠是 8080，那麼地址為：http://localhost:8080

這次的分享主題是「程式碼快速上線」，那這個 demo 在網際網路上怎麼檢視效果呢？

我們回到 Devbox 專案中，點選外網地址，就可以在公網看到效果啦。

當然，這只是用初始化的程式碼演示的效果。接下來，我們來展示下修改部分程式碼後，怎麼更新線上環境。

這裡以修改網頁內容為例，加上 I am Jay 的字元，記得儲存程式碼。

在控制檯（Terminal）按 Ctrl + C 關閉應用，再輸入命令 python3 hello.py 重新啟動。

無論本地還是線上都會立刻更新成功，不需要做任何多餘的動作，線上程式碼就生效了。

但是，我們並沒有完成線上釋出哦，畢竟電腦不可能一直執行程式，後續步驟會介紹。

建立 AI 聊天頁面

「Hello World」，畢竟太簡單了。

接下來，我們以一個真實有效的小案例 -- 接入智譜大模型的AI 聊天工具 來展示下全過程。

一）提前準備事項

因為需要接入智譜的 API，所以我們需要提前做一些準備：

智譜 API 接入案例程式碼
智譜 API Key
本地安裝智譜 SDK

1、智譜 API 接入案例程式碼：

地址：https://www.bigmodel.cn/dev/api/normal-model/glm-4

基於程式碼案例和需求，編寫簡單的提示詞。

幫我根據下方的程式碼請求和響應示例，建立一個 AI 聊天頁面。

需求：使用者在頁面聊天視窗輸入資訊，點選傳送後，將收到 AI 流式輸出的回覆效果。

程式碼請求示例：
from zhipuai import ZhipuAI
client = ZhipuAI(api_key="")  # 請填寫您自己的APIKey
response = client.chat.completions.create(
    model="glm-4",  # 請填寫您要呼叫的模型名稱
    messages=[
        {"role": "system", "content": "你是一個樂於回答各種問題的小助手，你的任務是提供專業、準確、有洞察力的建議。"},
        {"role": "user", "content": "我對太陽系的行星非常感興趣，尤其是土星。請提供關於土星的基本資訊，包括它的大小、組成、環系統以及任何獨特的天文現象。"},
    ],
    stream=True,
)
for chunk in response:
    print(chunk.choices[0].delta)

程式碼響應示例：
```
data: {"id":"8313807536837492492","created":1706092316,"model":"glm-4","choices":[{"index":0,"delta":{"role":"assistant","content":"土"}}]}
data: {"id":"8313807536837492492","created":1706092316,"model":"glm-4","choices":[{"index":0,"delta":{"role":"assistant","content":"星"}}]}
....
data: {"id":"8313807536837492492","created":1706092316,"model":"glm-4","choices":[{"index":0,"delta":{"role":"assistant","content":"，"}}]}
data: {"id":"8313807536837492492","created":1706092316,"model":"glm-4","choices":[{"index":0,"delta":{"role":"assistant","content":"主要由"}}]}
data: {"id":"8313807536837492492","created":1706092316,"model":"glm-4","choices":[{"index":0,"finish_reason":"length","delta":{"role":"assistant","content":""}}],"usage":{"prompt_tokens":60,"completion_tokens":100,"total_tokens":160}}
data: [DONE]
```

2、生成並複製 API Key

地址：https://bigmodel.cn/usercenter/apikeys

3、啟動檔案中加入智譜 SDK

為了確保接下來能夠正常上線，我們需在進入 Devbox 繫結的 Cursor 程式碼裡的啟動檔案 -- entrypoint.sh，新增智譜 SDK 的安裝命令。

pip install --upgrade zhipuai -i https://mirrors.aliyun.com/pypi/simple/

entrypoint.sh 完整內容如下：

#!/bin/bash
python3 -m venv venv  # 建立虛擬環境
source venv/bin/activate  # 啟用虛擬環境
pip install --upgrade zhipuai -i https://mirrors.aliyun.com/pypi/simple/
python3 hello.py