將 Docker 與 Visual Studio Code (VS Code) 整合可大幅提升開發體驗，使開發人員能夠有效率地建立和管理 Docker 文件，直觀地查看容器和映像，並輕鬆存取日誌或終端。本文提供了有關如何透過 Docker 擴充功能在 VS Code 中設定 Docker 的全面指南。
如何在 VS Code 中安裝 Docker 擴充
在安裝 Docker 擴充功能之前，請確保您的電腦上已正確配置 Docker 和 Visual Studio Code。首先，在 VS Code 中開啟“擴充功能”視圖，搜尋“Docker”，然後安裝 Microsoft 提供的官方 Docker 擴充功能。
安裝成功後，您會注意到編輯器左下角出現一個Docker/Containers圖標，表示Docker Explorer現在可用。
在 Docker Desktop 和 VS Code 之間建立連接
Docker Desktop 運行時，Docker 擴充功能與 VS Code 無縫連接。通常情況下，除非您的 Docker 設定涉及特殊配置（例如，遠端主機或 WSL 整合），否則無需進行其他配置。
若要驗證連接，請點選Docker/Containers圖示啟動 Docker Explorer。在那裡，您可以觀察正在運行和已停止的容器，以及鏡像、註冊表、磁碟區和網路。
直接從 VS Code 管理容器、鏡像和卷
Docker 已完全整合到 VS Code，管理容器任務變得前所未有的輕鬆。您可以在“容器”部分輕鬆查看正在運行和已停止的容器。
此外，右鍵單擊任何容器都會為您提供啟動、停止、重新啟動或刪除該容器的選項。
您也可以輕鬆拉取新鏡像、從現有設定建立鏡像或清理未使用的鏡像。例如，要刪除不再需要的鏡像，只需右鍵單擊該鏡像並選擇移除 即可。
此外，管理連結到容器的捲非常簡單 – 右鍵單擊所需的捲即可檢查或修改它。
您還可以探索和管理網路、註冊表、Docker 上下文，並存取幫助和回饋部分，進一步優化您的開發工作流程。
在 VS Code 中建立並運行容器化應用程式
作為一個實際操作範例，讓我們建立一個簡單的 Node.js Express 應用程式來示範 Docker 擴充功能的功能。首先在 VS Code 中為你的專案建立一個新資料夾。在此資料夾中，建立一個名為 的檔案index.js並輸入以下程式碼：
const express = require("express"); const server = express(()); const PORT = 4000; server.get("/", (req, res) => { res.send("Welcome to our Express app!");}); server.listen(PORT, (() => { console.log(`App running on port ${PORT}`);});
這段簡單的程式碼片段創建了一個小型 Express 應用，監聽 4000 端口，當訪問根 URL (/) 時，會返回“歡迎使用我們的 Express 應用！”。它為測試 Dockerfile 奠定了基礎。
接下來，您需要一個 Dockerfile。 Docker 擴充功能可以簡化此過程，而無需手動建立 Dockerfile 並指定其指令。⇧⌘P在 Mac 上按 或Windows 上按Ctrl+ Shift+開啟命令面板P，然後輸入命令Add Docker files to Workspace。
從提供的選項中選擇 Node.js 作為您的應用程式平台。
指向專案根目錄中的「package.json」檔案。此文件是應用程式的主要配置文件，它將指導 Docker 擴充功能產生與 Docker 相關的必要文件。
接下來，指出您的應用程式將使用的連接埠號，以便 Docker 可以適當地公開它。
當提示包含 Docker Compose 檔案時，選擇「是」 。
Docker 擴充功能現在將根據您的選擇產生一個 Dockerfile、一個「.dockerignore」檔案和一個「compose.yaml」檔案。
若要繼續建立 Docker 映像，請右鍵點選 Dockerfile 並選擇Build Image，或從命令面板執行Docker Images: Build Image 。
建置過程完成後，導覽至Docker Explorer 中的Images部分以查看新建立的專案：
現在，要運行圖像，請打開命令面板並執行container images: run，或者只需右鍵單擊圖像並選擇運行。
從顯示的清單中選擇最新的圖像。
最後，您可以透過檢查Docker Explorer 中的容器部分來驗證您的應用程式是否正在執行。
若要存取您的應用程序，請右鍵單擊 Docker Explorer 中正在執行的容器，然後選擇在瀏覽器中開啟。
因此，您將能夠看到容器的運行，並且您的應用程式可以透過先前指定的連接埠存取。
結論
Docker 與 Visual Studio Code 的整合簡化了開發流程，使開發人員能夠直接從其編碼環境有效地建置、執行和控制容器。完成設定後，您只需單擊即可無縫建立 Docker 檔案、瀏覽容器和映像，以及查看日誌或終端輸出。這種整合不僅簡化了應用程式的運作和測試，還能維持有序且有效率的工作流程。
發佈留言