利用 VS Code 構建基於容器的開發環境

以下為譯文：

長話短說，你可以使用 Docker 和 VS Code 的遠程容器來建立一個容器化的本地開發環境，這樣就可以讓團隊成員儘快完成入門培訓。你不僅可以在所有環境中使用同一個基礎鏡像，而且還可以為所有開發人員提供相同的編輯器，此外還更容易標準化實現。但這種方法並非適合所有人，如果你不喜歡 VS Code 作為代碼編輯器的話，則可以跳過本文，除非你想嘗試一下。

為團隊設置本地開發環境時，我們所面臨的挑戰之一就在於，確保所有開發人員的設置都相同或者能夠滿足需求。這個問題常見的解決方法是制定入門指南，並希望開發人員遵循這些指南。但是，由於版本兼容性問題和個人經驗等問題，導致我們無法使用正確的工具，因此實現統一的環境設置實則困難重重。

圖：常見的環境設置方法。

另外一種解決方案是，準備一個預先配置好的開發環境，其中包含了所有必需的庫及依賴項，該環境可以直接作為容器啟動。這樣，開發人員就可以在容器提供的隔離環境中工作了。這種方式可以極大地減少開發人員花費在克隆代碼庫上的時間。

圖：使用基於容器的開發環境。

除了為所有開發人員提供相同的環境之外，我們還可以在 Visual Studio Code 中使用同一套工具、擴展甚至主題集。儘管這不是必須的，但我們可以利用它來自動安裝項目所需的特定擴展。這種方式可以避免工具的不一致，而且開發人員也可以免卻手動安裝的麻煩。

所有這些工作都可以通過Docker 與 VS Code 的 Remote-Containers 擴展的結合來實現。

設置

在本文中，我將展示一個在 Node 環境中運行 JavaScript 應用程式的示例。有關的詳細說明請參見官方文檔（https://code.visualstudio.com/docs/remote/containers）。

首先安裝Docker 和 VS Code，然後在 VS Code 中安裝 Remote — Containers 擴展，並確保Docker 可在你的機器上正常運行。

打開項目，在根目錄下創建一個名為 .devcontainer 的文件夾。這個新文件夾內包含開發容器所需的配置文件。

在 .devcontainer 中創建 Dockerfile 和 devcontainer.json，並添加以下配置。

FROM node:14.17.0-alpine

RUN apk updateRUN apk add git
{"name": "DevContainer ReactApp",
"dockerFile": "Dockerfile",
"initializeCommand": "yarn install",
"postStartCommand": "yarn start",
"forwardPorts": [3000],

"extensions": ["dbaeumer.vscode-eslint","esbenp.prettier-vscode","eamodio.gitlens"]}
在完成上述工作後，我們來構建容器。首先，點擊VS Code 命令面板中的「Open Folder in Container」或「Reopen in Container」。
這一步是初始化開發容器，拉取 Docker 基礎鏡像、配置容器，然後啟動開發伺服器。
完成這一步，你就應該能夠在瀏覽器中訪問應用程式，並正常使用 VS Code 進行開發了。就連熱重載都能正常工作！我創建了一個代碼庫（https://github.com/Gigacore/devcontainer-react-example），其中包含一個示例，你可以嘗試一下！
容器的構建和配置只需要執行一次，但是需要一定的時間。以後如果不發生變化，那麼重建會更快。但是，如果 devcontainer.json 或 Dockerfile 發生變化，則需要重新構建。如果你嘗試直接重新打開，系統會提示你重建。
在退出容器或 VS Code 後，下一次可以通過 」Reopen in Container」 選項重新進入容器。該選項會啟動已配置的容器，並再次啟動開發伺服器。如果VS Code 在代碼庫中找到 .devcontainer 配置，則會自動提示你啟動容器。
容器和本地計算機之間的文件系統是同步的，因此你可以通過任一環境訪問代碼。
你可以運行任意多個應用程式，即便它們需要不同版本依賴項，而無需在計算機上安裝或修改任何應用程式。
團隊中的任何人都可以在自己的計算機上運行應用程式，編寫和審核代碼，或者做一些嘗試，包括非技術成員。
應用程式的運行不需要依賴作業系統。
常見問題和解決方法

並非適合所有人
雖然這種做法可以降低構建開發環境的難度，但是對於需要在容器範圍之外的環境中進行廣泛集成和配置的應用程式來說並不理想。
高級用戶和經驗豐富的開發人員可能不太喜歡這種方式，特別是有些人更喜歡其他代碼編輯器。這種設置方式可以作為備選，不要強迫開發人員運行容器，他們仍然可以手動設置環境。
如果應用程式佔用了大量資源，則運行 Docker 容器可能會消耗更多資源。
總結
這是一個相對較新的概念，有許多地方需要探索，而且也有很多限制需要解決。我個人很喜歡這種方式，而且也比較推薦。如果你也採用了這種方式，請在下方留言分享你的經驗。
原文連結：https://santhoshsundar.medium.com/building-container-based-development-environment-with-visual-studio-code-2d7111c650bd
聲明：本文由CSDN翻譯，轉載請註明來源。

生於2001年的《程式設計師》曾陪伴了無數開發者成長，影響了一代又一代的中國技術人。時隔20年，《新程式設計師》帶著全球技術大師深邃思考、優秀開發者技術創造等深度內容回來了！同時將全方位為所有開發者呈現國內外核心技術生態體系全景圖。掃描下方小程序碼即可立即訂閱！