VS Code 使用 Dev Container 建立專案開發環境

1. 說明
2. 安裝 Dev Container
3. 在專案中建立Container開發環境
   1. Node.js
4. 在Container中重新啟動開發環境
5. 在原目錄重新啟動開發環境
6. 幫開發容器加入VSCode Extension
7. 幫開發容器安裝預設VSCode Extension
8. 結論
   1. 優點
   2. 缺點
9. 參考資料

說明

• 容器化不但安裝迅速而且效能高，尤其是在更新版本時更是比vm來得快速，並且可使用設定檔快速佈署環境，達到開發測試全員環境統一的狀況，非常棒。
• 在本文中記錄如何使用Dev Container建構開發環境。

安裝 Dev Container

• 打開VSCode延申模組介面
• 搜尋Remote - SSH, Dev Container，安裝並啟動

需已安裝Docker環境

在專案中建立Container開發環境

Node.js

• git clone 目標專案
• 打開命令列，執行 >Dev Containers: Add Dev Container Configuration Files
• 選擇來自docker-compose.yaml
• 輸入目標 Node.js後選擇版本參數
• 可在專案根目錄中發現資料夾及檔案
  • .devcontainer
    • devcontainer.json : 容器設定檔
    • docker-compose.yml : docker-compose設定檔，可在devcontainer.json的dockerComposeFile重新指定位置

在Container中重新啟動開發環境

• 打開命令列，執行 >Dev Containers: Reopen in Container

可設定快速鍵方便使用，如 ctrl+cmd+c

在原目錄重新啟動開發環境

• 打開命令列，執行 >Dev Containers: Reopen Folder Locally

可設定快速鍵方便使用，如 ctrl+cmd+l

幫開發容器加入VSCode Extension

• 打開延申模組介面，找到指定模組。
• 在模組上按右鍵，選新增至 devcontainer.json

可在Extension清單中點選安裝至 開發容器後，執行 >Rebuild container (命令列)

幫開發容器安裝預設VSCode Extension

• 打開Setting
• 搜尋設定項目dev.containers.defaultExtensions
• 加入要安裝的Extension ID
• 打開命令列，執行 >Rebuild container

結論

優點

• 執行環境容器化，在不同電腦也能保持一致環境
• Host電腦主機免安裝各式程式，保持乾淨

缺點

• 跑容器會損失一點效能

參考資料

• Github - vscode-remote-release
• VS Code Developing inside a Container
• Visual Studio Code 使用 Remote Container 建立專案開發環境