# Visual Studio Code To Container (Docker) ## 先決條件 執行下列其中一項的電腦： ``` Windows：Windows 10 Mac：macOS 10.9 或更新版本 Linux：Ubuntu、Debian、Red Hat、Fedora 或 SUSE Visual Studio Code 基本的軟體開發知識，例如執行程式碼或安裝新語言的意義 Docker 和基本的 Docker 知識 (熟悉映像、容器和登錄的概念)： Windows：Windows 10 專業版/企業版上的 Docker Desktop 2.0+。 Windows 10 家用版 (2004 以上版本) 需要 Docker Desktop 2.3 以上版本，以及 WSL 2 back end (WSL 2 後端)。 Mac：Docker Desktop 2.0+。 Linux：Docker CE/EE 18.06+ 和 Docker Compose 1.21+。 Git 和 GitHub 的基本知識，例如什麼是存放庫 ``` --- # 使用 Visual Studio Code 中的 Remote - Containers 延伸模組 ## 練習 - 將開發容器新增至現有專案 當您在設定專案的開發容器時，必須先將容器設定新增至該專案。 容器設定會設定您在 Visual Studio Code 中的環境。 在此練習中，您將會複製機構的其中一個專案：以 Python 撰寫的產品儀表板。 您接著會新增開發容器，然後在容器中開啟該專案。 若您不熟悉 Python，請不要擔心。 本單元將為您提供執行應用程式所需要的所有程式碼和工具。 複製範例存放庫 請確定 Docker Desktop 正在您的電腦上執行。 將範例存放庫的 URL 複製到您的剪貼簿。 > https://github.com/MicrosoftDocs/mslearn-python-products 開啟新的 Visual Studio Code 執行個體。 按下 F1 以開啟命令選擇區。 鍵入 clone。 選取 [Git: Clone] (Git: 複製)。 將 URL 貼到範例存放庫。 選取您磁碟上可供複製專案的位置。 專案現在應該會在 Visual Studio Code 中開啟。 安裝 Remote - Containers 延伸模組 按 Ctrl + Shift + X 以開啟 [Extensions] (延伸模組) Viewlet。 鍵入 remote containers。 找出 Remote - Containers 延伸模組，然後選取 [Install] (安裝) 按鈕。 Remote - Containers 延伸模組將會進行安裝，並且您將可以存取其新增至 Visual Studio Code 的命令。 新增開發容器 開啟命令選擇區。 鍵入 add dev container。 選取 Remote-Containers: Add Development Container Configuration Files (Remote-Containers: 新增開發容器設定檔)。 選取下列選項： 資料表 1 選項 值 選取容器設定定義 Python 3 Python 版本 3 (預設) 安裝 Node.js 清除 選取 [確定] 。 遠端容器設定會新增至您的專案。 Visual Studio Code 將會通知您現在可以在容器中開啟專案。 現在請關閉此通知。 檢查設定檔 請注意，名為 .devcontainer 的新資料夾已新增至專案。 展開該資料夾，並注意其同時包含 Dockerfile 和 devcontainer.json 檔案。 在容器中開啟專案 開啟命令選擇區。 鍵入 reopen in container。 從可用選項清單中選取 [Reopen in Container] (在容器中重新開啟)。 容器將會開始建立。 初始組建可能需要幾分鐘的時間，因為必須將新映像拉下並在您的電腦上建置。 第一次建立容器後，之後的建置速度將會大幅提升。 重要 如果您是使用 Windows，可能會看到來自 Docker Desktop 的 Windows 通知，警告您效能可能會受到影響。 您可以安全地忽略本教學課程中的這項警告。 檢查容器 按 `Ctrl + ` ` 以開啟 Visual Studio Code 中的整合式終端。 請注意，終端看起來可能與一般終端不同。 執行下列命令以確保 Python 存在： 選取 [Open in Browser] (在瀏覽器中開啟)。 此步驟應該會開啟指向 localhost:5000 的瀏覽器，並且您將會看到產品儀表板。 --- # 本機開發的轉送連接埠 https://docs.microsoft.com/zh-tw/learn/modules/use-docker-container-dev-env-vs-code/4-forward-ports --- # 練習 - 本機開發的轉送連接埠 https://docs.microsoft.com/zh-tw/learn/modules/use-docker-container-dev-env-vs-code/6-customize-settings ###### tags: `MQTT` `Node-RED` `EC2` --- # 練習 - 自訂專案和編輯器設定