【玩转 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 时无需安装,随时随地打开浏览器就能使用:
刚好,最近一位B站粉丝问我有什么练习打字的网站,发现这个优秀的开源项目:
特别想分享给小伙伴看看,但是小伙伴新换了电脑,环境都还没配置,于是就准备部署到Cloud Studio上,并给小伙伴在浏览器上跑跑这个优秀的开源项目。
Cloud Studio初始化
首先,我们登录Cloud Studio,因为把qwerty-learner
的代码,拉取到了我个人的Coding,所以这里我使用Coding账号登录,方便后续拉取项目代码:
因为我要部署预览的项目为React项目,所以这里创建项目模版时候,可以选择带Nodejs的项目模版(当然,你也可以使用Ubuntu模版,之后配置环境):
比如,这里我选择All in One
模版:
如果你选择的是Ubuntu模版,通常情况进入就是空的一台Linux虚拟机,你可以自己配置环境变量:
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 start
可以看到,我们项目在3000
端口就运行成功了。我们点端口
也可以查看详情?:
点击浏览器查看:
就可以在新标签页打开测试项目:
可以看到在新标签页就可以看到我们的测试项目运行了。但是这个就是调试模式,如果真的要部署,还是需要借助部署流程了。
这样,我们平时,在浏览器上就可以使用完整的IDE进行开发了。释放本地电脑资源~~也方便小伙伴在没有开发环境的情况下,临时查看。
不过,我觉得后续可能会有企业把这个用于网上面试,哈哈⁄(⁄ ⁄ ⁄ω⁄ ⁄ ⁄)⁄
项目部署
如果你想部署项目,最简单的方法之一就是使用Cloud Studio的部署功能:
比如,我这里部署到腾讯云:
部署后,就可以访问了:
不过,不建议用Cloud Studio去调用腾讯云的函数,目前Cloud Studio的部署这样编译后的文件,可能会出现问题,并且客服说出来大家都懂的网站目录问题,之后就没具体解决方案了,需要等Cloud Studio去完善:
我部署后,因为Cloud Studio自动部署问题,部署后的项目缺失了JS和CSS:
因此,个人建议不要用Cloud Studio自动部署Nodejs项目打包为纯静态网站。
个人建议,还是老老实实,打包为dist
文件夹后,推送到远程服务器的Web资源服务器(e.g. Nginx、Apache等)。
当然,如果你会手动配置Serverless和云API,应该也可以用的很不错(*≧ω≦)
团队协作
最后,我们看看如何团队协作。其实很简单,Cloud Studio自带一个多人协作功能:
打开多人协作后,就会自动复制协作链接:
我们把链接发给好友后,访问:
好友登录自己的Cloud Studio后,发起协作,主控端可以决定是否同意:
同意后,双方就可以同时登录IDE进行代码研究啦:
不会出现两个鼠标,但是会出现友好地伙伴提示框:
END
到此,我们的Cloud Studio云端IDE介绍就到此结束。不能说是一个全能的Web端IDE,但是确实是一个不错的协同开发软件。
并且,和本地VScode一样,可以安装大量的插件:
不过,我平时都是用IDEA和WebStorm这样的编译器,这里对VScode的插件就不做体验啦~~~
也有些问题,比如:
- 自动部署不智能:自动部署推送到腾讯云Serverless,本来以为是一键部署,但是实际操作,最简单的HTML+CSS+JS纯静态网站都不能很好部署。问客服,客服给我推荐用COS((・_・;)
- 多人协作缺少目录指引:同一个文件内,会有其他用户所在位置的提醒,如果左侧的文件目录也有提示就更好了。
不过,相信Cloud Studio未来总会越来越好啦。