【腾讯云 Cloud Studio 实战训练营】Cloud Studio 使用分享 及ant-desing-pro 项目创建
目录
【腾讯云 Cloud Studio 实战训练营】Cloud Studio 使用分享 及ant-desing-pro 项目创建
一、Cloud Studio简介及登录
首先附上官网地址，有兴趣的同学可以前去官网查看学习。
1.简介
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-desing-pro的项目演示吧
简单介绍
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。
详情参考
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的简易指导手册、不然对此编译器不熟悉的同学还是有一丢丢困难，（例如预览页面关闭、怎么打开、一些快捷键设置配置。）
在整个体验流程中、整体使用还是比较方便的，现在还在蓬勃发展的过程中、希望以后官方支持多多、社区活跃多多，希望未来有一天完全实现云端开发。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
