使用 Subhosting API 和 Deno 构建云端 IDE：完整入门指南

一. 教程简介

随着越来越多的 SaaS 平台支持代码级定制，开发者可以创建个性化工作流程或通过应用市场扩展功能。通过云端 IDE 直接在产品内实现代码操作，能够显著减少开发摩擦。
本文将介绍如何使用 Subhosting API 和 Deno 构建属于自己的云端 IDE，实现无缝编辑和部署体验。

二. 项目设置

在开始之前，请准备以下项目结构：

project/

├── .env

├── assets/

├── deno.json

└── main.tsx

1. 配置环境变量

在 .env 文件中定义必要变量，例如 ACCESS_TOKEN 和 ORG_ID 等，并填写从 Subhosting 获取的值：

这些变量将在服务器逻辑中用于 API 调用和身份验证。

三. 构建服务器逻辑 (main.tsx)

main.tsx 是云端 IDE 的核心，负责创建服务器并定义路由，例如：

• GET /：列出所有项目
• 其他路由可根据需求处理创建、更新和删除操作

为了简化操作，我们将创建一个 Subhosting API 的包装库，用于封装部署和管理功能。

四. 创建 Subhosting API 包装库 (subhosting.ts)

在项目根目录创建 subhosting.ts 文件，封装 Subhosting API 调用：

1. 定义 ClientOptions 接口。

2. 创建 Client 类，包含以下字段：

   • accessToken
   • orgId
   • options（ClientOptions）
3. 在构造函数中初始化字段并添加简单错误处理。
4. 提供便捷的 orgUrl getter，用于返回组织 URL 片段。

完成后，即可在 main.tsx 中导入并使用这些 API 方法。

五. 构建前端 (App.tsx)

创建 App.tsx JSX 组件，用于服务器端渲染：

1. 导入必要的 < script &gt 标签：

   • 浏览器内 IDE 库
   • 部署逻辑处理脚本
2. 使用 < div id="deployments" &gt 作为部署列表的父元素，通过 JavaScript 动态更新内容。

这样前端能够显示项目和部署状态，并与服务器逻辑交互。

六. 客户端 JavaScript (app.js)

在 static 目录下创建 app.js 文件，实现以下功能：

1. 初始化编辑器
2. 为 #deploy 按钮和项目列表绑定事件
3. 每隔 5 秒调用 pollData() 获取当前项目部署列表

pollData() 功能主要包括：

• 调用 /deployments 端点获取部署列表
• 使用 setDeployment() 更新前端显示

完成后，通过以下命令启动服务器：

deno task dev

即可在浏览器中访问云端 IDE。

七. 关于部署限制的说明

使用云端 IDE 构建和部署代码具有显著优势，但若自行搭建基础设施需注意以下问题：

1. 维护和扩展基础设施的复杂性
2. 运行不受信任代码的安全风险

通过 Subhosting API，开发者可以安全、高效地管理代码部署，实现产品内的云端 IDE 体验。

八. 总结

本文介绍了使用 Subhosting API 和 Deno 构建云端 IDE 的完整流程，包括：

• 项目结构搭建
• 服务器逻辑 (main.tsx)
• Subhosting API 封装 (subhosting.ts)
• 前端渲染 (App.tsx)
• 客户端交互 (app.js)

通过这种方式，开发者能够在 SaaS 平台中实现无摩擦的代码编辑与部署体验，同时保持安全性和扩展性。

原文链接: https://deno.com/blog/build-cloud-ide-subhosting