【腾讯云 Cloud Studio 实战训练营】通过云IDE构建Web3项目

​ iOS开发上架主页 在强者的眼中，没有最好，只有更好。 移动开发领域优质创作者，阿里云专家博主

​

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

背景

随着云计算技术的成熟和普及，越来越多的传统编程能力和资源已经以云服务的形式开放出来。从中间件、数据库等水平能力服务组件到人脸识别、鉴权服务等基本业务服务组件，都可以很容易地在云端获取。Cloud Studio 云端 IDE（Web IDE/在线 IDE/Cloud IDE）是腾讯云自主研发的在线编程平台，它可以不再受限于本地设备，而是通过云端服务来编写、运行和调试代码。这种服务模式不再只是云端的软件开发环境，而是提供了包括基础设施服务的 Development-environment-as-a-Service 的服务模式。这就意味着，我们可以无需在本地维护和设置项目，直接在浏览器上进行开发，实现真正的零门槛开发。

一、 前言

大家有没有遇到过需要在不同设备上开发项目时，需要重复安装各种应用程序和插件的烦恼呢？现在，有了 Cloud Studio，这些问题都将不复存在！Cloud Studio 是一款基于浏览器的集成式开发环境，让开发者可以随时随地、轻松高效地进行开发。

通过使用 Cloud Studio，可以实现代码高亮、自动补全、终端等在线编程 IDE 的基础功能，还可以轻松集成 Git、实时调试、插件扩展等强大的功能。这些功能的存在，不仅可以帮助我们快速完成各种应用的开发、编译与部署工作，还能够提高我们的开发效率和开发体验。

最狠的是 Cloud Studio 不仅提供了一个永不间断的云端工作站，而且还可以在多个设备上进行同步，让我们的开发流程更加丝滑和高效！！！！这必须冲！！

在篇博文中，我将带大家沉浸式体验 CloudStudio 开发带来的快感，通过Web3 明信片项目案例一步一步深入产品细节！

在整个过程中，我们将学习到

• Cloud Studio 在项目中的作用
• 如何使用 Cloud Studio 进行项目环境初始化
• Cloud Studio 项目如何链接到 gitee 作为项目的管理仓库
• Cloud Studio 可能会出现的一些情况

二、 Cloud Studio 主要功能和应用场景

CloudStudio是一个基于浏览器的云端集成式开发环境，适用于多种应用场景，包括：

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

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

3. 远程访问云服务器：CloudStudio支持您连接自己的云服务器，这样就可以在编辑器中查看云服务器上的文件，进行在线编程和部署工作。

三、Cloud Studio 实验前期准备

3.1. 打开官网

打开官网 点击以下链接跳转到官网，并点击 “注册/登录”。官网

3.2. 注册 Cloud Studio：

这里注册和登录 Cloud Studio 非常方便，提供了三种注册方式：

1. 使用 CODING 账号授权注册/登录
2. 使用微信授权注册/登录
3. 使用 GitHub 授权注册/登录 （本文使用方式）

注册完成后就可以通过 CloudStudio 提供的模板进行项目构建了！！

四、构建Web3项目

这里我以博主之前开发的一个 web3 明信片项目为例，整个项目是 ts + react ，然后给大家进行产品演示，由于项目代码繁琐一点，就不具体到代码细节了，这是一个基于 Web3 技术的社交明信片项目，提供了一种新的收集和分享记忆的方式。项目使用了 Infura 作为节点服务，IPFS 进行数据的去中心存储以及使用 MetaMask 服务允许用户通过浏览器进行项目交互。并为设计者提供「创作者激励」。

项目效果如下：

4.1. 项目中技术栈

• Hardhat 是一个可以帮助开发人员快速、高效地编写、测试和部署以太坊智能合约的开发框架。
• Next.js 是一个基于React的服务器端渲染框架，它可以帮助开发人员构建高性能、可扩展的Web应用程序，并提供了一些开发工具和插件，方便开发人员进行快速开发和部署。
• Metamask 是一款以太坊钱包浏览器扩展程序，它可以帮助用户管理以太坊账户和进行区块链交易，同时提供了一些安全性和隐私保护功能，使得用户在去中心化应用中的交互更加方便和安全。
• IPFS 是一种去中心化的分布式文件系统，它可以帮助开发人员存储和访问各种类型的文件和数据，同时具有高度的可靠性、安全性和可扩展性，可以帮助开发人员构建更加可靠和安全的分布式应用程序。
• TypeScript 是一种开源的编程语言，它是JavaScript的一个超集，可以帮助开发人员编写更加可靠、易于维护的代码，同时提供了一些类型检查和代码提示功能，方便开发人员进行快速开发和调试。

4.2. 通过gitee管理代码并在CloudStudio上初始化环境

现在本地将项目上传到 gitee 仓库，方便后续在 CloudStudio 上初始化

然后我们回到 CloudStudio 进行空间创建，为这个项目搭建一个可以运行的环境，这里我们不需要通过模板进行创建，因为我们的项目不是在云IDE上现场开发，所以这里我们选择新建工作空间，然后选择输入仓库地址，选择开发环境为 React + node 18

点击新建就可以初始化环境了，效果如下：

4.3 运行预览项目

项目成功获取到之后开始准备运行和预览项目，通过CloudStudio的内置终端，然后运行以下命令进行依赖安装：

yarn install

依赖安装完后就可以开始启动了：

yarn start

右下角监控到有新的端口打开之后，就会弹出提示消息，然后可以通过打开内置预览，看到已经启动的项目

可以看到，和我们本地启动的是一模一样的，但是是不需要安装环境的，非常方便！

4.4 测试项目运行状况

启动虽然正常启动了，但是我们还是需要进行一些测试，看看新的环境中项目运行是否正常，这里我通过连接 metamask 进行登录测试

可以看到 connect 钱包是正常的，然后我们开始赠送一张明信片

这里会发现，这个环境是加载不出 ipfs 上面的图片的，所以运行不是那么完整

正常大概是这样：

但是整体功能是没有问题的，可能是因为网络相关问题，整体的运行体验还是不错的！！！

五、其他功能演示

5.1. 多人协作

协作发发起协作，发起者点击“开始协作”按钮，就可以生成协作邀请信息，发起者点击“再次复制链接”按钮，将下述信息粘贴发给需要参与项目的人员。同时，项目进入协作计时，计时显示在右上角控制面板中。邀请信息内容具体如下：“k9sec 邀请您加入工作空间协作。点击链接：https://cloudstudio.net/share/xxxxxx Cloud Studio MetaWork，就可以进行多人协作了！！

5.2. 使用 Git 进行版本控制并发布项目到gitee

这里我在 readme 中加入一段描述，并且准备commit到gitee仓库中

转到源代码管理模块，可以看到已经出现了我的修改，这里我们通过 commit 和 syncchange 就可以将修改同步了！非常的nice！

效果如下：

其他过多的功能就不一一介绍了，大家感兴趣的可以去官网浏览查看！！！

六、常见问题及注意事项

• 在开发过程中，发现一个不太适合 web3 项目的点，就是 ipfs 是网络是加载不出来的，不知道后续有没有可能进行优化
• 在进行多人协作的时候，有时候加入协作邀请方没有收到消息，不知道是网络问题还是什么原因，没有反馈，导致一直在那等待
• 还有就是云主机工作空间会出现频繁的断线重新，不过这个通过查看文档找到了原因，这个发出来避免大家也有同样的情况，官网回答如下
  • 目前由于云主机工作空间的流量是由 Cloud Studio 服务器进行代理，访问路径为 本地机器 -> Cloud Studio 代理服务器 -> 云主机 ， 会导致 Cloud Studio 由于网络环境的情况导致连接不稳定。目前 Cloud Studio 已经在优化访问路径为 本地机器 -> 云主机，以此来提高连接稳定性，敬请期待。

七、总结

在使用腾讯云 Cloud Studio 时从环境搭建到运行整体感觉上还是很丝滑的，感觉收获颇多。在实践遇见的一些问题，小助手也会积极解答，通过对几次的CSDN的培训以及官方文档的学习，对CloudStudio有了很大的认识，真的是一个很不错的云IDE产品，在后续的工作中，也会大量给公司推荐腾讯云的一些有效的方案，用于公司降本增效。

经过这次活动，我总结了CloudStudio的相关优点，方便大家在选择解决方案时参考：

1. 支持多种语言环境，包括Python、Java、Node.js等。
2. 支持创建工作空间，可以在其中进行在线编程、代码修改、实时调试等操作。
3. 支持Git版本控制和连接云主机进行资源管理。
4. 提供云端部署套件和协作套件，方便应用部署和团队协作。
5. 支持自定义模板和在线预览调试功能。
6. 支持在线安装VS Code插件以增强使用体验。
7. 支持按量计费和资源包购买，适合中小型项目使用。

总体来说，在这次 CloudStudio 的实践案列下，还是学习感受到了这种开发方式带来的根本性变革，其实也是顺应时代的产物，从低级语言到高级语言，从自建服务器到云服务器，每个产品的诞生都是为了释放重复劳动，或许以后开发只需要编写部分核心业务代码就可以上线了，所有的标准化功能都可以一键组装，还是要学会站在巨人的肩上，感谢腾讯云提供丰富底层支撑，能让现在的开发者的开发方式越来越简单高效！！！

八、相关链接

• Cloud Studio产品体验地址
• Cloud Studio产品文档
• 活动详情介绍
• 活动报名页面