【腾讯云 Cloud Studio 实战训练营】Cloud Studio 使用分享 及ant-desing-pro 项目创建

​

【腾讯云 Cloud Studio 实战训练营】Cloud Studio 使用分享 及ant-desing-pro 项目创建

一、Cloud Studio简介及登录

1.简介

首先附上官网地址，有兴趣的同学可以前去官网查看学习。

Cloud Studio_在线编程_在线IDE_WebIDE_CloudIDE_VS Code-腾讯云

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。

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

​​​

通过点击上方蓝色按钮就可以很方便的进行登录（并支持多种登录方式、也能与git关联），并且官官还每月送有3000min(50h)免费时常体验。

2.配置

标准型工作空间

规格为2核处理器，4G 存储，系统空间8G 0.1 元/分钟 每月赠送 3000 分钟 收费标准为 300 元/月

计算型工作空间

规格为4核处理器，8G 存储，系统空间16G，收费标准为600元/月

专业型工作空间

规格为8核处理器，16G 存储，系统空间32G，收费标准为1200元/月

3.已支持的框架列表

前端支持的框架：

React (Create React App)

React (UmiJS)

Vue (vue-cli-service）

Vite

Angular

Svelte

Preact

UmiJS

Ember

Nuxt.js

Hexo

Ionic Angular

Ionic React

后端支持框架：

Express

Koa

Fastify

NestJS

Malagu

4.待支持的框架列表

前端待支持的框架有：

Next.js

Gatsby

后端待支持的框架有：

Egg.js

接下来就准备开始实际体验吧。

二、应用场景及实战应用体验

按照官方的说法、Cloud Studio 在线编程工具适用于以下几个场景：我们依次体验一下效果如何。

1.快速启动项目

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

先来体验体验快速启动项目，

1.点击在"线编程"-->"云端开发环境"

2.点击快速体验

3.选择需要的模板创建

4.我这里选择了.NET进行，很快的生成了一套.net6的基础控件

5.我这里最简单的进行了复制了div，重启以后现实的也很快显示出来。

2.实时调试网页

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

针对第二个实时调试网页重新按照第一步的操作创建一个React 的项目。

我在这里直接加一个按钮可以简单刷新不需要重启项目就可以完成。

3.远程访问云服务器

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

1.返回主页面，点击左下角的”新建工作空间“。

2.根据自己的实际情况输入相关内容，登录，可以进行云服务器文件的编译和部署

Note： Cloud Studio 云端 IDE（Web IDE/在线 IDE/Cloud IDE）目前支持 64 位 Ubuntu 16.04/18.04 和 CentOS 7。 目前 Cloud Studio 云端 IDE（Web IDE/在线 IDE/Cloud IDE）工作空间兼容 VS Code 1.71.0。

三、实战

上面的一些背景和基础大家都知道了，那么下面就来进行一个实际操作吧。这边新建一个ant-desing-pro的项目演示吧

简单介绍 Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。 详情参考 开箱即用的中台前端/设计解决方案 - Ant Design Pro

1.创建一个空项目,然后用npm 拉数据，步骤如下

我们提供了 pro-cli 来快速的初始化脚手架。 # 使用 npm npm i @ant-design/pro-cli -g pro create myapp 选择 umi 的版本 ? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys) ❯ umi@4 umi@3（我使用的） ? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys) ❯ simple（我使用的） complete 安装依赖： $ cd myapp && npm install

注意的地方来了

下面红框注重注意

1.在package.json中 start 后面加入 set NODE_OPTIONS=--openssl-legacy-provider && 注意set 小写，因为ide 是Linux 没有SET 这句话为了解决node.js 版本兼容问题（16可以正常使用） 2.先运行 export NODE_OPTIONS=--openssl-legacy-provider 3.再用 npm run start 启动

​编辑

最后就可以运行来了，完结撒花

四、总结和建议

整体来说Cloud Studio给我带来体验还是相当不错的，作为浏览器的集成式开发环境（IDE），它能做到这个程度确实出乎意料。

1.能够很方便的给大家带来快熟的编译环境，否则前端安装node.js，后端java配置环境变量对于初学者来说是一件很劝退的一件事情，而云端编译器想要什么点击一下，很快就能出来基本配置，很棒。

2.对于初学者使用vscode安装一些插架也是比较麻烦，但是我整体使用下来，也没一直见Cloud Studio右下角一直弹窗让升级、建议安装什么插件。

3.界面足够干净，操作也足够方便，官方文档相对也比较全面，每月免费时间和机型也足够日常轻量级的使用。

4.对于远端服务器的支持比较少、还有点卡顿、然后对node.js版本没找到怎么调节，对于剪贴板在浏览器拦截（刚开始是好的，过一阵就会自动拦截）。对于同时前后端互通还没尝试，希望以后有时间多多试试。

5.后期支持框架模版的升级、更新工作还是比较庞大的，可能需要官方和社区一起协同合作才能不断提升。

6.可能需要出一个针对当前版本的ide的简易指导手册、不然对此编译器不熟悉的同学还是有一丢丢困难，（例如预览页面关闭、怎么打开、一些快捷键设置配置。）

在整个体验流程中、整体使用还是比较方便的，现在还在蓬勃发展的过程中、希望以后官方支持多多、社区活跃多多，希望未来有一天完全实现云端开发。

​