Cloud Studio 高阶玩家:强大的 YAML 模板

1. 功能简介

编程免不了要写配置文件,怎么写配置也是一门学问。 YAML 是专门用来写配置文件的语言,非常简洁和强大。

了解到一些用户在Cloud Studio开发项目的时候,环境上需要依赖一些组件,项目中也会使用到编辑器的插件。

而如果这些都需要用户自己去安装和准备,则会非常的繁琐,也不利于用户分享自己的工作空间给其他协作同事创建副本。

因此我们设计出了YAML模板这个功能,用于解决这个问题。

关于YAML 的简介,传送门:YAML 语言教程

2. 功能入口

功能的入口在各模板页面的内容右上角:

分为两个功能:

  1. 手动新建
  2. 导入workspcace.yml

3. 手动新建

该表单一共有 7 项可以填充的。

  1. 环境镜像,顾名思义就是决定你模板的基本环境,提供了大多数语言的的开发环境

  2. 额外资源,目前提供 mysql 和 redis 预安装

  3. 预装插件,为工作空间默认安装 VSCode 插件,支持选择版本。

  4. 自定义命令, 支持在不同阶段执行自定义 Shell 命令。 分为:初始化命令,启动命令,关机命令支持 tab 键跳转下一行。

  5. 环境变量,免去配置一堆默认环境变量的烦恼。

3.1 导出/导入 workspace.yml

该功能可以未用户导出/导入一个默认配置的YAML文件,免去下次新建的烦恼。

4. 解读 workspace.yml

一个成熟的 workspace.yml 长成这样:

---
name: "vue-demo"
description: "一个简易YAML 示例"
tags:
- "Vue.js"
- "Node.js"
ref: "master"
envs:
- name: "SW_DEV"
  value: "true"
extensions:
- "znck.vue@0.11.4"
- "hollowtree.vue-snippets@0.1.12"
lifecycle:
  init:
  - name: "update apt cache"
    command: "apt update"
  - name: "install nginx"
    command: "apt install -y nginx"
  start:
  - name: "run nginx"
    command: "service nginx start"
sidecar:
  mysql:
    enabled: true
    password: "123456"
    database: "uzymall"
  redis:
    enabled: true
    password: "uzymall"
image_id: 3


让我们来一项项拆解。

  • envs: 对应初始环境变量

  • extensions

定义的是编辑器中需要使用的插件,比如Maven forJava等等

  • lifecycle

lifecycle 中定义的是整个项目的生命周期各个阶段需要执行的内容,各个定义的生命周期如下图所示:

  1. init:首次创建空间后的启动,启动后执行。
  2. start:日常启动空间后执行。
  3. destroy:停止空间前执行。

实际内部执行容器关系如下,分父子容器,父容器中的工具控制命令在子容器中执行。

需要注意的是,父容器中的内容只有workspace.yml相关内容(即.workspace目录下的内容)。

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

  • sidecar

常用的组件,支持以sidecar定义,目前支持的组件有mysqlredis,如果你的项目需要使用到这两类组件,则定义enabledtrue即可,否则可以置为false

  1. 使用YAML模板

以电商模版为例说明如何使用

电商模版使用 SpringBoot(2.1.5)Java JDK(11)版本。

---
name: "java-demo"
description: "一个简易YAML 示例"
tags:
- "Java"
ref: "master"
extensions:
- "Pivotal.vscode-spring-boot"
- "vscjava.vscode-maven@0.34.0"
lifecycle:
  init:
  - name: "update apt cache"
    command: "apt update"
  - name: "install mysqlclient"
    command: "apt-get install -y mysql-client"
  start:
sidecar:
  mysql:
    enabled: true
    password: "123456"
    database: "uzymall"
  redis:
    enabled: true
    password: "uzymall"
image_id: 4

定义中用到了springbootmaven的插件,初始化只需要安装mysqlclient,用于开发调试时登录数据库查看数据,同时,数据组件中使用到了mysql组件,因此只打开了mysql的定义。

项目中对应文件修改:

打开空间后,由于也定义了.vscode/preview.yml的内容,因此空间每次打开会执行指定的run命令,即刻可以预览本电商应用启动后的页面效果。

图示为空间打开完成后的效果:

您可以通过以下链接查看由该功能生成的工作空间,并可以将workspace.yml复制下来体验使用:

https://cloudstudio.net/templates/hQGhL1EYuEF