【腾讯云 Cloud Studio 实战训练营】- Cloud Studio 提高前后端工程化效率

一、前言：

从学校毕业到现在，工作也有5-6个年头了，您的开发中，是不是跟我一样，场景会遇到以下的困境呢？

还有许多种种问题，迫切的想各种方案解决问题、各种制度用来约束，但是，换取的收益效果可能不大。

最近参加CSDN联合腾讯云推出的系列开发者技术实践活动《腾讯云 Cloud Studio 实战训练营》，让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio，借此机会，让我们一起来从入门到实战腾讯云 Cloud Studio 的产品。

备注：该活动旨在通过技术分享直播、动手实验项目、优秀代码评选、有奖征文活动等，有兴趣的同学快来参加起来，方向盘都给你了，还不来？

活动链接：

活动详情介绍：

活动报名页面：

Cloud Studio产品体验地址：

8月3号 19:00 腾讯云 Cloud Studio 打造云端全开发新体验

二、手册活动：

实践出真知，接下来，通过腾讯云 Cloud Studio 做一个实战案例来深入了解该产品的特性！

官方温馨的提供了4个动手实验手册，来帮助我们熟悉和体验一下整个产品的流程：

• 使用 Cloud Studio 快速构建 React 生成点餐 H5 页面
• 使用 Cloud Studio 快速构建 Vue 生成 事务所 H5 页面
• 使用 Cloud Studio 快速搭建 JavaScript Snake Game
• GPT+Cloud Studio “念咒编程”构建Excel工资表自动核算

选择第一个项目《使用 Cloud Studio 快速构建 React 生成点餐 H5 页面》，在不到10分钟的时间，就搭建运行成功了，期间不需要要本地安装任何软件，一个工作空间就想当于一个远程的虚拟“小计算机”，里面包含了独立的存储、计算资源以及对应的开发环境。

在使用的过程中，根据手册快速搭建一个Vue的Demo，通过对 Cloud Studio 的产品从0到1小小的实践了一把，让我受益良多，颠覆了对本地IDE的认知，也让我真正理解在云计算时代，带动了很多云产品的发展，Cloud Studio 的产品也可以认为是一个里程碑的历程。

目前Cloud Studio每月赠送 3000 分钟的工作空间免费时长，所以，让我们一起来免费体验一下吧！

白话的总结，就是一毛钱不花，什么也不懂，就可以实现各种环境的开发，真香，白漂党必备良药。

三、直播观看与分享：

从手册实践到直播观看，大致对Cloud Studio有一个基本的了解，接下来，就采用我学习的4H(What、Why、When、How)分析法来由入门到精通，由浅到深的继续研究和摸索Cloud Studio 产品，如何在项目中导入，是否能支持常规的业务开发。

四、What – Cloud Studio 是什么？

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供稳定的云端工作站，在使用 Cloud Studio 时无需安装，打开浏览器即可快速启动和开发项目，底层资源可以自动弹性扩缩，极大地节省成本，低代码开发省时又省力。

基于 Web 端的代码编辑器，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，提升开发、编译与部署工作效率。

可以看到云IDE Cloud Studio有很多功能是本地IDE不支持的，提供了丰富的预设环境，让开发者能快速上手。

五、Why – Cloud Studio 能解决什么问题？

5.1 重复性的下载和安装各种软件、配置各种环境。

回想一下，平时我们在工作中的开发程序，如果在新环境、使用新技术、新电脑的时候，是怎么样的一个流程？

【Cloud Studio效率提升】使用Cloud Studio后，第1步、第2步就可以省略不用，直接上手写代码，节省了大量的前置时间，提高了效率。

5.2 在开发多个项目中，为了解决SSH Key的问题，是不是也会跟我一样，做项目区分？

【Cloud Studio环境隔离】使用Cloud Studio后，每个空间就是一个独立的，不需要担心会互相影响，具有隔离性。

5.3 会不会跟我们团队一样，“攀比”电脑硬件成本，主要是后端Java、UI同学，对于电脑性能要求比较高。

【Cloud Studio降低成本】由图中活动检测器可以看出，Cloud Studio所消耗的资源很少，相当于GoLand等本地IDE，动不动就是2-3G起，十分耗费资源。

• ①. 不用担心像安装在本地也会占据相当一部分的存储空间，使得配置较低的机器也能用于快速开发。
• ②. 在使用Cloud Studio的过程中，再也会为我的mac电脑平时开发8G不足而困恼了，至少我在前端应用中，有一个浏览器就够用了。
• ③. 唯一要比拼的就是网络带宽，因为Cloud Studio是基于云端的IDE，使用的是Cloud Studio云端的资源，跟本地电脑本身关系不大。

5.4 在线协作十分费力和低效。

有个亲戚是搞前端的，新入职一个公司后，好多都不懂，让我给他远程处理：

• ①.动不动就直接给我发源码，没有一点安全意识。
• ②.发的源码后，我还要各种初始化、装环境，有时还要配置他们项目的一些特殊的设置。
• ③.有时候，就发一个文件，调用其它文件函数也不知道在哪里。
• 后面，改为腾讯会议远程控制，也是各种不方便，往往一个小问题，要排查半天。

【Cloud Studio在线协作】如果一起使用Cloud Studio这个在线协作功能的话，肯定能很快就帮他解决问题，或者帮他写代码也不是不可以。

5.5 产研进行原型需求评审会议，记录、修改等待。

平时，多个团队在讨论需求时，总会出现一些意见，或者没有想到的逻辑，这时候，产品助理一个人记录东西，可能记录不过来，而且有时产品在线修改一些原型，全部人也是一直会议中等待。

【Cloud Studio跨部门高效协作】在会议中，我们会进行头脑风暴，每个人都写出自己的相关的case点，此时，最终的产品助理、会议记录人只需要做一下归类和盘复即可，也可以用git及时保存每次的会议记录，便于信息回溯。

5.6 平时常见“远程”开发存在的困境。

伴随着容器化、深度学习等技术的生产应用，越来越多的场景面临“远程”开发的问题，这些远程环境很难甚至不可能在本地重建一份。

在未了解云IDE Cloud Studio以前，我们对于远程开发的场景，常用的是以下四种解决方案。

【Cloud Studio共享相同远程环境提效】使用新建工作空间，选择云主机，可以让所有开发人员共享一套开发环境，只需要配置一套环境，就可以复用团队所有成员，如果团队有10人，就减少90%的安装环境等重复的工作。

5.8 机动性不够：

有一次在亲戚家吃饭，刚好自带的苹果电脑坏掉了，使用亲戚家的电脑，在安装了近2小时的时间，才勉强跑起环境，对设备的依赖性太强了。

【Cloud Studio机动性提效】只需要有网和一个浏览器就可以实现在线远程开发，再也不需要额外的配置，而且是随时随地可以进行开发工作，对于经常出差、移动性的用户非常实用。

5.9 通用性不强：

大家都知道Mac推出了自己的CPU内核心，M1、M2芯片，但是之前用inter芯片的软件安装可以有会存在兼容性问题，当时，同事买的M1芯片电脑，找我们要安装软件，大部分开发相关的软件都是无法使用的，只能又重新去找一遍，非常的耗时。

<font color="red"><b>【Cloud Studio通用性提效】</b></font>不管你的宿主机是windows、Linux、Mac，不管你什么样的芯片，只要能够打开浏览器，都可以进行远程开发，底层是Ubuntu的系统，统一了开发环境的，不会再有各种差异性的兼容问题。

5.10 总结：

六、When - Cloud Studio什么场景中使用？

Cloud Studio 提供了快速上手的开发环境，免去了所有复杂环境的配置安装工作，即使是小白新手开发者也能快速完成各种开发工作。同时，提供了协同编辑功能，支持多人在线共同编辑代码、实时查看分享者的编辑内容及聊天等功能，极大方便的解决了交流的问题。

以下为立竿见影的效果：

七、How – 怎么使用Cloud Studio？

创建空间有3种方式，可以在业务选择灵活搭配方式，接下来就由我们来一个一个实践，并且体验各自的优缺点。

7.1 快速体验一下Angular模板：

由于本人没学过Angular开发，今天正好用这个机会来尝试一下，0基础学习Angular。

在不到2分钟就初始化了一个Angular项目，打开项目里面的html文件，输入“从0到1学习一下Cloud Studio的云IDE”，控制台会及时进行刷新。对于学习新技术，简直就是利器。

7.2 新建主作空间：

大家在前端开发的过程中，经常会搭建自己的npm私有仓库，比如UI组件库、工具库等，本章就来在自己的服务器上实践一下，我们前端工程化的本系是否满足需求。

公司是使用verdaccio搭建一个轻型的npm私有源服务，为内部、合作方提供需要共享的私有包，以前是每个设备上使用之前都需要安装一下，现在使用公共的服务器，只需要装一次即可，大家在不同的目录中开发，提一步提高了效率。

这里使用云主机是自己的服务器，可以免去每个月3000分钟的限制，下面认证方案为了简单点，使用了密码验证，实际业务上推荐SSH认证方案。

温馨提示：使用自己的云服务器搭建 Cloud Studio 不会扣除标准型机器的免费时长。

因为公司的脚手架在内网，不太方便共享出来，我们在这台云服务器上直接自己搭一个npm的私有库verdaccio(内部使用是docker的方式，为了演示就使用简单一点npm安装)。

npm i -g verdaccio

安装完成后，使用pm2启动一个verdaccio服务器，用于大件npm私有库。

通过浏览器访问 verdaccio 启动页，如果服务器 ip + 4873不能访问，需要把4873端口的安全策略开通一下外网可以访问。

启动成功后，使用网址可以访问verdaccio服务，IP + 端口号，即可看到verdaccio的web服务。

登录到npm verdaccio私服仓库，再将脚手架包发布publish到npm verdaccio私服仓库。

发布成功后，可以在npm verdaccio私服仓库网址上查看刚刚发布的包。

在云服务器上全局安装这个发布的私有包，如下可以看到安装成功了。

在业务代码中，尝试启动项目成功，这个云服务器因为在全局都安装了公共的脚手架，所以，其它人在使用的过程中，已经集成了脚手架，只需要指定不同的目录，就可以直接进行业务开发，如果云服务器升级了脚手架，那么其它所有的项目都会升级，非常的方便。

Cloud Studio功能亮点：文件传输功能

如上，将Vue H5的项目直接拖动即可实现文件上传，上传方式可以直接拖拽，非常方便，不用像以前使用FTP、SCP这种第三方工具进行文件上传。同时空间会持久化所有的数据，也就是说关闭浏览器窗口后，下次打开空间，数据依旧存在。

可以看到我们在构建持续时间是比较短的，从Git拉代码 -> 拉到业务依赖 -> 构建打包 -> 上传到服务器并tar解压，大大的节省了构建的时间，加快了业务更快的进行部署。

7.3 自定义新建模板：

可以在 Cloud Studio 云端 IDE 的工作空间内存放自己的项目代码，安装所需要的软件环境，运行、调试、编译项目，下面将介绍如何使用自定义的工作空间。

7.3.1 痛点问题：

• ①. 有些开发环境，环境可能依赖非常多的工具包、插件、组件等，如果都需要用户自己去安装和准备，过程肯定是十分的繁琐和不利的。
• ②. 不利于用户分享工作空间给其它协作同事创建副本。
• ③. 解决多人使用相同配置、相同模板的问题。

7.3.2 解决方案：

• ①. 手动新建“模板”
• ②. 导入workspcace.yml YAML配置文件

7.3.3 提效结果：

• ①. 直接使用定制化的模板，可以直接初始化指定的工作环境，免去大量的安装、排错、检查工作，最高提效可以达到60%。

7.3.4 提效场景举例：

• ①. Vue模板，更近一步
• ②. Go公共服务模板

7.4 新建模板：

在“空间模板”中，右上角“新建模板”，这里有两种方案来创建，先来体验一下“手动新建”的方式。

打开新建自定义模板，填写以下信息，可以看到自带提供MySQL、Redis、Postgresql第三方中间件，也支持自定义shell命令、环境变量，有利于项目的扩展性。

以下为尝试用公司的go基础服务做为一个模板文件，可以做为参考一下。

因为有些人对于命令操作可能不是太熟练，这里也推荐使用一些vscode的插件进行可视化管理操作：

• ①.比如管理Redis、MySQL等第三方中间件工具。
• ②.本人平时也是比较喜欢使用Navicat来进行数据库的管理。
• ③.这里推荐一下使用vscode的插件，这样集成性更方便。
• ④.备注：个人尝试用本地SSH进行连接，好像没成功，可能是没找对方案。

上面可以点击“导出workspcace.yml”，将这个yaml分享给需要协作的同事，点击“新建”后，就可以创建出属于自己定制化的“自定义模板”。

点击进入经过服务的部署，可以进行测试一下我们的其中的短信公共服务、OCR公共服务。

• 如下为OCR识别身份证图片的接口，可以看到能够成功返回信息。

• 如下为发送短信服务的接口，可以看到能够成功返回信息。

7.5 导入workspcace.yml配置文件：

YAML是一种人类可读的数据序列化格式，旨在成为一种简单、易于使用的数据表示语言，适用于配置文件、数据交换、文档标记等场景。

• ①. YAML 文件不依赖于特定的编程语言，可以被多种编程语言解析和生成。
• ②. 由于其简洁性、可读性和易用性，YAML 文件广泛应用于各种场景。
• ③. 例如配置文件、持久化数据、API 接口定义、自动化工具等。
• ④. 它在许多编程语言和框架中都有成熟的解析库和工具，使得读写和处理 YAML 数据变得非常方便。

如下为上面导出的workspcace.yml文件：

version: "v1"
# 初始镜像,猜测应该是用docker启动的一个容器
image: "cloudstudio-devops-docker.pkg.coding.net/artifacts/workspace/go-1.19:2023-04-25.0943"
# 模板创建的工作空间时，自动安装的插件
extensions: 
- "golang.Go@0.39.1"
- "cweijan.vscode-mysql-client2@6.7.0"
- "cweijan.vscode-redis-client@1.2.5"
# 工作空间的生命周期：共分为init、start、destory
lifecycle:
  init:
  - name: "更新源"
    command: "apt-get update"
  - name: "安装nginx"
    command: "apt-get install -y nginx"
  start:
  - name: "启动nginx"
command: "service nginx start"
# 模板创建的工作空间时，需要启动的第三方中间件
sidecar:
  mysql:
    enabled: true
    password: "dpbg123."
    database: "common-test"
    port: 3306
  redis:
    enabled: true
    password: "3306"
port: 6379
# 模板名称
name: "公共基础服务go通用模板"
# 描述
description: "公司业务公共基础服务go通用模板，主要提供短信、上传OSS等服务"
# 标签
tags:
- "Go"
# 模板创建的工作空间时，自动拉取的代码仓库
repository: "https://gitee.com/xxx/go-base-common.git"
# 默认拉取的分支
ref: "master"
storage:
  copy_to_working_dir: true
category: "userDefined"
sort: 0
show: true

分析模板的时候，发现2个比较有意思的参数：lifecycle、sidecar，经过网上查询得到。

7.6 LifeCycle：

LifeCycle是表示工作空间的生命周期，定义了整个项目的生命周期各个阶段需要执行的内容（我们这里是执行一段shell代码），有点类似于Vue、React、小程序的生命周期，不同的阶段执行不同的逻辑。

八、如何操作第三方中间件：

平时在操作第三方中间件时，因为大家的习惯和知识体系不太一样，可能有不同的代码维护习惯，这里提供Cloud Studio 2种操作的方式，可以满足不同需求的同学。

8.1 使用sidecar可视化管理工具：

因为在模板中选择了“vscode-mysql-client2”的vscode插件，所以，在初始化完空间后，在最左侧有一个数据库的操作图标，点击，最右边进行相关参数的配置，成功连接后，会显示中间的“数据库连接”窗口，就可以进行数据库的CURD操作了。

因为在模板中选择了“vscode-redis-client”的vscode插件，所以，在初始化完空间后，在最左侧有一个Redis的操作图标，点击，最右边“Add Redis Config”中，进行相关参数的配置，成功连接后，会显示中间的“REDIS EXPLORER:REDIS”窗口，就可以进行Redis的CURD操作了。

8.2 使用Linux命令行管理：

使用命令行操作，提交需要了解一些基本的docker知识，如下可以看到Cloud Studio实际上使用了docker启动了两个容器，同时，将Redis的6379、MySQL的3306端口暴露出来，就如同上面使用可视化工具，可以不知道这里面的细节，直接进行连接。

8.3 总结：

不同工具对应不同的人群，也没有绝对的优点与缺点，适合自己才是最好的。以下是我个人的关点比对了一下，两种类型操作第三方中间件的优缺点。

九、Cloud Studio MetaWork协作：

搭载Cloud Studio MetaWork 套件让协作 0 距离，让云开发云协作触手可得。

Cloud Studio 提供了一套非常完善的 Cloud Studio MetaWork 协作套件，在侧边栏中打开 Cloud Studio MetaWork 即可轻松开启协作模式。

点击“开始协作”，即可在右下角生成一个邀请链接：

• ①. 邀请成员后只需将邀请链接发送给他人即可
• ②. Cloud Studio MetaWork 同样支持在线留言、视频、语音通话等写作方式
• ③. 进一步提高了团队协作开发的效率。
• ④. 在协作过程中，还能知道每个用户的光标在哪，即将或者正在修改哪一行代码，非常实用的功能。
• ⑤. 多人协作的时候既可以实时看到，还可以看到每个人分别写了啥代码。
• ⑥. 最关键的是在体验操作，非常快速和方便。

十、其它云产品对比：

华为的cloudIDE和coding的cloud studio界面都大同小异，都是类似vs code，下面来实际说一下体验感受。

总体来说，体验腾讯云的Cloud studio还是非常不错的，而且也是针对公司业务的迁移也是可以完全满足需求的。

十一、总结：

参加CSDN与腾讯云联合举办的Cloud Studio活动，从开始最开始的加群进行了解，后面跟着官方提供的实验手册《使用 Cloud Studio 快速构建 React 生成点餐 H5 页面》做了一遍，简单的了解Cloud Studio的具体功能和用途。后面自己实操创建一个模板。

随着云计算的技术发展，Cloud Studio 就是云计算与传统IDE结合的产物，能够提供更加便捷的开发体验，更加高效的环境搭建，对于终端设备要求较低，能够满足一定的移动开发的需求。

• ①.开发过程中，项目启动项目非常快，即使本机的硬件设备不高
• ②.提供的预设置模板，可以直接创建无需进行繁琐的环境配置的工作空间
• ③.支持实时调试网页，Cloud Studio 内置预览插件，当监测代码发生改变的同时，预览窗口也会自动刷新

尤其是，对于IT开发人员，Cloud Studio提供了很多常见的框架模板，免去开发者搭建框架的繁琐，不用时刻做一些重复劳动力的事情，节省我们不少的搭建、容错、调试、安装时间。通过云IDE我们也让编程的设备不再局限于单机的电脑，可以类似Git分布式，只要有网，就可以在任意时间、地点进行开发工作，甚至不局于在iPad平板上进行编程。

相比于传统的 IDE，云端 IDE Cloud Studio 提供了一个灵活、可扩展、安全和协作的开发环境，可以更大程度的提高了工作效率（软件开发和协作办公），同时又需要同时减少成本。

在使用过Cloud Studio实战公司项目练习之后，对Cloud Studio也有更深刻的了解，下面来简单谈一下Cloud Studio的使用感悟、优势以及个人觉得的优化建议。

以下也是我个人觉得在工作中，可以考虑增加的一些比较实用的功能，能够帮助企业定制化，比如私有化的一些基础镜像仓库、机器人通知可以加深企业与合作商之间建立更好的沟通桥梁。

如下是实际操作中，遇到的一些问题与建议，希望官方能更好的支持：

如下是实际操作中，遇到的一些问题与建议，但是目前有备用方案可以解决：