一、功能簡介

程式設計免不了要寫配置檔案，怎麼寫配置也是一門學問。YAML是專門用來寫配置檔案的語言，非常簡潔和強大。

瞭解到一些使用者在Cloud Studio開發專案的時候，環境上需要依賴一些元件，專案中也會使用到編輯器的外掛。  而如果這些都需要使用者自己去安裝和準備，則會非常的繁瑣，也不利於使用者分享自己的工作空間給其他協作同事建立副本。 因此我們設計出了YAML模板這個功能，用於解決這個問題。 關於YAML的簡介，傳送門：YAML語言教程（https://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: "https://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: - "msjsd[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:

• "Pivotal.vscode-spring-boot"

• "[email protected]"

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複製下來體驗使用：

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

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

六、如何使用sidecar

閱讀原文