教學課程：使用 Visual Studio Code 建立 Docker 應用程式

發行項
10/07/2023

本教學課程是四部分的 Docker 簡介系列，可搭配 Visual Studio Code (VS Code) 使用。您將了解如何建立和執行 Docker 容器、保存資料，以及使用 Docker Compose 管理多個容器。

VS Code 提供 Docker 延伸模組，可讓您使用本機 Docker Desktop 服務。 Docker Desktop 會在您的電腦上執行並管理本機容器，這些容器是精簡的虛擬化環境，可提供建置和執行應用程式的平台。容器不需要完整作業系統的大小和額外負荷。

在這個第一個教學課程中，您會了解以下做法：

建立 Docker 容器。
建置容器映像。
啟動應用程式容器。

必要條件

Visual Studio Code 已安裝。
Docker VS Code 延伸模組已安裝。
Docker Desktop 設定為使用 Linux 容器。
Docker Hub 帳戶。您可以免費建立帳戶。

本教學課程適用於 Windows 10 或更新版本，以及設定為使用 Linux 容器的 Docker Desktop。

建立容器

容器是電腦上的處理序。它會與主機電腦上的所有其他處理序隔離。該隔離會使用核心命名空間和控制項群組。

容器會使用隔離的檔案系統。此自訂檔案系統是由容器映像提供。映像包含執行應用程式所需的所有項目，例如所有相依性、設定、指令碼和二進位檔。映像也包含容器的其他設定，例如環境變數、要執行的預設命令，以及其他中繼資料。

安裝適用於 VS Code 的 Docker 延伸模組之後，您就可以在 VS Code 中使用容器。除了 Docker 窗格中的捷徑功能表，您還可以選取 [終端]>[新增終端] 來開啟命令列視窗。您也可以在 Bash 視窗中執行命令。除非指定，否則標示為 Bash 的任何命令都可以在 Bash 視窗或 VS Code 終端中執行。

將 Docker 設定為 Linux 容器模式。若要切換至 Linux 容器，如果您目前已設定為 Windows 容器，請在執行 Docker Desktop 時，以滑鼠右鍵按一下系統匣中的 Docker 圖示，然後選擇 [切換至 Linux 容器]。
在 VS Code 中，選取 [終端]>[新增終端]。
在終端視窗或 Bash 視窗中，執行此命令。
```
docker run -d -p 80:80 docker/getting-started
```
此命令包含下列參數：
- -d 在背景中以中斷連結模式執行容器。
- -p 80:80 將主機的連接埠 80 對應至容器中的連接埠 80。
- docker/getting-started 指定要使用的映像。
提示

您可以結合單一字元旗標來縮短完整的命令。例如，上述命令可以寫為：
```
docker run -dp 80:80 docker/getting-started
```
在 VS Code 中，選取左側的 Docker 圖示以檢視 Docker 延伸模組。

Docker VS Code 延伸模組會顯示在電腦上執行的容器。您可以存取容器記錄並管理容器生命週期，例如停止和移除。

系統會隨機建立此範例中的容器名稱 modest_shockley。您的容器名稱會不同。
以滑鼠右鍵按一下 docker/getting-started 以開啟捷徑功能表。選取 [Open in Browser] (在瀏覽器中開啟)。

請改為開啟瀏覽器，然後輸入 http://localhost/tutorial/。

您會看到一個裝載在本機有關 DockerLabs 的頁面。
以滑鼠右鍵按一下 docker/getting-started 以開啟捷徑功能表。選取 [移除] 以移除此容器。

若要使用命令列移除容器，請執行此命令以取得其容器識別碼：
```
docker ps
```
然後停止並移除容器：
```
docker stop <container-id>
docker rm <container-id>
```
重新整理您的瀏覽器。您稍早看到的 [使用者入門] 頁面已消失。

建置應用程式的容器映像

本教學課程使用簡單的 Todo 應用程式。

Screenshot shows the sample application with several items added and a text box and button to add new items.

應用程式可讓您建立工作項目，並將其標示為已完成或刪除。

若要建置應用程式，請建立 Dockerfile。 Dockerfile 是以文字為基礎的指示指令碼，可用來建立容器映像。

移至 Docker 使用者入門教學課程存放庫，然後選取 [程式碼]>[下載 ZIP]。將內容解壓縮到本機資料夾。
在 VS Code 中，選取 [檔案]>[開啟資料夾]。瀏覽至解壓縮專案中 [應用程式] 資料夾，然後開啟該資料夾。您應該會看到名為 package.json 的檔案，以及名為 src 和 spec 的兩個資料夾。
使用下列內容，在與 package.json 檔案相同的資料夾中，建立名為 Dockerfile 的檔案。
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
注意

請確定檔案沒有副檔名，例如 .txt。
在檔案總管左側的 VS Code 中，以滑鼠右鍵按一下 Dockerfile，然後選取 [建置映像]。輸入 getting-started 作為文字輸入方塊中映像的標籤。

標籤是映像的自訂名稱。

若要從命令列建立容器映像，請使用下列命令。
```
docker build -t getting-started .
```
注意

在外部 Bash 視窗中，移至具有 Dockerfile 的 app 資料夾，以執行此命令。

您已使用 Dockerfile 來建置新的容器映像。您可能已經注意到下載了許多「層」。 Dockerfile 會從 node:20-alpine 映像開始。除非該映像已在您的電腦上，否則需要下載映像。

下載映像之後，Dockerfile 會複製您的應用程式，並使用 yarn 來安裝應用程式的相依性。 Dockerfile 中的 CMD 值會指定從此映像啟動容器時要執行的預設命令。

docker build 命令結尾處的 . 會指出 Docker 應該在目前目錄中尋找 Dockerfile。

啟動您的應用程式容器

現在您已經擁有映像，可以執行應用程式。

若要啟動容器，請使用下列命令。
```
docker run -dp 3000:3000 getting-started
```
-d 參數表示您在背景中以中斷連結模式執行容器。 -p 值會在主機連接埠 3000 與容器連接埠 3000 之間建立對應。如果沒有連接埠對應，您將無法存取應用程式。
幾秒鐘後，請在 VS Code 的 Docker 區域中，於 [CONTAINERS] 底下，以滑鼠右鍵按一下 [getting-started]，然後選取 [在瀏覽器中開啟]。您可以改為開啟網頁瀏覽器來 http://localhost:3000。

您應該會看到應用程式執行。
新增一或兩個項目，以測試是否如預期運作。您可以將項目標示為完成，並移除項目。您的前端已成功將項目儲存在後端。

下一步

您已完成本教學課程，而且您有一個執行中的待辦事項清單管理員，其中包含一些項目。您已了解如何建立容器映像並執行容器化應用程式。

請保留到目前為止您所做的一切，以繼續這一系列的教學課程。接下來，請嘗試此系列的第二部分：

更新並共用 Docker 應用程式

以下是一些對您可能有用的資源：