【腾讯云 Cloud studio 实战训练营】一起来感受云端IDE的魅力

哥们别害怕程序员

已于 2023-09-18 12:49:49 修改

阅读量1k

点赞数 14

文章标签：腾讯云 ide

于 2023-09-14 09:56:58 首次发布

本文链接：https://blog.csdn.net/2301_79449382/article/details/132870024

版权

文章介绍了腾讯云CloudStudio的云端开发环境优势，包括无需高配电脑、内置预览和AI助手等。重点讲解了通过YAML模板构建项目的方法，展示了如何使用YAML配置开发环境和项目生命周期。作者强调了CloudStudio的便携性和高效开发体验。

摘要由CSDN通过智能技术生成

【腾讯云 Cloud studio 实战训练营】一起来感受云端IDE的魅力

前言

腾讯云Cloud Studio：领先的云端开发环境

随着互联网的普及和发展，越来越多的开发项目正在迁移到云端。腾讯云Cloud Studio作为一款基于云端的开发环境，为开发者提供了无与伦比的便利和灵活性。与传统的本地IDE相比，Cloud Studio具备以下独特优势。

首先

Cloud Studio的云端架构使得开发者可以摆脱对高配置电脑的依赖，只需确保网络连接正常，即可在任何地点编写和运行各种占用大量内存的程序。因为Cloud Studio利用云端资源，与本地电脑性能无关。这为开发者提供了更高的灵活性和可访问性。

其次

Cloud Studio内置在线预览功能，方便开发者查看代码效果和运行结果，无需频繁切换窗口或启动本地服务器。此外，Cloud Studio还集成了AI代码助手，开发者可以直接在Cloud Studio中调用AI代码助手，拥有专业的研发伙伴，助力高质量编码，事半功倍。

Cloud Studio的一些特点

接近本地IDE的开发体验：无需下载安装，只需在浏览器中打开Cloud Studio，即可享受与本地IDE相媲美的流畅编辑体验。支持代码高亮、自动补全、全功能终端、实时保存等功能，让开发更加便捷。
多环境可选或连接到云主机：Cloud Studio内置了Node.js、Java、Python等常见开发环境，省去了繁琐的配置步骤，让开发者可以直接进入开发状态。同时，我们也可以将Cloud Studio连接到自己的云主机，方便管理云主机中的资源。
随时分享预览效果：在Cloud Studio中快速生成预览链接，方便分享项目展示或作为调试接口使用，极大地提升了协作效率。
兼容VSCode插件：Cloud Studio默认支持大多数VSCode插件，如果默认配置无法满足需求，开发者可以在线安装额外的插件，进一步增强使用体验。
AI代码助手：直接在Cloud Studio中调用AI代码助手，为开发者提供专业的研发伙伴，共同完成高质量的编码工作，事半功倍。

Cloud Studio功能强大，无需繁琐的环境配置，简单易用，即可上手。接下来，我们将介绍如何从零开始体验云IDE所带来的优势，让我们快速适应现代化的开发方式。

一、产品体验

在这里插入图片描述

Cloud Studio 在线编程平台支持使用 CODING 账号和 GitHub 账号登录，可以在登录界面输入相应的账号登录前往 Web IDE，推荐使用 CODING 账号登录。

在这里插入图片描述

要注册 Cloud Studio，您需要先注册一个 CODING 团队。您可以前往 CODING 注册页面，填写一些必要的信息来进行注册。具体步骤可以参考注册与邀请。

二、通过Yaml模板构建项目

兄弟们，这还有个个性化的功能，比较适合咱们的复杂场景，这 YAML 这玩意太重要了，它可以帮我们一键配置开发环境！

简单来说，如果你对官方预设的一些环境觉得不好用或者想自己定义，又不想搞云主机，那么通过YAML就可以实现个性化，YAML就是用来写配置文件定义项目设置的语言。Cloud Studio很贴心地为我们提供了YAML模板功能:

yaml文件是什么？

YAML（YAML Ain’t Markup Language）是一种人类可读的数据序列化格式。它旨在成为一种简单、易于使用的数据表示语言，适用于配置文件、数据交换、文档标记等场景。

YAML 文件使用扩展名为 .yaml 或 .yml，并且采用了一种类似于缩进的格式来表示数据结构。它不依赖于特定的编程语言，可以被多种编程语言解析和生成。

以下是 YAML 文件的一些特点和用法：

结构化数据：YAML 文件支持表示复杂的数据结构，如列表、字典（键值对）、嵌套结构等。数据之间使用缩进和冒号进行层级表示。
简洁性和可读性：相对于其他数据序列化格式（如 JSON 和 XML），YAML 文件具有更简洁和易读的语法。它使用空白字符和换行符来组织数据，使得文件更加清晰和可读。
注释：YAML 文件支持添加注释，以 # 开头，可以在文件中提供有关数据的解释和说明。
数据类型：YAML 支持多种数据类型，包括字符串、数字、布尔值、日期时间、空值等。它可以自动识别数据类型，也可以使用引号显式指定字符串。
引用和锚点：YAML 提供引用和锚点的概念，可以在文件中引用其他位置的数据。这对于避免数据重复和实现数据共享非常有用。
多文档支持：YAML 文件可以包含多个独立的文档，每个文档使用 — 分隔。这使得在单个文件中组织和管理多个相关的数据结构成为可能。

由于它的简洁性、可读性和易用性，YAML 文件广泛应用于各种场景，例如配置文件、持久化数据、API 接口定义、自动化工具等。它在许多编程语言和框架中都有成熟的解析库和工具，使得读写和处理 YAML 数据变得非常方便。

闲话少说，实践出真知，我们来实践一个案例试试：

新建空间模板

在这里插入图片描述

这么我们不直接创建，我要先研究一下 yaml 的编写内容，所以直接选择导出 workspace.yml

大致内容如下：

在这里插入图片描述

解读空间yaml文件

让我们来说明一下常见的yaml声明。

envs: 对应初始环境变量
extensions：定义的是编辑器中需要使用的插件，比如Maven forJava等等
lifecycle：lifecycle 中定义的是整个项目的生命周期各个阶段需要执行的内容，各个定义的生命周期如下图所示：
- init：首次创建空间后的启动，启动后执行。
- start：日常启动空间后执行。
- destroy：停止空间前执行。

实际内部执行容器关系如下，分父子容器，父容器中的工具控制命令在子容器中执行。
需要注意的是，父容器中的内容只有workspace.yml相关内容(即.workspace目录下的内容)。

因此定义lifecycle中各个阶段的命令需要注意不要加入与代码库相关的内容，这将会执行失败。

sidecar：常用的组件，支持以sidecar定义，目前支持的组件有mysql、redis，如果你的项目需要使用到这两类组件，则定义enabled为true即可，否则可以置为false。

实践yaml项目构建

这里我们使用一个官方的yaml，保存为 vue.yml

---
version: "v1"
image: "cloudstudio-devops-docker.pkg.coding.net/artifacts/saas.container/node:16.17.0"
envs:
   - name: "SW_DEV"
     value: "true"
extensions:
   - "znck.vue@0.11.4"
   - "hollowtree.vue-snippets@0.1.12"
lifecycle:
   init:
      - name: "run nginx"
        command: "apt -y update && apt -y install nginx && service nginx start"
sidecar:
   mysql:
      enabled: true
      password: "123456"
      database: "uzymall"
      port: 3306
   redis:
      enabled: true
      password: "123456"
      port: 6379
name: "vue-demo"
description: "一个简易YAML 示例"
tags:
- "Vue.js"
- "Node.js"