云编程，这是我见过最优雅的Web云端集成开发IDE-Cloud Studio

Posted 2020-12-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了云编程，这是我见过最优雅的Web云端集成开发IDE-Cloud Studio相关的知识，希望对你有一定的参考价值。

介绍

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。这是目前笔者用过最优雅的WebIDE，特别是喜欢使用VSCode的小伙伴一定也会爱上他，Cloud Studio在团队人数低于或等于5人的情况下所有功能完全免费开放使用，因此非常适合小型团队或者个人用于云端编程，一起来看一看吧！

Cloud Studio 包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

坐标

https://cloudstudio.net

应用场景

Cloud Studio 适用于以下几个场景：

快速启动项目

使用 Cloud Studio 的预置环境，您可以直接创建对应类型的工作空间，快速启动项目进入开发状态，而无需进行繁琐的环境配置。

实时调试网页

Cloud Studio 内置预览插件，可以实时显示网页应用。当您的代码发生改变之后，预览窗口会自动刷新，这样您就可以在 Cloud Studio 内实时开发调试网页了。

远程访问云服务器

Cloud Studio 支持您连接自己的云服务器，这样就可以在编辑器中查看云服务器上的文件，进行在线开发部署工作。

开始使用

关于注册部分就不介绍了，感兴趣的小伙伴自行注册登录，下面直接进入正题：

由于默认添加了一个示例项目，那么我们直接查看示例项目：

1、示例项目中我们可以看到有很多丰富的功能：

包括版本迭代、需求管理、任务管理、缺陷管理、测试管理、代码仓库、持续集成、制品库、Wiki、API文档、文件、统计、设置等。

2、点击截图中的按钮进入到IDE

3、打开后创建一个工作空间

一个工作空间是一个虚拟计算单元，它包含独立的存储、计算资源以及开发环境。Cloud Studio 是以工作空间来组织的。

（1）进入 Cloud Studio 控制台，单击【新建工作空间】，进入工作空间创建页面。

（2）填写相关信息

创建工作空间需要填写工作空间名、描述，并选择运行环境和代码来源。

工作空间还可以进行管理，如运行、停止、删除和恢复

4、工作空间还提供了Git版本控制功能

工作空间支持从代码仓库创建，不过在此之前需要将工作空间的 SSH Key 添加至对应代码托管平台的个人公钥列表。具体如何操作可查看相关文档。

5、连接到云主机

除了预置环境，还可以将工作空间连接至自己的云服务器，这样就可以通过 Cloud Studio 在自己的云服务器中安装软件或运行程序。

前提条件：

有一台正在运行中且可以使用 SSH 连接的云服务器。
云服务器在支持列表中，请参阅支持连接的云服务器有哪些。
该云服务器的 SSH 连接端口没被防火墙拦截。
提前将 Cloud Studio 公钥添加至云服务器 ~/.ssh/authorized_keys 文件中。

6、在线调试网页应用

工作空间内置预览插件，可以边修改代码边实时预览。下面我们以创建一个 React 应用，并实时开发调试为例，来简单介绍一下如何使用 Cloud Studio 进行在线调试

（1）创建工作空间

接下来，我们来创建一个 React 应用。为了方便，我们使用 create-react-app 脚手架来创建一个 React 应用。选择上方菜单栏【终端】>【新建终端】，打开终端。执行 yarn create react-app app 来初始化一个 React 项目，它会在当前目录下创建一个 app 文件夹，这就是我们应用的代码。