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

語言: CN / TW / HK

一、功能簡介

程式設計免不了要寫配置檔案,怎麼寫配置也是一門學問。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: - "[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複製下來體驗使用:

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

圖片

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

圖片

六、如何使用sidecar

圖片

閱讀原文