將容器化應用程式部署至 Azure

在本指南中,您將學習如何:

  • 為您的應用程式建立容器映像檔。
  • 將映像檔推送至容器登錄庫。
  • 將映像檔部署至 Azure App Service 或 Azure Container Apps。

先決條件

建立應用程式映像檔

如果您已經有映像檔,請跳過此步驟並繼續執行「將映像檔推送至容器登錄庫」步驟。

  1. 在 VS Code 中開啟應用程式資料夾。

  2. 開啟命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 並使用 Container Images: Build Image... 命令來建置映像檔。

    Build container image

    您可以在 Build Image 命令的輸出中找到映像檔名稱,同樣的資訊也可以在 Container Explorer 的 Images 窗格中找到。

    Build image output

將映像檔推送至容器登錄庫

在將映像檔部署至 App Service 或 Container App 之前,必須先將映像檔上傳至容器登錄庫。映像檔可以上傳至 Azure Container Registry (ACR)Docker Hub

  1. 開啟 Container Explorer,在 Registries 群組下選擇 Connect Registry... 圖示,並依照提示操作。選擇供應商 (Azure 或 Docker Hub) 並提供認證以連線至登錄庫。

    Connect to Registry

  2. 現在,登錄庫將會顯示在 Registries 下方。

    Registries

  3. 您可以選擇性地標記 (Tag) 映像檔。為了將映像檔上傳至登錄庫,映像檔需要使用登錄庫名稱進行標記,以便 docker push 命令能將其上傳至正確的登錄庫。

    • 若要在 Azure ACR 中建立登錄庫,請開啟 Container Explorer 的 Registries 區段,登入 Azure (若尚未登入),然後對您要使用的訂閱按一下滑鼠右鍵,並選擇 Create Registry

    • 在上一個章節中建置的映像檔將會出現在 Container Explorer 的 Images 區段中。按一下滑鼠右鍵並選擇 Tag...

      Tag image

    • 指定新名稱 <您的登錄庫或使用者名稱>/<映像檔名稱>:<標籤> 並完成標記動作。例如,名為 WebApp6 的 ACR,其新映像檔名稱為 'webapp6.azurecr.io/webapp6:latest';若是 Docker Hub,則為 'myusername/webapp6:latest'。

  4. 映像檔將會顯示在 Container Explorer 中,位於該映像檔標籤所指向的登錄庫下方。選擇此映像檔並選擇 Push。如果尚未標記映像檔,系統會提示您選擇要推送到的登錄庫,並會根據選擇為映像檔加上標籤。

    Push image

  5. 當 push 命令完成後。重新整理推送映像檔所在的登錄庫節點,上傳的映像檔即會顯示。

    Refresh registry

將映像檔部署至 Azure

在上一個章節中,映像檔已推送至遠端容器登錄庫。現在將此映像檔部署至 Azure App Service 或 Azure Container Apps。

  1. 在 Container Explorer 中,瀏覽至 Registries 下的映像檔,在標籤上按一下滑鼠右鍵,並選擇 Deploy Image To Azure App Service...Deploy Image to Azure Container Apps...

    Deploy to Azure App Service

  2. 出現提示時,請提供 App Service 或 Container App 的值。

    • New web app name (新 Web 應用程式名稱):名稱在整個 Azure 中必須是唯一的。
    • Resource group (資源群組):選擇現有的資源群組或建立新的資源群組。
    • App Service plan (App Service 方案):選擇現有的 App Service 方案或建立新的。 (App Service 方案定義了代管網站的實體資源;在本教學課程中,您可以使用基本或免費方案層)。
  3. 部署完成後,Visual Studio Code 會顯示包含網站 URL 的通知。

    Deployment complete notification

  4. 您也可以在 Visual Studio Code 的 Output 面板中的 Container Tools 區段查看結果。

    Deployment complete output

  5. 若要瀏覽已部署的網站,您可以使用 Ctrl+click 開啟 Output 面板中的 URL。您可能需要稍等片刻,讓應用程式在 Azure 中啟用。新的 App Service 或 Container App 也會出現在 Visual Studio Code 的 Azure 檢視中,您可以在該處對網站按一下滑鼠右鍵並選擇 Browse Website

    Web Application

後續步驟

繼續閱讀以深入了解:

  • Azure 擴充功能 - VS Code Marketplace 提供數百個適用於 Azure 與雲端的擴充功能。
  • 部署至 Azure - 逐步學習如何將應用程式部署至 Azure。
  • 使用 MongoDB - 在 VS Code 內建立、管理及查詢 MongoDB 資料庫。
© . This site is unofficial and not affiliated with Microsoft.