教學課程:使用 Visual Studio Code 建立和共用 Docker 應用程式

本教學課程是介紹使用 Visual Studio Code (VS Code) Docker 的三部分系列開頭。 您將瞭解如何建立和執行容器、保存資料,以及將容器化應用程式部署至 Azure。

在此第一個教學課程中,您將瞭解如何建立和部署 Docker 應用程式。 然後,您可以更新並共用容器化應用程式。

容器是精簡的虛擬化環境,例如虛擬機器,可提供用於建置和執行應用程式的平臺。 容器不需要完整作業系統的大小和額外負荷。 Docker 是協力廠商、業界標準容器提供者和容器管理系統。

Docker Desktop 會在您的電腦上執行,並管理您的本機容器。 Visual Studio 和 VS Code 等開發工具提供延伸模組,可讓您使用本機 Docker Desktop 服務。 您可以建立容器化應用程式、將應用程式部署到容器,以及對容器上執行的應用程式進行偵錯。

在本教學課程中,您會了解如何:

  • 建立容器。
  • 建置容器映像。
  • 啟動應用程式容器。
  • 更新程式碼並取代容器。
  • 共用您的映射。
  • 在新實例上執行映射。

先決條件

建立容器

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

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

安裝適用于 VS Code 的 Docker 擴充功能之後,您可以在 VS Code 中使用容器。 除了 Docker 窗格中的內容功能表之外,您還可以選取[終端機新增終端機> ] 來開啟命令列視窗。 您也可以在 Bash 視窗中執行命令。 除非指定,否則標示為 Bash 的任何命令都可以在 Bash 視窗或 VS Code 終端機中執行。

  1. 在 VS Code 中,選取[終端機] [新增終端> 機]。

  2. 在終端機視窗或 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
    
  3. 在 VS Code 中,選取左側的 Docker 圖示以檢視 Docker 擴充功能。

    顯示 Docker 擴充功能的螢幕擷取畫面,其中已執行 docker/getting-started 教學課程。

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

    系統會隨機建立此範例中的容器名稱 modest_schockly 。 您的 將會有不同的名稱。

  4. 以滑鼠右鍵按一下 docker/getting-started 以開啟操作功能表。 選取 [Open in Browser] (在瀏覽器中開啟)。

    請改為開啟瀏覽器並輸入 http://localhost/tutorial/

    您會看到有關 DockerLabs 的本機裝載頁面。

  5. 以滑鼠右鍵按一下 docker/getting-started 以開啟操作功能表。 選取 [移除] 以 移除此容器。

    若要使用命令列移除容器,請執行此命令以取得其容器識別碼:

    docker ps
    

    然後停止並移除容器:

    docker stop <container-id>
    docker rm <container-id>
    
  6. 重新整理您的瀏覽器。 您稍早看到的消費者入門頁面已消失。

建置應用程式的容器映射

本教學課程使用簡單的待辦事項應用程式。

此螢幕擷取畫面顯示範例應用程式,其中已新增數個專案,以及一個文字方塊和按鈕來新增專案。

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

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

  1. 移至Docker 消費者入門教學課程存放庫,然後選取 [程式碼>下載 ZIP]。 將內容解壓縮至本機資料夾。

    此螢幕擷取畫面顯示 Github 網站的一部分,其中已醒目提示綠色 [程式碼] 按鈕和 [下載 ZIP] 選項。

  2. 在 VS Code 中,選取 [檔案>開啟資料夾]。 流覽至解壓縮專案中 的應用程式 資料夾,然後開啟該資料夾。 您應該會看到名為 package.json 的檔案,以及名為 srcspec的兩個資料夾。

    Visual Studio Code螢幕擷取畫面,其中顯示已載入應用程式的 package.json 檔案。

  3. 使用下列內容,在與file package.json相同的資料夾中建立名為Dockerfile的檔案。

    FROM node:12-alpine
    WORKDIR /app
    COPY . .
    RUN yarn install --production
    CMD ["node", "/app/src/index.js"]
    

    注意

    請確定檔案沒有副檔名,例如 .txt

  4. 在檔案總管的 VS Code 左側,以滑鼠右鍵按一下 Dockerfile ,然後選取 [ 建置映射]。 輸入 使用者入門 作為文字方塊中影像的標籤。

    標記是影像的易記名稱。

    若要從命令列建立容器映射,請使用下列命令。

    docker build -t getting-started .
    

    注意

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

您已使用 Dockerfile 來建置新的容器映射。 您可能已注意到已下載許多「層」。 Dockerfile會從 node:12-alpine 映射開始。 除非您已在您的電腦上,否則必須下載該映射。

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

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

啟動您的應用程式容器

現在您已擁有映射,您可以執行應用程式。

  1. 若要啟動容器,請使用下列命令。

    docker run -dp 3000:3000 getting-started
    

    參數 -d 指出您是在背景中,以中斷連結模式執行容器。 值 -p 會建立主機埠 3000 與容器埠 3000 之間的對應。 如果沒有埠對應,您將無法存取應用程式。

  2. 幾秒鐘之後,在 VS Code 的 Docker 區域中,于 [容器] 底下,以滑鼠右鍵按一下 [開始使用 ],然後選取 [ 在瀏覽器中開啟]。 您可以改為將網頁瀏覽器開啟至 http://localhost:3000

    您應該會看到應用程式正在執行。

    此螢幕擷取畫面顯示範例應用程式,其中沒有專案,且文字尚未新增上述專案。

  3. 新增專案或兩個專案,並查看它如預期般運作。 您可以將專案標示為完成並移除專案。 您的前端已成功將專案儲存在後端。

更新程式碼並取代容器

此時,您有一個執行中的待辦事項清單管理員,其中包含一些專案。 現在,讓我們進行一些變更,並瞭解如何管理您的容器。

  1. 在 檔案中 src/static/js/app.js ,更新第 56 行以使用此新的文字標籤:

    - <p className="text-center">No items yet! Add one above!</p>
    + <p className="text-center">You have no todo items yet! Add one above!</p>
    

    儲存變更。

  2. 停止並移除容器的目前版本。 多個容器無法使用相同的埠。

    以滑鼠右鍵按一下 使用者入門 容器,然後選取 [ 移除]。

    此螢幕擷取畫面顯示已選取容器的 Docker 延伸模組,以及已選取 [移除] 的操作功能表。

    或者,從命令列使用下列命令來取得容器識別碼。

    docker ps
    

    然後停止並移除容器:

    docker stop <container-id>
    docker rm <container-id>
    
  3. 建置映射的更新版本。 在檔案總管中,以滑鼠右鍵按一下 [Dockerfile],然後選取 [ 建置映射]。

    或者,若要在命令列上建置,請使用您之前使用的相同命令。

    docker build -t getting-started .
    
  4. 啟動使用更新程式碼的新容器。

    docker run -dp 3000:3000 getting-started
    
  5. 重新整理 http://localhost:3000 瀏覽器,以查看更新的解說文字。

    此螢幕擷取畫面顯示範例應用程式,其中包含上述修改過的文字。

共用您的映射

現在您已建置映射,您可以加以共用。 若要共用 Docker 映射,請使用 Docker 登錄。 預設登錄是Docker Hub,這是我們使用的所有映射都來自何處。

若要推送映射,首先,您必須在Docker Hub上建立存放庫。

  1. 移至Docker Hub並登入您的帳戶。

  2. 選取 [建立存放庫]。

  3. 針對存放庫名稱,輸入 getting-started 。 請確定 可見度公用

  4. 選取 [建立]。

    在頁面右側,您會看到名為 Docker 命令的區段。 本節提供執行 以推送至此存放庫的範例命令。

    顯示具有建議 Docker 命令之Docker Hub頁面的螢幕擷取畫面。

  5. 在 VS Code 的 Docker 檢視中,于 [映射] 底下,以滑鼠右鍵按一下映射標籤,然後選取 [ 推送]。 選取 [連線登錄],然後Docker Hub

    您必須輸入Docker Hub帳戶、密碼和命名空間。

若要使用命令列推送至Docker Hub,請使用此程式。

  1. 登入Docker Hub:

    docker login -u <username>
    
  2. 使用下列命令,為 使用者入門 映射提供新的名稱。

    docker tag getting-started <username>/getting-started
    
  3. 使用下列命令來推送您的容器。

    docker push <username>/getting-started
    

在新實例上執行映射

既然您的映射已建置並推送至登錄,請嘗試在從未看到此容器映射的新實例上執行應用程式。 若要執行您的應用程式,請使用 Play with Docker。

  1. 開啟瀏覽器以 使用 Docker 播放

  2. 使用您的Docker Hub帳戶登入。

  3. 選取 [開始 ],然後選取左側列中的 [+ 新增實例 ] 連結。 幾秒鐘後,終端機視窗就會在您的瀏覽器中開啟。

    此螢幕擷取畫面顯示具有新增實例連結的 Play with Docker 網站。

  4. 在終端機中,啟動您的應用程式。

    docker run -dp 3000:3000 <username>/getting-started
    

    使用 Docker 來提取您的映射並加以啟動。

  5. 選取[開啟埠] 旁的3000徽章。 您應該會看到具有修改的應用程式。

    如果 3000 徽章未顯示,請選取 [開啟埠 ],然後輸入 3000。

清除資源

保留您到目前為止所做的一切,以繼續進行這一系列的教學課程。

下一步

您已完成本教學課程。 您已瞭解如何建立容器映射、執行容器化應用程式、更新程式碼,以及在新的實例上執行映射。

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

接下來,請嘗試本系列中的下一個教學課程: