​【腾讯云 Cloud Studio 实战训练营】 - 云IDE编程之旅化繁为简

CSDN首发文章链接

一、前言：

随着云计算产业的发展，各种基于云端的 IDE 相继出现。相比于传统的 IDE，云端 IDE 可以更大程度的提升用户工作的效率。

腾讯云与国内领先的一站式软件研发平台 CODING联合推出一款完全基于云端的 IDE：Cloud Studio。作为一款在线云端开发工具，它可以帮助用户减少安装 IDE 的成本，提供在线代码开发、编译、运行、存储的一站式服务，让用户体验“云端办公”的快、稳、准。

以“云端开发”为主题，聚焦使用 Cloud Studio 进行编程学习、技术开发等多维度研发体验与探索，实现为公司和团队进行降本增效。

二、IDE的发展趋势阶段：

预知未来最可靠的方法是了解历史，以下为简单回顾下IDE的发展史。

伴随着计算机编程语言一直发展到高级语言，编程所控制和调动的底层资源也发生了翻天覆地的变化，从早期的个人电脑PC机、服务器单机、服务器集群资源，到今天的云计算IaaS，PaaS，甚至SaaS资源和能力，从而驱动我们的开发习惯也在慢慢的改变，为了应对项目敏捷开发和项目的复杂度，选择一个快、全、稳的开发工具至关重要，俗话说：“工欲善其事，必先利其器”。

如下是我在从业多年的IT领域开发工作中，开发工具逐渐从最原始的文本编辑器时代，到后面的集成了代码调试器、编译器、丰富的图形用户界面（GUI）等高级功能的IDE工具集。

其中，背后驱动IDE的发展和进化的并不是IDE技术本身，而是围绕技术体系成套的上下游技术、编程的方式、可调动的底层资源、快捷方式等多维度的因素共同作用的结果。

三、Cloud Studio产品介绍：

Cloud Studio 是基于“浏览器”的集成式开发环境（IDE），为开发者提供稳定的云端工作站，在使用 Cloud Studio 时无需安装，打开浏览器即可快速启动和开发项目，底层资源可以自动弹性扩缩，极大地节省成本，低代码开发省时又省力。

3.1 产品介绍：

● 基于 Web 端的代码编辑器，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，提升开发、编译与部署工作效率 ;

● 支持远程访问云服务器，为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验 ;

● 自研多款插件以满足开发需求，例如协作插件、自定义模板插件、预览插件、部署插件等，助力施展编程潜能。

3.2 产品特性：

3.3 产品优势：

3.4 相关链接：

Cloud Studio为了解决缺乏系统的理论指导和相应的标准规范，在技术布道和开发者社区的建设中投入大量的资源，一起打造通用型的接口标准以及标准化的文档规范，并将致力于基础技能的知识普及。

• Cloud Studio用户手册文档：基于浏览器的集成式开发环境IDE (手册链接)https://cloudstudio.net/docs
• Cloud Studio官网：Coding Anytime Anywhere (中文官网链接)https://cloudstudio.net/
• Coding官网：提供一站式研发管理平台
• Coding登录平台：助力企业提升研发管理效能

3.5 总结：

随着云计算技术的不断发展，云计算使软件生产力有了质的提升，促使云开发的发展，让软件的生命周期中的各个环节得以无缝衔接，充分发挥云的优势，推动云端资源工具化，为开发者提供整套的解决方案和降本增效的生态。

四、工作中使用本地IDE的痛点：

4.1 公司团队管理痛点：

如下为公司团队管理工作过程中，传统方式使用本地IDE的一些困境，特别在新老员工离职交接过程中，处于一个周期低产出的阶段。

4.2 技术开发痛点：

以下是本人在技术开发中，遇到的一些主要问题点，特别是微信相关的业务开发过程中，由于微信的回调需要公网的域名，导致在本地开发、调试、排错时比较麻烦，往往事倍功半。

4.3 协作开发痛点：

以下是本人在工作中，伴随着协作相关的问题点，在很多方面沟通成本比较高，导致效率十分低效，对于一约束制度也力不从心。

4.4 总结：

五、Cloud Studio 实践：

5.1 常用框架模板快速搭建网站：

使用 Cloud Studio 提供的预置框架模板，可以为一些主流的开发语言或框架一键搭建网站。

直接选择一个对应的框架模板，就可以自动创建工作空间，并且自动打开该工作空间，完成相关依赖的安装，最后再实现一键应用的部署。进入云IDE后开始自动拉取代码，同时会自动安装一些相关的VS code插件和自动安装依赖，自动打开预览等。

以下为在实际操作中，基本上可以快速初始化一个环境，然后开始Coding：

基本在7s内可以完成创建、启动、连接工作空间，在不到2分钟完成拉取依赖并准备就绪。

以初始化Go项目为例：

右侧的预览器：

查看源码发现，预览器是一个iframe加载的一个网页，是实时在线预览的，修改代码右侧内容会同步自动热更新（无感知），实际上是webpack-dev-server插件做了热更新，导致页面无感知的刷新。

5.2 自定义工作空间：

在不使用 Cloud Studio 提供的预置框架模板，仍然可以使用一些脚手架提供的原生工具创建的标准项目，同样也可以做到一键部署、零配置，体现了 Cloud Studio 云部署的智能框架适配能力。

5.3 Cloud Studio 的云部署原理：

Cloud Studio 的云部署套件抽象了一套适配规则，用来支持绝大多数开发框架的构建与部署。

六、“新建空作空间”导入Gitee项目：

6.1 查看SSH公钥：

6.2 在Gitee中设置SSH公钥：

6.3填写工作空间相关信息，选择对应的分支(test)，选择需要构建的环境(vue.js)：

在8s内拉取test分支代码(时间与仓库代码大小也有关系)，个人体验的是比较快速的。

6.4 执行yarn install时，发现问题，在安装node-sass包时，需要python环境，而默认vue.js的开发环境是没有的。

6.5 更换开发环境为“Ubuntu”，安装node环境即可。尝试将开发环境设置为”node”也不行。

# 使用wget 命令进行下载
wget https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-linux-x64.tar.xz
# 使用tar对下载好的压缩包进行解压
tar xvf node-v10.16.0-linux-x64.tar.xz
mv node-v10.16.0-linux-x64 nodejs
# 全局使用node与npm
ln -s /usr/local/src/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/src/nodejs/bin/npm /usr/local/bin/npm

6.6 总结：

七、Coding与Cloud Studio结合：

7.1 Coding与Cloud Studio授权：

7.2 Cloud Studio打开新建工作空间：

7.3安装依赖环境报错：

7.4忽略版本：

7.5安装依赖：

7.6最后可以启动：

在云IDE中打开界面也是比较方便的，像我是iMac大屏，刚好多个几个窗口方便进行调试代码。

八、最佳实践 – 企业迁移实践案例：

由于大多数后端语言如Java、Go、Python、Rust、Net等都有相对应的模板，而公司有不少的业务是用PHP的Laravel框架开发的，所以，打算将公司的宠物预约系统迁移到Cloud Studio上，做一个最佳实践的企业级项目迁移案例Demo，同时，也期待官网也能推出“世界上最好的语言PHP”的框架模板。

具体相关代码，参考GitHub地址：Cloud Studio 活动演示代码案列狗狗预约系统

8.1 使用常用模板的“Ubuntu模板”来搭建PHP 7.4的开发环境。

使用Ubuntu服务器手动搭一个PHP环境，因为过程比较复杂，所以，专门也写到了一个shell脚本进行安装。

cd dog
# 修改shell执行权限
chmod -R 777 install.sh
在有Press[ENTER]时，注意回车一下

Shell脚本执行完成后，看看是否重启有OK，Nginx、PHP、Node、Npm、Redis等软件显示版本号。

cd DogApi
# 修改缓存文件可执行权限
chmod -R 777 storage
# 安装组件包，注意有几个包比较老，需要输入”Y”升级一下
compose update

Cloud Studio系统默认就支持Docker和docker-compose，本人习惯使用docker-compose安装MySQL。

cd dog
chmod -R 777 docker
docker-compose up -d
docker exec -it 容器id env LANG=C.UTF-8 /bin/bash
mysql -u root -p
输入密码
执行dog文件夹下的dbsql.sql文件

使用yarn install进行拉取Vue项目依赖包。

先执行yarn dev，启动内置浏览器，找到公网的临时域名，复制到DogVue下面的.env.development文件中，修改VUE_APP_BASE_API为公网的临时域名。

再将yarn dev关闭，因为修改了配置文件，所以，需要重新启动一下。

再开一个窗口，显示PHP blade模板的预约页面，注意端口为80端口。

如下为后管Vue的页面显示。

8.1.1 计划任务：

Linux环境下定时或者周期性的执行一些任务通常由cron这个守护进程来完成，这是一个系统自带的相对也比较方便的系统工具。

sudo apt-get install cron

目录结构：

可以看到当配置完crontab后，就可以看到触发了发送短信的定时任务Schedule，可如下为打印出来的日志，当然，改造的代码只是做了日志的输出，并没有真实去发送短信。

这里云IDE Cloud Studio上，自带也是有任务调度的功能，但是研究了几天没有成功，就放弃了选择安装一个cron来临时使用。

8.1.2 企业项目迁移说明：

由于本项目是微信版本的，所以，在测试环境中不方便暴露出公司的APPID、APPSECRET、微信支付的密钥与cert证书等信息，同时，由于临时公网域名是在一定周期有变化，需要不停的在微信公众平台去设置“网页授权域名”、“支付回调URL”，所以，修改为兼容H5环境也可以打开的代码。

• 使用H5打开地址提示“请在微信客户端打开链接”，应该需要微信浏览器才能打开。
• 测试模板消息可以发送成功。

以上是，在尝试使用Ubuntu 20版本的搭建LNMP环境中，能够完全正常启动公司目前的宠物预约项目，可以轻松平滑的由本地IDE迁移到云IDE Cloud Studio上。

思考：迁移可行性是验证过了，但是每次新来一个同事，又要使用命令或shell脚本，重复机械式的安装一次“Ubuntu模板”吗？能不能像docker-compose容器编排工具写一个类似的yaml文件呢？

带着这个问题，可以使用下面的“自定义模板”来解决这个问题。

8.2 使用新建“自定义模板”，来解决开发环境的复用性，用来提高效率：

提交完成后，有一个自定义模板“Cloud Studio 活动演示代码案例狗狗预约系统”，直接点击就可以初始化一个我们需要的环境，非常的方便。

如果需要导出给其它同事使用，就使用以下导出的workspace.yml，直接使用yml文件进行导入。

version: "v1"
image: "cloudstudio-devops-docker.pkg.coding.net/artifacts/workspace/ubuntu-20.04:2023-04-25.0943"
extensions:
- "dbaeumer.vscode-eslint@2.4.2"
- "Vue.volar@1.8.8"
- "esbenp.prettier-vscode@10.1.0"
lifecycle:
  init:
  - name: "安装环境"
    command: "chmod -R 777 ./install.sh && ./install.sh"
sidecar:
  mysql:
    enabled: true
    password: "123456"
    database: "dog"
    port: 3306
name: "Cloud Studio 活动演示代码案例狗狗预约系统"
description: "Cloud Studio 活动演示代码案例狗狗预约系统，php + vue"
tags:
- "Ubuntu"
repository: "https://github.com/lilyasgbfdsr/dog.git"
ref: "main"
storage:
  copy_to_working_dir: true
category: "userDefined"
sort: 0
show: true

九、中间件的搭建使用方式：

在项目中开发中，常常会用到Mysql、Redis、Elasticsearch、RabbitMQ等中间件。

一般在项目开发过程中，有3种方式来使用中间件：apt-get安装、使用docker启动一个容器、第三方服务的云中间件。

9.1 根据不同的使用方式，也存在不同的体验效果：

(1). apt-get安装：

• 优点：apt-get安装非常简单，只需要一行简单的命令即可完成，内部自动解决依赖关系，无需手动去安装其他关联的软件包。
• 缺点：apt-get安装的可能不是最新的包，缺乏一些个性化设置。

(2). 源码安装：

• 优点：手动下载安装可以获得灵活安装任一版本的MySQL，并且可以根据需要进行个性化需求的设置。
• 缺点：手动下载安装，需要自己手动解决软件之间的依赖关系。

(3). Docker安装：

• 优点：Docker安装可以隔离应用与其他软件的环境，并且可以方便地进行多个版本应用的管理。
• 缺点：需要具备一定的Docker知识，并且对硬件资源的占用较高。

9.2 三种方式使用中间件：

(1). apt-get安装Redis：

apt-get install redis-server -y

注意这里有一个问题是，安装完Redis后，打开Redis客户端时不能连接6379端口，需要修改一下配置文件，否则服务无法正常停止：

• 使用vi打开/etc/init.d/redis-server 文件
• 找到 start-stop-daemon -v --start --umask 007 --pidfile $PIDFILE --chuid redis:redis --exec $DAEMON -- $DAEMON_ARGS 行
• 去掉 --chuid redis:redis

或者，觉得麻烦，可以直接使用我shell提供的命令：

sed -i "s/$PIDFILE --chuid redis:redis --exec/$PIDFILE --exec/" /etc/init.d/redis-server

可以看到，修改完配置文件重启一下，就可以使用Redis。

(2). docker-compose安装MySQL：

version: '3'

networks:
  common:
    driver: bridge

services:
### MySQL ################################################
  mysql:
    restart: always
    build:
      context: ./mysql
    container_name: mysql-docker
    command: --innodb-use-native-aio=0
    environment:
      MYSQL_DATABASE: test
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3306:3306"

ARG MYSQL_VERSION
FROM mysql:5.7
# Set Timezone
RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' > /etc/timezone
RUN chown -R mysql:root /var/lib/mysql
COPY conf/my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 0444 /etc/mysql/conf.d/my.cnf
CMD ["mysqld"]
EXPOSE 3306

(3). 腾讯云TDSQL-C MySQL中间件：

从上图可以看到TDSQL-C MySQL比开源的MySQL性能要好很多，在腾讯云购买TDSQL-C MYSQL实例后，需要开通一下外网的地址，再使用DMC数据库管理工具导入数据库表。

在Laravel框架中的env中配置DB实例的参数，再运行程序，发现可以无障碍访问，查看SQL的打印日志如下。

9.3 总结：

对于中间件的测试，通过不同的方式（从源码安装、apt安装、Docker安装、云上中间件）进行测试，腾讯云 Cloud Studio都可以支持，出了一些小问题，本人也找到了解决方案，完全可以应对于项目的正常开发。

十、iterm2配置alias提高开发效率：

在使用Mac进行项目开发时，由于习惯使用Linux命令，所以，一般会在iterm2中自定义很多快捷键（别名alias）来帮助命令行操作，使用别名可以减少命令行下的输入，优雅地提高效率。

10.1 什么是alias?

alias简单的可以理解为常用命令的别名、简称，可以将冗长的命令写入此文件中，设置自己喜欢的别名简称即可，比如，需要通过ssh来远程连接服务器端，就可以设置一个别名来快速连接。

格式: alias 【别名简称】='个人所需要执行的指令命令 '

10.2 解决了什么业务痛点？

平常在shell终端上执行的命令繁琐冗长，十分的费时间，可以使用一个简称别名来替代，这样不仅可以避免出错而且还可以提高工作效率。

vim ~/.zshrc
# 重新加载一下配置文件，否则不能生效
source ~/.zshrc

alias ll="ls -l"
alias gss="git status"
alias gf="git diff"
alias gp="git pull origin master"
alias gc="git checkout ."
# 重启所有服务
alias reloadAll="service php7.4-fpm restart && service nginx reload && service redis-server start"
# 访问指定的后端目录
alias api="cd /workspace/clang-quickstart/DogApi"
# 访问指定的前端目录
alias vue="cd /workspace/clang-quickstart/DogVue"

可以看到使用了alias别名后，工作的效率也是提高了不少，本人Mac中也是集成了大量的alias别名，比如输入code打开vscode等等，可以为开发工作中节省不少时间。

十、搭建过程中遇到的问题及解决方案：

10.1 使用URL::asset()获取URL错误，只能获取到端口后面一串。

Laravel 5使用 HtmlBuilder 及 URL::asset() 引入站内或站外的 css 和 js 文件。

经测试发现，将URL::asset()改为相对路径即可。

10.2 启动php-fpm失败，经查看日志发现是有一个PID没有创建，创建对应的文件即可。

10.3 使用curl 127.0.0.1访问接口是正常的，但是在页面中显示不出来验证码，改为临时公网域名访问即可。

10.4 使用docker exec打开MySQL控制台，执行insert语句会有乱码出现。

在页面中也发现插入的数据显示乱码，应该是环境语言的编码出问题了，经过查询资料找到，在进入MySQL docker时，需要增加参数 env LANG=C.UTF-8，再查询中文就显示正常。

docker exec -it 容器ID env LANG=C.UTF-8  bash

10.5 超过10分钟没有操作时，点击“重新连接”，Nginx、PHP、Redis服务直接挂了，如下是“重新连接”进入控制台，使用ps aux发现，并没有Nginx、PHP、Redis等服务，需要手动再次启动一下。

10.6 Docker挂载本地目录时，提示“permission denied”，但是使用chmod赋予了777权限也是不行，可能是操作文件之类不允许。

10.7 “手动新建模板”时，发现自定义命令写的shell不能一条一条串行执行，因为它是直接打开好几个shell窗口去执行，并没有按顺序来，执行完一条再执行下一条。只能采取使用&&来兼容处理一下。

10.8 “手动新建模板”时，发现报错501，经排查，发现是lifecycle中的command参数太长导致的，如何让命令保证串行执行，也不能一条命令写太长，这里要注意一下，希望官方能改进一下，目前只能在install.sh脚本中写大量的操作逻辑。

十一、最佳实践 – 企业项目迁移SWOT分析：

通过对企业的微信项目进行迁移到Cloud Studio云IDE上，可以完全满足业务的开发，而且门槛也比较低，基本也没有太多的风险点，下面是个人总结的SWOT，可仅大家参考一下。

经过迁移的过程实践，本人总结了以下可以提效的场景，最直接的就是微信的授权、支付回调调试，比以前能省去70%的工作量。

以下是对企业级项目迁移的评估，腾讯云Cloud Studio可以有效的将我们本地IDE开发，迁移到云上开发，通过云上的弹性资源可以动态的扩展，通过很多提效的措施，如自定义模板、资源弹性扩展等，降低了开发的成本，可以让开发者专注业务的开发，可以与合作伙伴更好的进行协作。

十一、协作共享：

多人开发写作套件MetaWork，支持可以将当前运行的工作空间共享给参与者，实现追踪他人光标、共享终端、代码讨论、音视频等功能。

Cloud Studio 云端 IDE 推出最新套件 MetaWork ，通过开启项目工作空间的协作模式，开发人员之间的工作能够通过音视频和留言互助联动，使开发工作更具沟通便捷性与高效性。

11.1 发起协作：

• 发起者点击“开始协作”按钮，即生成协作邀请信息。

11.2 邀请成员：

• 发起者可通过点击“邀请成员”按钮，即生成协作邀请信息。
• 发起者点击“再次复制链接”按钮，将邀请信息粘贴发给需要参与项目的人员。
• 同时，项目进入协作计时，计时显示在右上角控制面板中。

邀请信息内容具体如下：

lilyasgbfdsr 邀请您加入工作空间协作。 点击链接：https://cloudstudio.net/share/zsruwl Cloud Studio MetaWork多人协作，让开发更高效 🚀

11.3 加入邀请：

• 被邀请者，输入邀请信息的链接后，可以点击“立即加入”，此时，会变成置灰的“等待发起者的同意”。
• 邀请者同意后，就可以初始化一个与邀请者一样的工作空间。

11.4 开始协作：

• 支持在线留言、视频、语音通话等写作方式来进行沟通
• 在协作过程中，还可以看到每个用户的光标在哪，正在修改的代码区域，就像自己在操作一样
• 多人协作的时，可以实时看到每个人分别在写什么代码，而且交互的速度非常快、很流畅

十二、Cloud Studio如何在工作中的降本增效？

12.1 使用云IDE Cloud Studio的作用：

云IDE Cloud Studio促使云开发的发展，让软件的生命周期中的各个环节得以无缝衔接，充分发挥云的优势，推动云端资源工具化，为开发者提供整套的解决方案和降本增效的生态。

12.2 Cloud Studio是如何在工作中进行降本的？

12.3 Cloud Studio是如何在工作中进行增效的？

12.4 Cloud Studio在其它方面的场景带来的增效：

十三、场景推广：

在线云IDE存在有很多优势，比如在企业进行企培时，是不能使用盗版软件的，之前也是付费购买版权，像JetBrains一套的费用还是挺高的，Cloud Studio 每个月为 2C4G 的机型提供了约 3000分钟的使用时长，对于短期开发用户或者团队来说是一个非常不错的选择。

有利有弊，云IDE也不是所有的场景都适合，以下为Cloud Studio比较适合的场景，基本上涵盖比较多的领域和场景：

十四、优化与建议：

14.1 问题点：

以下是在使用中，遇到的一些问题，基本上都能找用其它的解决方案。

14.2 体验优化建议：

十五、总结：

云计算让CICD、软件交付变得轻量，而云开发 Cloud Studio 则是把开发到交付部署之间的距离拉的更近。

现阶段来说，在我工作中的应用场景（Demo练习、学习测试），使用一些默认的配置足够使用了，在工作中从事前端开发工作（工作中Vue、React的前端开发），经过在Cloud studio最佳实践的迁移公司PHP业务的项目也是可以满足需求的，最好提供了一个可使用测试服务器的配置，唯一一点可能是时长的限制，可以使用自己的服务器替代。

和传统的云主机部署相对比，基于容器化底层技术的Cloud Studio会更加轻量、更加快捷。

通过对 Cloud Studio 协作开发体验下来可以感受到云协作的便捷与强大，特别是在有些领域和场景下，推动云端资源工具化，为开发者提供整套的解决方案和降本增效的生态，赋能业务开发，实现降本增效的应用。