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

越来越多的 SaaS（软件即服务）平台允许用户通过代码定制产品，例如创建个性化的工作流程或通过应用程序/集成市场扩展功能。一种流行的方式是通过云端 IDE（集成开发环境）直接在产品中实现代码级定制，从而减少开发摩擦。本文将介绍如何使用 Subhosting API 和 Deno 构建属于您自己的云端 IDE。

项目设置

在开始之前，请确保准备好以下内容：

1. 创建一个新文件夹，并按照以下结构组织项目：

   project/
   
   ├── .env
   
   ├── assets/
   
   ├── deno.json
   
   └── main.tsx

2. 配置环境变量：
   您需要在 .env 文件中定义以下变量：
   

   将获取到的值填入 .env 文件中。

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

云端 IDE 的核心逻辑将写在 main.tsx 文件中。此文件主要负责创建服务器并定义以下路由：

• GET /：列出所有项目。

接下来，为每个路由处理程序添加具体逻辑。为了简化操作，我们将创建一个 Subhosting API 的包装库，并在其中封装相关功能。

在实现路由逻辑之前，先了解用于创建部署的有效载荷结构：

• entryPointUrl：表示部署入口点的文件名，需映射到 assets 下的键。

有关 Subhosting API 的更多信息，请参考官方文档。

创建 Subhosting API 包装库

在项目根目录下创建一个名为 subhosting.ts 的文件，用于封装 Subhosting API 的调用逻辑。以下是实现步骤：

1. 定义 ClientOptions 接口。

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

   • accessToken
   • orgId
   • ClientOptions

   在构造函数中初始化这些字段，并添加简单的错误处理。

3. 定义一个便捷的 orgUrl getter，用于返回组织 URL 片段。

完成这些步骤后，即可在 main.tsx 中导入并使用这些功能。

构建前端 (App.tsx)

创建一个名为 App.tsx 的 JSX 组件，并将其导入到 main.tsx 中。此组件负责服务器端渲染，以下是需要注意的几点：

1. 导入两个 <script> 标签：

   • 一个功能齐全的浏览器内 IDE 库。
   • 另一个用于处理部署逻辑的脚本。

2. <div id="deployments"> 是部署列表的父元素，稍后将在 app.js 中通过 JavaScript 动态更新其内容。

完成后，您的 App.tsx 文件应包含基本的前端渲染逻辑。

客户端 JavaScript (app.js)

在项目中创建一个 static 目录，并在其中添加 app.js 文件。此文件主要负责以下功能：

1. 初始化编辑器。
2. 绑定事件处理程序到 #deploy 按钮和 #project 列表。
3. 每隔五秒调用 pollData() 函数，获取当前 projectId 的部署列表。

以下是 pollData 函数的主要功能：

• 从 /deployments 端点获取部署列表。
• 使用 setDeployment 函数动态更新部署显示。

完成这些步骤后，运行以下命令启动服务器：

deno task dev

关于部署限制的说明

云端 IDE 提供了一种无摩擦的方式来编辑、编写和部署代码。对于需要在产品外部构建和设置服务器的开发者来说，这种方式显著提升了开发体验。然而，如果您选择自行搭建基础设施来部署和运行第三方代码，还需考虑以下问题：

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

通过 Subhosting API，您可以轻松构建一个安全、高效的云端 IDE，满足开发者的需求。

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