DevSpace安装教程：实现用ChatGPT网页端对本地项目进行vibe coding

DevSpace可以让你使用ChatGPT网页端额度来进行本地代码开发。本教程将带大家一步步搭建安装好DevSpace。

在使用 ChatGPT 网页端连接本地 DevSpace 进行开发时，很多开发者会使用临时隧道，这带来了一个很大的痛点：每次重启电脑，公网 HTTPS 地址都会发生变化，导致必须频繁修改 ChatGPT 网页端的插件设置。

为了解决这个麻烦，我们可以使用 Cloudflare Tunnel (CF 隧道) 来绑定一个固定的域名。配置好固定域名后，就可以实现“一次配置，永久使用”。本教程将带你一步步完成完整的配置流程。

---

步骤一：准备工作与域名托管

要想使用固定的 Cloudflare Tunnel，你必须拥有一个已经托管在 Cloudflare 上的域名。

• 如果你还没有域名，可以在 NameSilo、阿里云或腾讯云等平台购买一个最便宜的域名（通常一年只需几块钱）。
• 购买后，请将该域名的 DNS 服务器（Nameservers）修改为 Cloudflare 提供的地址，完成托管。

---

步骤二：配置 Cloudflare Tunnel 暴露本地服务

准备好域名后，我们需要通过 Cloudflare Tunnel 将本地电脑对外暴露为一个固定的 HTTPS 公网地址。

请打开 Windows 的 PowerShell（建议以管理员身份运行），依次执行以下操作：

1. 安装 cloudflared 客户端

使用 Windows 自带的包管理器 winget 进行一键安装，在 PowerShell 中输入：

winget install Cloudflare.cloudflared

安装完成后，建议关闭当前 PowerShell 窗口并重新打开，以确保系统环境变量生效。

💡 避坑指南：如果提示找不到 winget 怎么办？
如果你的系统没有 winget，请按以下顺序执行安装和修复：

1. 安装官方认证发布版：Install-Script winget-install -Force
2. 运行安装脚本：winget-install
3. 检查是否成功：winget --version
4. 如果仍然不可用，请使用系统自带的修复命令：Repair-WinGetPackageManager

2. 登录并授权 Cloudflare 账号

在 PowerShell 中运行登录命令：

cloudflared tunnel login

执行后，会自动打开默认浏览器。登录你的 Cloudflare 账号，选择你刚刚托管的那个域名并点击“授权”。
授权成功后，在你的本地路径 C:\Users\<你的用户名>\.cloudflared\ 下会自动生成一个 cert.pem 证书文件。

3. 创建永久隧道

给你的隧道起个名字（例如 devspace-tunnel），运行：

cloudflared tunnel create devspace-tunnel

运行成功后，屏幕上会输出一串 Tunnel ID（类似于 a1b2c3d4-xxxx...），并提示在 .cloudflared 文件夹下生成了同名的 .json 凭证文件。请务必将这个 Tunnel ID 复制并保存好，下一步需要用到。

4. 绑定二级域名（配置 DNS 路由）

假设你拥有的域名是 example.com，你希望供 ChatGPT 调用的专属地址是 dev.example.com，运行以下命令将隧道与网址绑定：

cloudflared tunnel route dns devspace-tunnel dev.example.com

这会自动在你的 Cloudflare DNS 后台添加一条 CNAME 记录，指向你的隧道。

5. 编写本地配置文件 config.yml

打开文件资源管理器，进入 C:\Users\<你的用户名>\.cloudflared\ 文件夹。在该目录下新建一个文本文件，重命名为 config.yml（注意扩展名是 .yml）。

用文本编辑器（如 VS Code 或记事本）打开它，填入以下内容并替换对应的变量：

tunnel: <你刚才保存的Tunnel-ID>
credentials-file: C:\Users\<你的用户名>\.cloudflared\<你刚才保存的Tunnel-ID>.json
ingress:
  - hostname: dev.example.com
    service: http://localhost:7676
  - service: http_status:404

(注意：YAML 文件对缩进要求极严，请保持上方代码块的空格缩进一致。localhost:7676 是后续 DevSpace 的默认服务端口。)

6. 测试并启动隧道

配置完成后，在 PowerShell 中运行启动命令：

cloudflared tunnel run devspace-tunnel

如果控制台没有报错，并显示类似 Connection ... registered 的信息，说明隧道已成功打通！

阶段总结：此时，Cloudflare Tunnel 已经搭建完毕。它会将所有访问你固定公网地址（如 [https://dev.example.com](https://dev.example.com)）的请求，安全地转发到本地的 7676 端口。

---

步骤三：本地安装与初始化 DevSpace

有了稳定的网络桥梁，接下来我们正式安装 DevSpace 服务。

1. 全局安装 DevSpace

npm install -g @waishnav/devspace

2. 初始化 DevSpace

devspace init

初始化时，控制台会引导你配置以下几项内容：

• 工作目录：哪些本地目录允许被 ChatGPT 访问。
• 本地服务端口：默认通常直接使用 7676。
• 公网 HTTPS 地址：填写你在步骤二中配置的域名（例如 [https://dev.example.com](https://dev.example.com)）。

配置完成后，系统会为你生成一个 Owner password。请务必记下这个密码，它是 ChatGPT 网页端连接 DevSpace 的唯一凭证。

3. 启动 DevSpace 服务

devspace serve

至此，本地电脑端的所有配置工作全部完成。

---

步骤四：配置 ChatGPT 网页端

现在，我们可以让 ChatGPT 接入你刚刚搭建好的本地开发环境了。

第一步：确认本地的 devspace serve 和 cloudflared tunnel 均处于运行状态。
第二步：打开 ChatGPT 网页端，进入 “设置 (Settings) -> 应用 (Apps)”，在页面底部找到并点击 “创建应用 (Create App)”。
第三步：打开 “开发人员模式” 开关。
(注意：平台会提示开启此功能有安全风险，因为你要接入第三方连接器。请确保你只连接自己启动且受自己控制的 DevSpace 服务。)
第四步：在应用创建流程中添加 MCP server。

• 名称：可填写为 DevSpace MCP
• 说明：可填写 Connect ChatGPT to my local DevSpace coding workspace
• MCP Server URL：填入你的固定域名并加上 /mcp 后缀，例如：[https://dev.example.com/mcp](https://dev.example.com/mcp)
  第五步：保存后，点击“使用 DevSpace MCP 登录”。页面会跳转至 DevSpace 授权页，检查 Resource 地址无误后，输入你在初始化时获得的 Owner password 完成授权。

授权成功后，ChatGPT 的应用页面就会显示 DevSpace MCP 已安装！

---

步骤五：日常使用指南

一切配置就绪！在日常开发中，默认情况下电脑重启后服务并不会自动开启。

因此，每次需要使用 ChatGPT 写代码前，只需打开终端，确保这两个服务在后台运行即可：

# 1. 启动公网隧道
cloudflared tunnel run devspace-tunnel

# 2. 启动本地 DevSpace 服务
devspace serve

现在，尽情享受 ChatGPT网页端 直接读取和操作你本地代码库的高效体验吧！

---

注意：在 Windows 中使用 DevSpace，必须开启并正确配置 WSL（Windows Subsystem for Linux）才能体验完整功能。
如果不开启 WSL，系统将无法查询完整目录树、无法执行脚本，也无法正常使用 CLI 工具。

不过别担心，Windows 用户只需按以下步骤把 WSL 切换到正确的发行版即可。

1. 检查当前 WSL 状态

打开 PowerShell（建议“以管理员身份运行”），执行以下命令检查本地已安装的 Linux 发行版：

wsl -l -v

这条命令会列出你机器上所有已经安装的 WSL 分发版。带 * 号的就是当前的默认发行版。

2. 警惕“Docker 陷阱”

很多开发者电脑上装过 Docker，你可能会看到类似如下输出：

  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  docker-desktop         Running         2
  Ubuntu                 Stopped         2

如果你发现 * 恰好落在了 docker-desktop、docker-desktop-data 或某个残留发型版上，这大概率就是导致 DevSpace 报错 /bin/bash: No such file or directory 的元凶！
因为你当前执行普通的 WSL 命令时，Windows 默认进入的是 Docker 内部的精简系统，而不是供实际开发使用的正常 Linux 环境。

3. 修改默认发行版

如果你的列表中有 Ubuntu、Ubuntu-24.04 或 Debian 等正常的 Linux 环境，请通过以下命令将其设为默认。
例如，列表中显示名为 Ubuntu，则执行：

wsl --set-default Ubuntu

(如果显示为 Ubuntu-24.04，则替换为对应名称即可)。

4. 重启并验证

设置完成后，先彻底关闭当前 WSL 进程：

wsl --shutdown

再次检查状态确认修改生效：

wsl --status

期望看到输出类似：默认分发: Ubuntu。
最后，在终端输入 wsl 并回车，如果正常，你应该能成功进入 Linux 终端，看到类似如下的前缀：

<你的用户名>@<你的电脑名>:/mnt/c/WINDOWS/system32$

输入 exit 即可退出 Linux 终端回到 PowerShell。至此，你的 WSL 开发环境已完美开启！