码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-01 22:17:26      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:总结   div   团队   进入   网络   页面   服务器   cloud   小型   

介绍

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 支持您连接自己的云服务器,这样就可以在编辑器中查看云服务器上的文件,进行在线开发部署工作。

相关特性

  • 开发在云端

Cloud Studio 让您打开浏览器就能编写并运行代码。它还支持连接到自己的云主机,生成在线预览链接,让你获得和原生 IDE 一样的云端开发体验。

技术图片

 


  • 网络+浏览器

打开浏览器,就能写代码,无需下载安装,随时随地打开浏览器就能写代码,拥有和本地 IDE 一样流畅的编辑体验。

技术图片

 


  • 多环境可选,或连接到云主机

Cloud Studio 内置 Node.js、Java、Python 等常见环境,为您省去复杂的配置工作,直接进入开发状态。或者您也可以将其连接到自己的云主机,来管理云主机中的资源。

技术图片

 


  • 生成在线预览链接

在 Cloud Studio 中快速生成预览链接,无论是分享给别人来展示项目,还是将其作为调试接口,都极为方便。

技术图片

 


  • 兼容 VSCode 插件

默认的配置无法满足需求?还可以在线安装 VSCode 的插件来增强使用体验。目前 Cloud Studio 兼容绝大多数 VSCode 插件,Cloud Studio已经预装了一些常用插件。这也是笔者爱上Cloud Studio 的原因,因为笔者最常用的开发工具就是VSCode!

技术图片

 


开始使用

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

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

  • 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 文件夹,这就是我们应用的代码。

技术图片

 


(2)启动应用

上述过程同时也会安装好所需的依赖,所以我们现在只需要在终端执行 cd app 进入 app。执行 yarn start 就可以启动应用了。此时终端显示应用启动成功,并运行在 http:localhost:3000。

技术图片

 


(3)添加调试配置

将左侧面板切换到调试,单击调试面板中的 【Add Configuration】,会打开 launch.json 文件,此时再单击蓝色的【添加配置】。

技术图片

 


在下拉列表中选择 Browser Preview Lite: Attach,此时会在配置文件中添加 browser-preview-lite 的配置,按 Cmd+S(Windows 下是 Ctrl+S)保存该文件。

技术图片

 


(4)实时开发调试

此时调试面板会自动选择 Browser Preview Lite: Attach,点击顶部的绿色按钮,开始调试。这样,代码会运行到断点处,并且会在代码右侧显示一个页面实时预览标签页。我们修改 App.js 的代码并保存,可以看到这个预览页面也会实时刷新。下图在笔者浏览器全屏时候的效果

技术图片

 


总结

Cloud Studio简直是个人开发者或者小型团队的福音,免去的某些复杂的开发环境的搭建,而且不需要下载任何开发工具,一切编程都在云端,内置丰富的项目管理功能,名副其实的极客云端IDE!Enjoy it!


技术图片

 

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

标签:总结   div   团队   进入   网络   页面   服务器   cloud   小型   

原文地址:https://www.cnblogs.com/IT-Evan/p/13039967.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!