【玩转 Cloud Studio】一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告

笔者是一位 Angular 开发工程师，之前尝试过国外一款著名的在线编辑器，StackBlitz. 这款编辑器功能强大，但因为服务器在国外，所以我平时访问的时候，由于网络的原因，在编辑代码和本地运行编译好的 Angular 应用时，经常感觉到延迟，影响了用户体验。

下图是 StackBlitz 在线编辑器的 home 界面：

这次听说腾讯推出了自己的 Cloud Studio 之后，非常激动，第一时间就在浏览器里进行试用了。

使用 Cloud Studio 创建第一个 Angular 应用

访问 Cloud Studio 的官网, 发现支持直接使用微信和 Github 登录，这样连账号注册的过程都省去了，很方便。

我使用微信成功登录后，新建一个工作空间(Workspace)：

工作控件列表里，除了我最关心的 Angular 工程模板之外，还有 React，Vue，Hexo 等许多其他的项目工程模板。

选择 Angular 项目模板之后，Cloud Studio 自动生成一个 Angular 应用的 Template，我们观察一下其中的 package.json，里面包含了 Angular 应用的所有依赖：

其中 Angular 版本为 ~12.1.0，这个版本也算比较新了。

Cloud Studio 里和 Angular 应用编译和运行相关的命令行

我们可以看到，Cloud Studio 自动在 Terminal 窗口里运行了如下的命令行：

set port=4200 && export PORT=4200 && yarn && yarn start --port=4200

仅仅花费了 6 秒多的时间，就完成了应用的编译。但下图的 Console 输出，有两点美中不足：

(1) Build At 时间戳的时区显示的是服务器端的时区，个人认为按照用户在浏览器里的时区设置对用户更友好一些，比如下图我期望时间戳显示的是我本地时间 18：02：51，而不是服务器端的 10：02：51.

(2) 打印的日志 Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200，这里会误导用户，因为实际上我们根本无法在浏览器里通过直接访问 http://localhost:4200/ 的方式，来打开我们在 Cloud Studio 里运行的 Angular 应用。

正确的 url 应该是这个自动生成的 url：https://dzdkkc-wbsddy-4200.preview.myide.io/

这里我在 Terminal 里进行了更多的测试，比如直接执行命令行 ng serve：

发现整个应用虽然仍然能够成功编译，但是浏览器访问 url https://dzdkkc-wbsddy-4200.preview.myide.io 时，遇到错误消息：Invalid Host header，于是不知道怎么继续下去了，只得继续使用冗长的命令行 set port=4200 && export PORT=4200 && yarn && yarn start --port=4200 来启动应用。

整个 Cloud Studio 可以看成一个运行在浏览器环境中的 Visual Studio Code，因此对于笔者来说，不存在任何的学习曲线。

笔者短短的 Cloud Studio 使用体验非常流畅，个人认为这是一款完全不输于 StackBlitz 的在线编辑器。笔者打算将来的一些小型验证项目，将不再使用 StackBlitz，而是切换到访问速度更快更流畅的腾讯 Cloud Studio 上来。