【玩转 Cloud Studio】项目合作新姿势：基于Cloud Studio云端IDE进行项目开发部署与团队协作

嘿嘿，头图不能少～～

我们开发项目，一般都会使用IDE进行项目文件编辑和调试。我一般喜欢使用IDEA和VScode；但是，如果需要项目合作时候该怎么办呢？

一般情况，我会有两种操作：

• 项目git push到远程仓库，小伙伴git pull下来开发。
• 直接让小伙伴远程我的电脑，查看我的代码结构。

如果是比较紧急，需要小伙伴帮我看一个算法，通常会使用第二种情况；但是，小伙伴远程我的电脑时，两个人控制一台电脑、一个IDE，比较麻烦，能不能直接把IDE共享出去呢？

当然可以，最近发现了Cloud Studio，堪称一股清流。类似于Visual Studio Online，但是依托腾讯云的技术服务，更方便、更易用。

Cloud Studio

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

控制台

CS项目运行.png

刚好，最近一位B站粉丝问我有什么练习打字的网站，发现这个优秀的开源项目：

• https://github.com/Kaiyiwing/qwerty-learner

特别想分享给小伙伴看看，但是小伙伴新换了电脑，环境都还没配置，于是就准备部署到Cloud Studio上，并给小伙伴在浏览器上跑跑这个优秀的开源项目。

Cloud Studio初始化

首先，我们登录Cloud Studio，因为把qwerty-learner的代码，拉取到了我个人的Coding，所以这里我使用Coding账号登录，方便后续拉取项目代码：

Cloud Studio登录

因为我要部署预览的项目为React项目，所以这里创建项目模版时候，可以选择带Nodejs的项目模版（当然，你也可以使用Ubuntu模版，之后配置环境）：

项目模版

比如，这里我选择All in One模版:

All in One模版

如果你选择的是Ubuntu模版，通常情况进入就是空的一台Linux虚拟机，你可以自己配置环境变量：

Ubuntu模版，可以配置环境变量

Ubuntu模版，居然默认用的就是Oh-my-zsh，如果你想了解Oh-my-zsh，可以参考我之前的文章：https://cloud.tencent.com/developer/article/1940112

编辑用户环境变量：

vim ~/.zshrc

编辑环境变量

代码仓库拉取

CloudStudio的初始化，我们大概知道了，就需要拉取项目了。你可以本地上传，但是多数情况，还是通过Git进行拉取。

如果你刚刚操作和我一样（在新建工作空间内选择All in One模版），会自动引导你是否克隆你登录账号所拥有的仓库，那么你可以直接根据引导进行托管仓库拉取：

代码拉取

新建后，即可进入工作空间：

进入其中

工作空间初始化结束后，会自动克隆选择的托管仓库：

自动克隆仓库

如果你是用Ubuntu模版，你可以自己克隆到工作目录内：

手动克隆

确实，就像本地用VScode、IDEA一样。

项目测试

之后，我们就可以项目的部署和测试项目看看。

首先，我们项目的依赖安装，因为使用的是Cloud Studio的All in One模版，所以自带Nodejs环境，并且Nodejs环境内自带yarn，而这个项目使用yarn进行依赖包管理，这里就使用yarn进行依赖安装：

yarn install

yarn install安装依赖

依赖安装：

依赖安装完成

最后，我们启动项目：

yarn start

启动项目

可以看到，我们项目在3000端口就运行成功了。我们点端口也可以查看详情🔎：

端口详情

点击浏览器查看：

浏览器查看

就可以在新标签页打开测试项目：

新标签页

F12

可以看到在新标签页就可以看到我们的测试项目运行了。但是这个就是调试模式，如果真的要部署，还是需要借助部署流程了。

这样，我们平时，在浏览器上就可以使用完整的IDE进行开发了。释放本地电脑资源～～也方便小伙伴在没有开发环境的情况下，临时查看。

不过，我觉得后续可能会有企业把这个用于网上面试，哈哈⁄(⁄ ⁄ ⁄ω⁄ ⁄ ⁄)⁄

项目部署

如果你想部署项目，最简单的方法之一就是使用Cloud Studio的部署功能：

部署

比如，我这里部署到腾讯云：

一键部署

部署后，就可以访问了：

部署完成

不过，不建议用Cloud Studio去调用腾讯云的函数，目前Cloud Studio的部署这样编译后的文件，可能会出现问题，并且客服说出来大家都懂的网站目录问题，之后就没具体解决方案了，需要等Cloud Studio去完善：

客服建议

我部署后，因为Cloud Studio自动部署问题，部署后的项目缺失了JS和CSS：

缺少CSS和JS

因此，个人建议不要用Cloud Studio自动部署Nodejs项目打包为纯静态网站。

个人建议，还是老老实实，打包为dist文件夹后，推送到远程服务器的Web资源服务器（e.g. Nginx、Apache等）。

当然，如果你会手动配置Serverless和云API，应该也可以用的很不错(*≧ω≦)

团队协作

最后，我们看看如何团队协作。其实很简单，Cloud Studio自带一个多人协作功能：

Cloud Studio多人协作

打开多人协作后，就会自动复制协作链接：

开启多人协作

我们把链接发给好友后，访问：

访问链接

好友登录自己的Cloud Studio后，发起协作，主控端可以决定是否同意：

是否同意

同意后，双方就可以同时登录IDE进行代码研究啦：

两个人同时登上IDE

不会出现两个鼠标，但是会出现友好地伙伴提示框：

伙伴提示框

END

到此，我们的Cloud Studio云端IDE介绍就到此结束。不能说是一个全能的Web端IDE，但是确实是一个不错的协同开发软件。

并且，和本地VScode一样，可以安装大量的插件：

插件

不过，我平时都是用IDEA和WebStorm这样的编译器，这里对VScode的插件就不做体验啦～～～

也有些问题，比如：

• 自动部署不智能：自动部署推送到腾讯云Serverless，本来以为是一键部署，但是实际操作，最简单的HTML+CSS+JS纯静态网站都不能很好部署。问客服，客服给我推荐用COS（(･_･;）
• 多人协作缺少目录指引：同一个文件内，会有其他用户所在位置的提醒，如果左侧的文件目录也有提示就更好了。

不过，相信Cloud Studio未来总会越来越好啦。