vscode

近來由於武漢冠狀病毒疫情的擴散，很多公司不得不開始了遠端辦公的模式，遠端辦公最大的成本自然是溝通成本了，對於我們開發人員來說最重要的自然也是有一個順手的 IDE 工具，現在在雲端作業的工具也在逐漸增長，比如最近比較流行的設計應用 Figma，就完全是雲端操作的方式，大有要取代 Sketch 的趨勢，對於開發工具來說雲端 IDE 也逐漸受到大家重視，特別是對於遠端辦公的團隊，Cloud IDE 允許開發團隊在一個統一的開發環境中實時協作的工具，這可以大大提高生產效率。而且只需要通過 web 瀏覽器就可以訪問，還有一個優點就是可以利用叢集的能力，這可以大大超過我們之前的個人 PC 的處理能力，我們也不用為本地 IDE 佔用了電腦大量資源而苦惱了。

code-server 就是一個可以執行在伺服器上面直接通過瀏覽器來訪問的 VSCode，VSCode 是一個現代化的程式碼編輯器，支援 Git、程式碼偵錯程式、智慧程式碼提示以及各種定製和擴充套件功能。接下來我們來介紹下如何在我們的 Kubernetes 叢集上執行一個 VSCode。

首先當然需要一個已經安裝好的 Kubernetes 叢集，如果想要通過域名來訪問我們的 Cloud IDE，則還需要準備一個域名以及一個 Ingress Controller 安裝在叢集中，我們這裡選擇的是 Traefik2.1 版本，當然你也可以選擇其他的。

我們將 code-server 部署在一個名為 code-server 的名稱空間中，然後使用 Deployment 來管理 code-server 的容器，這裡我們使用的映象是codercom/code-server，並在我們通過環境變數 PASSWORD 來設定了訪問 IDE 的密碼，對應的資源清單檔案如下所示：（code-server.yaml）

apiVersion: v1kind: Namespacemetadata:  name: code-server---apiVersion: v1kind: Servicemetadata: name: code-server namespace: code-serverspec: ports: - port: 80   targetPort: 8080 selector:   app: code-server---apiVersion: apps/v1kind: Deploymentmetadata:  labels:    app: code-server  name: code-server  namespace: code-serverspec:  selector:    matchLabels:      app: code-server  template:    metadata:      labels:        app: code-server    spec:      containers:      - image: codercom/code-server        imagePullPolicy: IfNotPresent        name: code-server        ports:        - containerPort: 8080        env:        - name: PASSWORD          value: "code321"

直接建立上面的資源清單即可：

$ kubectl apply -f code-server.yaml

建立完成後我們可以通過檢視 Pod 的狀態來了解應用執行情況：

$ kubectl get pods -n code-serverNAME                         READY   STATUS    RESTARTS   AGEcode-server-99dc7566-txk5b   1/1     Running   0          5d

當 Pod 是 Running 狀態後證明應用部署成功了，這個時候如果我們想要把應用暴露給外部使用者，則可以建立一個 Ingress 物件來完成。由於我們這裡使用的是 Traefik2.1 版本，所以我們建立 IngressRoute 資源物件即可，對於這部分知識點不清楚的，可以檢視文章 一文搞懂 Traefik2.1 的使用 了解更多資訊。對應的資源清單檔案如下所示：（ingress-route.yaml）

apiVersion: traefik.containo.us/v1alpha1kind: Middlewaremetadata:  name: redirect-https  namespace: code-serverspec:  redirectScheme:    scheme: https---apiVersion: traefik.containo.us/v1alpha1kind: IngressRoutemetadata:  name: code-server  namespace: code-serverspec:  entryPoints:  - web  routes:  - kind: Rule    match: Host(`code.qikqiak.com`)    middlewares:    - name: redirect-https    services:    - kind: Service      name: code-server      port: 80---apiVersion: traefik.containo.us/v1alpha1kind: IngressRoutemetadata:  name: code-server-https  namespace: code-serverspec:  entryPoints:  - websecure  routes:  - kind: Rule    match: Host(`code.qikqiak.com`)    services:    - kind: Service      name: code-server      port: 80  tls:    certResolver: ali    domains:    - main: '*.qikqiak.com'

上面我們定義了兩個 IngressRoute 物件，一個是繫結 80 埠，一個是繫結 443 埠，為了讓我們通過 https 訪問，我們還特地建立了一個 redirect-https 中介軟體，用來強制跳轉到 https 服務，當然如果你的 https 服務有自己的證書直接通過 Secret 建立後補充到 tls 區域即可，我們這裡是使用的 Traefik2.1 提供的 ACME 機制自動生成的萬用字元的證書。同樣直接建立上面資源物件即可：

$ kubectl apply -f ingress-route.yaml$ kubectl get ingressroute -n code-serverNAME                AGEcode-server         5dcode-server-https   5d

建立完成後，將我們的域名 code.qikqiak.com 解析（或者在本地做 hosts 對映）到 Traefik2.1 所在的節點即可。

在瀏覽器中訪問 code.qikqiak.com，第一次會彈出對話方塊要求輸入密碼，也就是上面我們在環境變數 PASSWORD 中配置的值：

code-server login

輸入配置的密碼後即可進入應用，就是我們熟悉的 VSCode 介面的樣子，只是現在是在瀏覽器中執行：

vscode web

然後其他的就和我們在本地使用 VSCode 基本上差不多了，可以安裝主題、外掛、除錯等等，大家可以自行探索：

vscode usage