教學課程：使用Visual StudioCode建立容器應用程式

2025-05-14

本教學課程是四部分系列簡介 Docker，以搭配 Visual Studio Code （VS Code）使用。您將瞭解如何建立及執行 Docker 容器、保存數據，以及使用 Docker Compose 管理多個容器。

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

在本第一個教學課程中，您將瞭解如何：

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

先決條件

已經安裝 Visual Studio Code。
已安裝容器工具 VS Code 擴充功能。
Docker Desktop 設定為使用 Linux 容器。
Docker Hub 帳戶。您可以免費建立帳戶。

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

建立容器

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

容器會使用隔離的文件系統。這個自定義檔案系統是由 容器映像提供。映像檔包含執行應用程式所需的所有內容，例如所有相依項目、組態、腳本和二進位檔。映射也包含容器的其他組態，例如環境變數、要執行的預設命令，以及其他元數據。

安裝適用於 VS Code 的 Container Tools 擴充功能之後，您可以在 VS Code 中使用容器。除了容器總管中的內容功能表之外，您還可以選取終端>新終端機 來開啟命令列視窗。您也可以在 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 中，選取左側的 [容器] 圖示以檢視容器總管。

容器工具 VS Code 擴充功能會顯示在電腦上執行的容器。您可以存取容器記錄並管理容器生命週期，例如停止和移除。

系統會隨機建立此範例中的容器名稱 modest_shockley。您的名稱會不同。
在 docker/getting-started 上右鍵點選以開啟操作功能表。選取 在瀏覽器開啟。

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

您會看到一個頁面，本地託管，介紹 DockerLabs。
在 docker/getting-started 上右鍵點選以開啟操作功能表。選取 [移除以移除此容器。

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

建置應用程式的容器映像

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

螢幕快照顯示範例應用程式，其中已新增數個專案，以及新增專案的文字框和按鈕。

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

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

移至 Docker 使用者入門教學課程存放庫，然後選取 [程式代碼]>下載 ZIP。將內容解壓縮到本機資料夾。
在 VS Code 中，選取 [檔案]>[開啟資料夾]。流覽至解壓縮專案中 應用程式 資料夾，然後開啟該資料夾。您應該會看到名為 package.json 的檔案，以及名為 src src 和規格的兩個資料夾。
使用下列內容，在與檔案 package.json 相同的資料夾中，建立名為 Dockerfile 的檔案。
```
FROM node:lts-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，然後選取 [建置映像] 。輸入 用戶入門 作為文字輸入方塊中影像的標籤。

標記是影像的易記名稱。

若要從命令行建立容器映像，請使用具有 app 資料夾中的下列命令。
```
docker build -t getting-started .
```

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

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

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

啟動您的應用程式容器

既然您有映像，就可以執行應用程式。

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

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

後續步驟

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

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

更新和共用容器應用程式

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

共用方式為