学习
实践
活动
工具
TVP
写文章
专栏首页Article【玩转 Cloud Studio】从0到1迁移至云上编程
原创

【玩转 Cloud Studio】从0到1迁移至云上编程

认识 Cloud Studio

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。Cloud Studio 云开发体验与本地几乎无异,支持文件持久化,无需担心数据丢失。

本文将记录我从本地开发环境迁移到 Cloud Studio 云上编程的过程,在这期间遇到的问题(已在 Coding 同学的帮助下解决)和对云上开发的感悟(可以发力的地方和优势)

迁移

选择模板 - 创建工作空间

Cloud Studio 默认预设了很多模板有基于【框架】的、有基于【云原生】的、还有基于开发环境的【常用模板】。

【框架】模板的优势在于上手方便,开箱即用,而我个人更中意【常用模板】,适合迁移场景,因为提供了必要的基础开发环境,至于项目框架,我可以手动安装。

默认模板

目前我采用了 All in One 模板, 该模板支持NVM切换NodeJs 版本并且内置了PNPM

All in One

创建项目

不管是迁移还是新建,我们都可以在 RemoteWorking 目录下把 Git 项目克隆下来、或者自己创建项目目录,同时可以 Clone、创建 多个项目,然后进入项目目录安装依赖

cd 项目目录
pnpm install

以下是我的多项目截图

RemoteWoking

如果在同一个空间里,有前后端两个项目,前端项目需要转发请求到后端项目,以 Vite 为例,配置参考如下:

export default defineConfig({
  server: {
    port: 3003, // 前端应用的端口
    proxy: {
      '/api': `http://127.0.0.1:3001` // 后端服务监听的端口
    },
  },
}

中间件安装

如果你是后端项目,可能会用到 MysqlRedis 这些服务,在官方文档上叫做【中间件安装】,安装方式也很简单:https://cloudstudio.net/docs/programming/middleware.html#mysql

文件上传,对于本地已经有数据库的项目,需要导出后上传到工作空间,上传方式可以直接拖拽,非常方便。同时空间会持久化所有的数据,也就是说关闭浏览器窗口后,下次打开空间,你的数据库依旧存在。

上传文件

启动项目

启动项目
浏览器打开

通常启动后右下角会有弹窗提示在浏览器中单独打开一个网址,即你的应用地址,如果遇到找不到地址或者忘了的情况,可以在这里打开编辑器内的预览窗口获取地址。

编辑器内预览

开发

插件

同一关键字在两者上的搜索结果不同,询问了 Coding 同学,插件市场是官方自己维护的(由于协议和版权问题),提了建议【优先支持官方插件,比如 VUE 生态的】,目前需要自己手动安装。

Cloud Studio
Visual Studio Code

安装过程也还是比较简单的,先从 VSCode 插件市场手动下载该插件,然后拖到 Cloud Studio 的插件面板中即可完成安装。

Visual Studio Code
安装过程

Chrome 应用

实际开发过程中由于默认 Cloud Studio 是在 Chrome 浏览器中执行,不可避免的会遇到快捷键冲突的问题,好在 Cloud Studio 提供了 Chrome 应用的方式来运行。

安装桌面应用

费用

在使用过程中遇到了一些问题,咨询了 Coding 的同学并得到了及时的回复~?

  1. 使用自有云主机是否会计时⌛️计费? 不会!

注意点⚠️

1.一开始我尝试使用 Ubuntu 模板来创建的工作区,但是遇到了不能安装 Docker(可能我的方式不对),因此只能通过 apt 直接本地安装 Mysql 等服务。

Docker 启动失败

2.同时 Ubuntu 18.04 的模板下使用 NVM 切换 Node14 会触发编译,在默认的套餐【标准型 2C4G】下会触发提示内存不足。

3.使用自有云主机时,等同于使用了自己服务器的环境,同时又没有环境隔离,因此安装软件会影响全局。

4.如果你既要开发 【前端项目】又要开发【后端项目】,比如 Vue + NestJs + Mysql + Redis,免费额度肯定不够,必须升级配置。

资源不足

5.Mysql 设置密码报错

出现类似情况:

Failed! Error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters.

可以尝试通过命令设置密码:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password by 'mynewpassword';

优势 ✅

环境隔离

这是我之前经常碰到的一个实际场景

在公司通常我们都是默认使用一个全局的 Git 配置,这样就会导致你的私人代码仓库如果没有单独配置 Git 账户的话, push 后在 commit 记录里会有你公司内的 Git 账号,而使用 Cloud Studio 后就能避免这类问题。

以我的个人项目为例:https://snippet.noxxxx.com/,云端编写后,直接提交到 Git,没有了账户安全的风险,确实很赞~。

项目截图

多人协作

云上编程能带来的优势其二是「多人协作」,这个功能在 Coding 的同学给我排查问题时非常有用,避免来回描述问题,要知道人与人的思维存差异,talk is cheap,show me the code

多人协作

上手便捷

提供开箱即用的开发环境,基于 NVM 提供不同应用之间所需的 NodeJs 版本,不用卡在开发环境的配置上,这很友好。

未来展望

一建部署

这个功能未来应该还有很大的发力空间,目前只能支持「阿里云」和「腾讯云」的云函数部署,作为个人开发者,我们还有很多部署交付场景,比如说你写了一个 Wordpress 主题,想发布到自己的站点,传统方式只能上传,不管是网页端,还是 FTP,抑或是 rzsz 命令行,都是一个套路,但是如果有「一建部署」可以直接将你的主题发布到对应的目录,那就很方便,当然这里还会有很多细节,比方说是不是要对标企业级的方案,可回滚?支持多机发布?多容器发布?灰度?

可以说在发布这个环境上,可简单可复杂,拭目以待未来 Cloud Studio 在此方面会有什么更新。

自有主机空间

Cloud Studio 还提供了一种工作空间,就是使用开发者自己的服务器,也就是说将服务器作为一台电脑,实现云端编程,这很好,既能享受到云端编程的能力,又能自主结合开发者自己的资源,但使用下来,目前应该仅仅是提供了最基础能力,缺少「环境隔离」,安装软件就是直接本地安装,会污染服务器整个大环境。

自有云主机

总结

  • 迁移步骤
  • 遇到的问题
  • 注意事项
  • 未来展望

以上是我在使用过程中遇到的一些问题和一些思考,如有不足欢迎指正。

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 【玩转Cloud Studio】有奖调研征文,千元豪礼等你拿!

    腾讯云开发者社区联合腾讯云Cloud Studio团队发起【玩转Cloud Studio】有奖调研征文活动,想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CO...

    腾小云
  • 【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿

    腾讯云开发者社区联合腾讯云 Cloud Studio 团队发起【玩转 Cloud Studio】有奖调研征文活动,想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔...

    腾讯云开发者社区
  • 【Techo Day腾讯技术开放日】后端开发与云原生工具

    看完「TechoDay腾讯技术开放日」的第二期《腾讯云工具指南02期:云原生全栈开发与实践》:https://cloud.tencent.com/develop...

    远哥制造
  • 让云数据迁移变更简单更省钱

    在传统企业中,他们会把自己的数据存储在线下的数据中心,由于有很多企业都是自建或者租用的IDC,所以面临着在人员、技术、运维、性能、故障、软件授权、租用等等多方面...

    云存储
  • 【玩转 Cloud Studio】React Run on Cloud Studio

    看到了腾讯云开发者社区联合腾讯云 Cloud Studio 团队发起【玩转 Cloud Studio】有奖调研征文活动,有幸来体验一下。

    lovelydong
  • 【玩转腾讯云】征文活动获奖名单公布

    由云+社区联合腾讯云免费体验馆及各产品团队举办【玩转腾讯云】征文活动,吸引入驻作者积极参加,非常感谢各位作者的参与。经过评委老师从产品创新性、实用性、可借鉴性、...

    腾讯云开发者社区
  • 如何将源服务器数据在线迁移到腾讯云CVM

    在上云/迁云过程中,会面临客户的各种需求,如何将源服务器上的系统、应用程序等从自建机房(IDC)或云平台等源环境迁移至腾讯云,是目前常遇到的问题。腾讯云推出了在...

    DRRR
  • 【玩转 Cloud Studio】iPad 编程生产力

    iPad 有个口号,就是“买前生产力,买后爱奇艺”,使用 iPad,配合 Procreate 来作画体验还可以, 如果你想让你的 iPad 可以编程,你却不得不...

    狂奔滴小马
  • 引领未来的「ABCD」四大技术,有哪些书值得看?

    导读:业界把人工智能(Artificial Intelligence)、区块链(Blockchain)、云计算(Cloud Computing)和数据科学(Da...

    华章科技
  • Visual Studio 2010/2012 Pro Power Tools

    Visual Studio 2010新增“扩展管理器”的功能,可用于添加、移除、启用和禁用Visual Studio扩展。我们可以从Visual Studio ...

    张善友
  • Cloud Studio 2.0:云的开端

    随着云计算的蓬勃发展,软件的运行效率得到了飞速提升。但同时,开发环境的配置工作也变得越来越复杂,CODING 在 2015 年率先通过在线 IDE 的方式尝试解...

    CODING
  • Cloud Studio 2.0:云的开端

    随着云计算的蓬勃发展,软件的运行效率得到了飞速提升。但同时,开发环境的配置工作也变得越来越复杂,CODING 在 2015 年率先通过在线 IDE 的方式尝试解...

    CODING
  • WebIDE:在浏览器中写代码的时代即将来临?

    去年 12 月,在号称云计算风向标的 AWS re:Invent 大会上,AWS 宣布推出 Cloud9,这是用于编写、运行和调试代码的基于云的 IDE,它可以...

    Jean
  • 技术拍客约起,云+社区原创视频大奖等你来领

    他来了他来了,他带着活动走来了!各位亲爱的社区创作者老师,想我了吗? 去年的社区活动不知道各位老师参加了多少?拥有了多少社区礼品?又有哪些遗憾没拿到礼品呢?不...

    腾讯QQ大数据
  • 腾讯云携手CODING,云端IDE——Cloud Studio初体验

    4月16日,腾讯云与CODING宣布达成战略合作,共同发布以腾讯云云服务器为基础的国内第一款完全基于云端的IDE工具:Cloud Studio的beta版本。

    苏易北
  • 【玩转 Cloud Studio】Cloud Studio 开发 Flask 应用

    作为良心云和 coding.net 的老用户,自认 Cloud Studio 是其推出的第三个版本的云端编辑器

    远哥制造

扫码关注腾讯云开发者

领取腾讯云代金券