長(zhǎng)話短說，你可以使用 Docker 和 VS Code 的遠(yuǎn)程容器來建立一個(gè)容器化的本地開發(fā)環(huán)境，這樣就可以讓團(tuán)隊(duì)成員盡快完成入門培訓(xùn)。你不僅可以在所有環(huán)境中使用同一個(gè)基礎(chǔ)鏡像，而且還可以為所有開發(fā)人員提供相同的編輯器，此外還更容易標(biāo)準(zhǔn)化實(shí)現(xiàn)。但這種方法并非適合所有人，如果你不喜歡 VS Code 作為代碼編輯器的話，則可以跳過本文，除非你想嘗試一下。為團(tuán)隊(duì)設(shè)置本地開發(fā)環(huán)境時(shí)，我們所面臨的挑戰(zhàn)之一就在于，確保所有開發(fā)人員的設(shè)置都相同或者能夠滿足需求。這個(gè)問題常見的解決方法是制定入門指南，并希望開發(fā)人員遵循這些指南。但是，由于版本兼容性問題和個(gè)人經(jīng)驗(yàn)等問題，導(dǎo)致我們無法使用正確的工具，因此實(shí)現(xiàn)統(tǒng)一的環(huán)境設(shè)置實(shí)則困難重重。

另外一種解決方案是，準(zhǔn)備一個(gè)預(yù)先配置好的開發(fā)環(huán)境，其中包含了所有必需的庫及依賴項(xiàng)，該環(huán)境可以直接作為容器啟動(dòng)。這樣，開發(fā)人員就可以在容器提供的隔離環(huán)境中工作了。這種方式可以極大地減少開發(fā)人員花費(fèi)在克隆代碼庫上的時(shí)間。

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

所有這些工作都可以通過Docker 與 VS Code 的 Remote-Containers 擴(kuò)展的結(jié)合來實(shí)現(xiàn)。

設(shè)置

在本文中，我將展示一個(gè)在 Node 環(huán)境中運(yùn)行 JavaScript 應(yīng)用程序的示例。有關(guān)的詳細(xì)說明請(qǐng)參見官方文檔（https://code.visualstudio.com/docs/remote/containers）。

首先安裝Docker 和 VS Code，然后在 VS Code 中安裝 Remote — Containers 擴(kuò)展，并確保Docker 可在你的機(jī)器上正常運(yùn)行。

打開項(xiàng)目，在根目錄下創(chuàng)建一個(gè)名為 .devcontainer 的文件夾。這個(gè)新文件夾內(nèi)包含開發(fā)容器所需的配置文件。

在 .devcontainer 中創(chuàng)建 Dockerfile 和 devcontainer.json，并添加以下配置。

# Specify the base image you want your dev container to use.

# You may use the same exact base image your application would use in production for consistancy.

# That could prevent surprises such as “works in local， but not in PROD”.FROM node:14.17.0-alpine

# Additionally you can install other dependencies for the environment while configuring the base image.# In this example， I am installing Git as the Alpine version of node does not come with one.

RUN apk updateRUN apk add git

{“name”： “DevContainer ReactApp”，

// Provide the dev container with a Dockerfile that it can use to build an image and run the container.“dockerFile”： “Dockerfile”，

// Command（s） to run before the container is created.// In this case we are installing the node modules.“initializeCommand”： “yarn install”，

// Starts the development server every time the container starts.// This is triggered on reopening the container as well.“postStartCommand”： “yarn start”，

// Forward your application‘s port（s） running in the container to the local machine.“forwardPorts”： ［3000］，

// Required VSC code extensions that you want to automatically install for the developers to use.

“extensions”： ［“dbaeumer.vscode-eslint”，“esbenp.prettier-vscode”，“eamodio.gitlens”］// Use the devcontainer.json reference to explore all possible configurations.// https://code.visualstudio.com/docs/remote/devcontainerjson-reference}

在完成上述工作后，我們來構(gòu)建容器。首先，點(diǎn)擊VS Code 命令面板中的“Open Folder in Container”或“Reopen in Container”。

這一步是初始化開發(fā)容器，拉取 Docker 基礎(chǔ)鏡像、配置容器，然后啟動(dòng)開發(fā)服務(wù)器。

完成這一步，你就應(yīng)該能夠在瀏覽器中訪問應(yīng)用程序，并正常使用 VS Code 進(jìn)行開發(fā)了。就連熱重載都能正常工作！我創(chuàng)建了一個(gè)代碼庫（https://github.com/Gigacore/devcontainer-react-example），其中包含一個(gè)示例，你可以嘗試一下！

容器的構(gòu)建和配置只需要執(zhí)行一次，但是需要一定的時(shí)間。以后如果不發(fā)生變化，那么重建會(huì)更快。但是，如果 devcontainer.json 或 Dockerfile 發(fā)生變化，則需要重新構(gòu)建。如果你嘗試直接重新打開，系統(tǒng)會(huì)提示你重建。

在退出容器或 VS Code 后，下一次可以通過 ”Reopen in Container” 選項(xiàng)重新進(jìn)入容器。該選項(xiàng)會(huì)啟動(dòng)已配置的容器，并再次啟動(dòng)開發(fā)服務(wù)器。如果VS Code 在代碼庫中找到 .devcontainer 配置，則會(huì)自動(dòng)提示你啟動(dòng)容器。

容器和本地計(jì)算機(jī)之間的文件系統(tǒng)是同步的，因此你可以通過任一環(huán)境訪問代碼。

你可以運(yùn)行任意多個(gè)應(yīng)用程序，即便它們需要不同版本依賴項(xiàng)，而無需在計(jì)算機(jī)上安裝或修改任何應(yīng)用程序。

團(tuán)隊(duì)中的任何人都可以在自己的計(jì)算機(jī)上運(yùn)行應(yīng)用程序，編寫和審核代碼，或者做一些嘗試，包括非技術(shù)成員。

應(yīng)用程序的運(yùn)行不需要依賴操作系統(tǒng)。

常見問題和解決方法

你可以利用 VS Code 終端運(yùn)行任何腳本或命令，因?yàn)樗驮谌萜鞯墓ぷ鲄^(qū)中。但是如果想使用macOS 的“Terminal”等其他工具，則需要找到容器，然后執(zhí)行docker exec。

由于應(yīng)用程序在 Docker 容器內(nèi)運(yùn)行，因此它可以使用的資源（CPU、內(nèi)存等）很有限。默認(rèn)限制在大多數(shù)情況下都沒有問題。但是，對(duì)于有些應(yīng)用程序，你可能需要在Docker選項(xiàng)中提高這些資源限制，以避免發(fā)生卡頓現(xiàn)象。

并非適合所有人

雖然這種做法可以降低構(gòu)建開發(fā)環(huán)境的難度，但是對(duì)于需要在容器范圍之外的環(huán)境中進(jìn)行廣泛集成和配置的應(yīng)用程序來說并不理想。

高級(jí)用戶和經(jīng)驗(yàn)豐富的開發(fā)人員可能不太喜歡這種方式，特別是有些人更喜歡其他代碼編輯器。這種設(shè)置方式可以作為備選，不要強(qiáng)迫開發(fā)人員運(yùn)行容器，他們?nèi)匀豢梢允謩?dòng)設(shè)置環(huán)境。

如果應(yīng)用程序占用了大量資源，則運(yùn)行 Docker 容器可能會(huì)消耗更多資源。

總結(jié)

這是一個(gè)相對(duì)較新的概念，有許多地方需要探索，而且也有很多限制需要解決。我個(gè)人很喜歡這種方式，而且也比較推薦。如果你也采用了這種方式，請(qǐng)?jiān)谙路搅粞苑窒砟愕慕?jīng)驗(yàn)。

原文鏈接：https://santhoshsundar.medium.com/building-container-based-development-environment-with-visual-studio-code-2d7111c650bd

作者 | Santhosh Sundar 譯者 | 彎月 責(zé)編 | 歐陽姝黎

文章轉(zhuǎn)載：CSDN

責(zé)任編輯：haq