Cloud Studio高階玩家:強大的YAML模板

語言: CN / TW / HK

一、功能簡介

編程免不了要寫配置文件,怎麼寫配置也是一門學問。YAML是專門用來寫配置文件的語言,非常簡潔和強大。

圖片

瞭解到一些用户在Cloud Studio開發項目的時候,環境上需要依賴一些組件,項目中也會使用到編輯器的插件。  而如果這些都需要用户自己去安裝和準備,則會非常的繁瑣,也不利於用户分享自己的工作空間給其他協作同事創建副本。 因此我們設計出了YAML模板這個功能,用於解決這個問題。 關於YAML的簡介,傳送門:YAML語言教程(http://www.ruanyifeng.com/blog/2016/07/yaml.html)\

二、功能入口

功能的入口在各模板頁面的內容右上角:

圖片

分為兩個功能:

圖片

  • 手動新建

  • 導入workspcace.yml

三、手動新建

圖片

該表單一共有7項可以填充的。

圖片

  • 環境鏡像,顧名思義就是決定你模板的基本環境,提供了大多數語言的的開發環境。

圖片

  • 額外資源,目前提供mysql和redis預安裝。

圖片

  • 預裝插件,為工作空間默認安裝VSCode插件,支持選擇版本。

圖片

圖片

自定義命令, 支持在不同階段執行自定義Shell命令。

圖片

分為:初始化命令,啟動命令,關機命令。支持tab鍵跳轉下一行。

  • 環境變量,免去配置一堆默認環境變量的煩惱。

圖片

(一)導出/導入workspace.yml

該功能可以選擇一個在手動新建階段導出的workspace.yml文件,可以解決多人使用同一個配置情況下需要同時配置相同模板的煩惱。

圖片

四、解讀workspace.yml

一個成熟的workspace.yml長成這樣:

```

這是模板名稱

name: "react-demo"

這是模板描述

description: "一個簡易YAML示例"

這是模板的用於區分的tag

tags: - "Node.js" - "React"

模板創建的工作空間打開時自動拉取的代碼倉庫

repository: "http://e.coding.net/coding-public/cloud-studio-samples/react-quickstart.git"

默認拉取的分支

ref: "master"

定義的環境變量

envs: - name: "PROJECT_NAME"   value: "this is a react-demo project"

打開工作空間自動安裝插件

extensions: - "[email protected]" - "[email protected]"

定義了生命週期,共分為init、start、destory

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和redis

sidecar:   mysql:     enabled: true     password: "123456"     database: "test"   redis:     enabled: true     password: "123456"

初始鏡像id,請勿手動修改

image_id: 5 ```

讓我們來一項項拆解。

  • envs: 對應初始環境變量。

  • extensions:定義的是編輯器中需要使用的插件,比如Maven for Java等等。

圖片

lifecycle:

lifecycle中定義的是整個項目的生命週期各個階段需要執行的內容,各個定義的生命週期如下圖所示:

圖片

  • init:首次創建空間後的啟動,啟動後執行。

  • start:日常啟動空間後執行。

  • destroy:停止空間前執行。

注意:由於運行時機的原因,init和start階段的lifecycle命令不能使用由代碼倉庫中的文件、腳本等內容構成的可執行命令。

sidecar

常用的組件,支持以sidecar定義,目前支持的組件有mysql、redis,如果你的項目需要使用到這兩類組件,則定義enabled為true即可,否則可以置為false。

sidecar形式運行原理如下圖,在工作空間中,用户所能看到的為編輯器部分,而mysql、redis是以同級的方式進行運行,通過網絡端口連通。

圖片

五、使用YAML模板

以電商模版為例説明如何使用

圖片

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

圖片

```

name: "java-demo"

description: "一個簡易YAML 示例"

tags:

  • "Java"

ref: "master"

extensions:

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 ```

定義中用到了springboot和maven的插件,初始化只需要安裝mysqlclient,用於開發調試時登錄數據庫查看數據,同時,數據組件中使用到了mysql組件,因此只打開了mysql的定義。

項目中對應文件修改:

圖片

打開空間後,由於也定義了.vscode/preview.yml的內容,因此空間每次打開會執行指定的run命令,即刻可以預覽本電商應用啟動後的頁面效果。

圖片

圖示為空間打開完成後的效果:

圖片

您可以通過以下兩個 鏈接查看由該功能生成的工作空間,並可以將workspace.yml複製下來體驗使用:

http://cloudstudio.net/templates/hBswiZB0M4Z\

圖片

http://cloudstudio.net/templates/hQGhL1EYuEF\

圖片

六、如何使用sidecar

圖片

閲讀原文