練習 - 將開發容器新增至現有專案

已完成

當您在設定專案的開發容器時，必須先將容器設定新增至該專案。 容器設定會設定您在 Visual Studio Code 中的環境。

在此練習中，您將新增開發容器，並開啟容器中的 [產品儀表板] 專案。

新增開發容器

1. 返回 VS Code 和您稍早複製的專案。

2. 按下 F1 以開啟 [命令選擇區]。

3. 輸入新增開發容器，然後選取 [開發容器: 新增開發容器設定檔]。 這會顯示開發容器範本的清單。 範本包含針對指定的技術堆疊設定完整開發環境所需的來源檔案。

4. 選取 [將設定新增至使用者資料] 資料夾。

5. 選取下列選項：

   選項	值
   選取容器設定範本	Python 3
   Python 版本	3.11
   選取要安裝的其他功能	選取確定

重要

在選取設定範本的第一個步驟中，您可能需要選取從清單中 [顯示所有定義...]，然後在完整範本集載入後選取 [Python]。

開發容器設定會新增至您的專案。 Visual Studio Code 將會通知您現在可以在容器中開啟專案。 現在請關閉此通知。

檢查設定檔

1. 請注意，名為 [.devcontainer] 的新資料夾已新增至專案。
2. 展開該資料夾，並注意其包含 devcontainer.json 檔案。

在容器中開啟專案

1. 按下 F1 以開啟 [命令選擇區]。
2. 輸入在容器中重新開啟。
3. 從可用選項清單中選取 [開發容器: 在容器中重新開啟]。

容器將會開始建立。 初始組建可能需要幾分鐘的時間，因為必須將新映像拉下並在您的電腦上建置。 第一次建立容器後，之後的建置速度將會大幅提升。

檢視遠端指標

當容器建置完成時，您可以檢查遠端指標，來確認您是否連線到容器。 您現在也應該會看到專案檔載入 VS Code。

• 檢視 VS Code 的左下角來檢查遠端指標。 請注意，它現在會顯示「開發容器: Python 3」。

  

重要

您可能會看到有關 Pylance 或改善 Windows 效能的通知。 您可以安全地關閉您在 VS Code 中看到的任何通知。 您不需要執行這些內容。

檢查容器

1. 按 Ctrl + ` 以開啟 Visual Studio Code 中的整合式終端 (如果尚未開啟)。

2. 請注意，終端提示看起來可能與您的一般終端提示不同。

   

3. 執行下列命令以確保已安裝 Python：

   python --version
   

   終端的輸出應為容器中使用的 Python 版本。

安裝專案相依性

• 在終端中執行下列命令，以安裝執行專案所需的 Flask 相依性：

  pip3 install --user -r requirements.txt
  

執行專案

1. 在終端中輸入下列命令，以啟動專案：

   python app.py
   

2. 瀏覽至 http://127.0.0.1:5000，以在瀏覽器中開啟專案。

   

很棒！ 您已有在機器上執行 Flask 的 Python Web 應用程式，但您可能不知道這些是什麼。 沒關係！ 您不需要知道。 容器會負責設定整個環境。

在下一節中，您將了解如何使用 devcontainer.json 檔案來自動化相依性安裝，並針對此 Python 專案自訂 VS Code。