🚀 在 VS Code 中

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

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

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

先決條件

建立應用程式映像

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

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

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

    Build container image

    您可以在「建置映像」命令的輸出中找到映像名稱,相同的名稱也可以在 Docker 總管的「映像」窗格中找到。

    Build image output

將映像推送至容器登錄

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

  1. 開啟 Docker 總管,然後在「登錄」群組下選取「連線登錄...」圖示,並按照提示操作。選擇提供者 (Azure 或 Docker Hub) 並提供認證以連線到登錄。

    Connect to Registry

  2. 現在登錄將在「登錄」下可見。

    Registries

  3. (可選)標記映像。為了將映像上傳到登錄,需要使用登錄名稱標記映像,以便 docker push 將其上傳到正確的登錄。

    • 若要在 Azure ACR 中建立登錄,請開啟 Docker 檢視的「登錄」區段,登入 Azure (如果尚未登入),然後在您要使用的訂用帳戶上按一下滑鼠右鍵,並選擇「建立登錄」。

    • 在上一節中建置的映像將會出現在 Docker 總管的「映像」區段下。按一下滑鼠右鍵並選擇「標記...」。

      Tag image

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

  4. 映像將會出現在 Docker 總管中,在映像標籤指向的登錄下。選取此映像並選擇「推送」。如果映像尚未標記,系統會提示您選擇要推送到的登錄,並且映像將根據選擇進行標記。

    Push image

  5. 推送命令完成後。重新整理映像推送到的登錄節點,上傳的映像將會顯示出來。

    Refresh registry

將映像部署到 Azure

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

  1. 在 Docker 總管中,導覽至「登錄」下的映像,在標籤上按一下滑鼠右鍵,然後選取「部署映像到 Azure App Service...」或「部署映像到 Azure Container Apps...」。

    Deploy to Azure App Service

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

    • 新網頁應用程式名稱:名稱在 Azure 中必須是唯一的。
    • 資源群組:選取現有的資源群組或建立新的資源群組。
    • App Service 方案:選取現有的 App Service 方案或建立新的 App Service 方案。(App Service 方案定義了託管網站的實體資源;您可以使用基本或免費方案層級進行本教學課程)。
  3. 部署完成時,Visual Studio Code 會顯示包含網站 URL 的通知。

    Deployment complete notification

  4. 您也可以在 Visual Studio Code 的「輸出」面板中的「Docker」區段中看到結果。

    Deployment complete output

  5. 若要瀏覽已部署的網站,您可以使用 Ctrl+按一下 來開啟「輸出」面板中的 URL。您可能需要稍候片刻,應用程式才會在 Azure 中上線。新的 App Service 或 Container App 也會出現在 Visual Studio Code 的 Azure 檢視中,您可以在其中以滑鼠右鍵按一下網站,然後選取「瀏覽網站」。

    Web Application

後續步驟

繼續閱讀以深入瞭解:

  • Azure 擴充功能 - VS Code Marketplace 提供了數百種適用於 Azure 和雲端的擴充功能。
  • 部署到 Azure - 逐步瞭解如何將應用程式部署到 Azure。
  • 使用 MongoDB - 從 VS Code 內建立、管理和查詢 MongoDB 資料庫。