VS Code 擴充推薦 - Dev Containers

本文介紹 VS Code 擴充 - Dev Containers, 這個擴充可以讓開發者用 VS Code 在 Docker 容器中進行開發，體驗上就跟在本機開發同樣自在，還可以統一開發團隊的開發環境！

目前知名開源專案 ELECTRON, CodeQL, etcd 等都已經使用 Dev Containers 作為開發一環，絕對值得使用！

本文環境 #

• Docker ( macOS 使用者推薦使用 OrbStack )
• Visual Studio Code
  • 擴充 Dev Containers
  • 擴充 Docker

為什麼要用 Docker 開發? #

自從容器化的技術誕生以來，越來越多的開發活動都倚賴容器化技術，例如將程式碼打包成 Docker image 後部署到 K8s, 或者將利用 Docker 建立標準的開發環境，再也沒有 it’s working on my machine 的爭議，大家都用相同的編譯方式，在相同的環境內執行程式，一切以容器內的執行結果為準。

總的來說，用 Docker 開發有 2 點好處：

1. 無縫的開發體驗，只要打包好 image 並確定測試沒有問題，基本就能確保從開發環境到 production 環境都可以執行（當然還是會有些許差異，例如生產的環境變數通常都不太一樣）
2. 較佳的協同開發體驗，如前文所述，再也沒有 it’s working on my machine 的爭議，大家都在用相同的環境執行，甚至連新人架設開發環境都相當便捷，只要執行 Docker 指令，就能夠建立開發環境

VS Code 擴充 - Dev Containers #

Dev Containers 是由微軟(Microsoft)所開發的 VS Code 擴充，可以幫助開發者將專案放到開發用的容器(container)之中，如此一來可以享有更加無縫的 VS Code 與 Docker 結合的開發體驗。

它的運作原理如下圖所示， VS Code 會在容器內安裝 VS Code Server, 讓開發者可以從本地(local) VS Code 連接開發專用的 Container (也就是下圖安裝 VS Code Server 的那端)，同時兩者透過 Volume 掛載(mount)程式碼，所以你修改程式碼也等於修改容器內的程式碼。

而且 VS Code Server 也可以安裝各種擴充(extension)，讓你用得舒舒服服，不會影響本地的 VS Code 擴充。

圖片來源：Developing inside a Container using Visual Studio Code Remote Development

使用 Dev Containers 可以讓開發者就像在本地(local)開發一樣舒適，微軟稱呼這種體驗為 local-quality development experience 😃 

Dev Containers 使用方法 #

安裝 Dev Containers 擴充 #

請到 Dev Containers 安裝擴充，或者在 VS Code 側邊欄的擴充搜尋 Dev Containers 進行安裝：

Dockerfile #

Dev Containers 可以自動根據 Dockerfile 的內容產生設定檔，本文以 Go 語言專案為例，專案中僅有 3 個簡單的檔案（不會 Go 語言也沒關係）：

.
├── Dockerfile
├── go.mod
└── hello_world.go

go.mod #

module example/devcontainer

go 1.20

Go 語言 1.12 之後預設要求 Go 語言專案目錄需有 go.mod 檔。

hello_world.go #

package main

import "fmt"

func main() {
	fmt.Println("Hello World!")
}

這是 1 個最簡單的 Go 語言 Hello World 範例。

Dockerfile #

FROM golang:1.20

WORKDIR /app

COPY go.mod hello_world.go ./

RUN CGO_ENABLED=0 GOOS=linux go build -o hello_world

CMD ["./hello_world"]

稍微說明 Dockerfile 的內容，上述使用 golang 1.20 版本的 Docker image, 設定 /app 作為工作區(workspace), 接著將 go.mod 與 hello_world.go 複製到 Docker 容器內後，執行編譯指令 CGO_ENABLED=0 GOOS=linux go build -o hello_world 將程式編譯為 hello_world 可執行檔，最後設定 Docker 容器啟動後會執行 hello_world 。

產生 Dev Containers 設定 #

建立上述 3 個檔案之後，就可以在 VS Code 中用 Dev Containers 擴充產生設定檔，按下 VS Code Command Palette 快捷鍵( (windows) Ctrl + Shift + P 或 (macOS) Cmd + Shift + P )，並輸入 add dev container, 就會出現 Dev Containers: Add Dev Container Configuration Files ... 選項，使用它即可開始產生相關設定檔：

過程中會詢問幾項設定，接下來一一解說。

首先， Dev Containers 會詢問怎麼產生設定檔(How would you like to create your container configuration?), 選擇 From 'Dockerfile' :

接著， Dev Containers 會詢問有沒有要啟用 VS Coder Server 什麼擴充功能(Select Features)，例如 Go 的相關開發指令，可以搜尋 Go, 接著勾選它，如果是 Python 的開發者還可以勾選 Python, Pylint 等擴充：

最後， Dev Containers 會再次詢問要不要設定剛剛啟用的擴充功能(Keep Feature defaults or configure options?)，覺得麻煩的話，可以選擇 Keep Defaults，想先設定好的話，可以選擇 Configure Options :

完成之後，專案目錄會多 1 個 .devcontainer 資料夾，代表設定產生完成，這個資料夾可以被 commit 進專案中，所有人都可以使用相同的 Dev Containers 設定，如果要更改設定也是更改 .devcontainer/devcontainer.json 即可。

devcontainer.json #

devcontainer.json 支援的設定相當多，文件可以參考其規格文件 Specification ，其中包含 forwardPorts , dockerComposeFile , mounts 與環境變數(environment variables)相關的部分都可以詳讀一下，畢竟都是日常開發經常接觸的功能。

執行 Dev Container #

設定完成之後，可以按 VS Code 左下角 >< 圖示，或者使用 Command Palette 執行 Dev Container, 其選項為 Reopen in Container :

接著， VS Code 會開啟一個全新的 VS Code 視窗，注意左下角或視窗標題皆顯示 Dev Container: Existing Dockerfile @ orbstack ，代表這個 VS Code 環境是在 Docker 容器中執行的，打開終端機可以發現我們在 Docker 容器中，執行指令 ps aux|grep vscode-server ，也可以看到 Container 內確實有執行 VS Coder Server:

Dev Container 的擴充 #

最後， Dev Container 的擴充預設是跟本機(local)擴充是分開的，兩者不會互相影響，所以可以放心地在 Dev Container 中安裝各種擴充，不會影響到本機的 VS Code（但是開啟 VS Code 同步就會有影響）：

用 Dev Container 開發 #

用 Dev Container 的開發就跟在本機開發沒有兩樣，同樣都是開發、測試、版本控制等步驟，只是執行環境在 Docker 容器之中。

如果有缺什麼工具指令，都是在 Dockerfile 指定要安裝什麼工具、指令，如此一來所有成員都可以共享同一套開發環境！真香！

總結 #

用 Dev Container 進行開發真的很香，個人認為可以一定程度提升整個團隊的開發體驗，甚至讓開發者更離不開 VS Code 生態系！偉哉！微軟！

Happy Coding!

References #

Developing inside a Container using Visual Studio Code Remote Development

Specification

RamiKrispin/vscode-python: Setting Python Development Environment with VScode and Docker