共用方式為


快速入門:使用 azd 範本建立並部署 Python 網頁應用程式到 Azure

這個快速入門指南將引導你了解如何最簡單且快速地建立並部署 Python 網頁與資料庫解決方案到 Azure。 按照這個快速入門指南操作時,你會:

  • 根據你想要用來建立的Python網頁框架、Azure資料庫平台以及Azure網頁主機平台,選擇一個azd模板。
  • 使用 CLI 指令執行 azd 範本,建立範例網頁應用程式與資料庫,並建立及設定必要的Azure資源。 然後,將範例網頁應用程式部署到 Azure。
  • 在本機電腦上編輯 Web 應用程式,並使用 azd 命令重新部署。
  • 使用 azd 指令來清理Azure資源。

完成本教學課程需要不到 15 分鐘的時間。 完成後,你可以開始用自訂程式碼修改新專案。

想了解更多關於這些用於Python網頁應用開發的 azd 範本,請參見:

先決條件

Azure訂閱 - 免費建立

請在您的本地電腦上安裝以下工具:

選擇範本

根據Python網頁框架、Azure網頁主機平台Azure,以及你想建立的資料庫平台,選擇一個azd模板。

  1. 從下表中的下列範本清單中選取範本名稱(第一欄)。 在下一節的步驟中使用範本名稱 azd init

    範本 網頁框架 資料庫 主機平台 GitHub 倉庫
    azure-django-postgres-flexible-aca Django PostgreSQL 彈性伺服器 Azure Container Apps repo
    azure-django-postgres-彈性應用服務 Django PostgreSQL 彈性伺服器 Azure App Service repo
    azure-django-cosmos-postgres-aca Django Cosmos DB (PostgreSQL 配接器) Azure Container Apps repo
    azure-django-cosmos-postgres-appservice Django Cosmos DB (PostgreSQL 配接器) Azure App Service repo
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL 附加元件 Azure Container Apps repo

執行範本

執行azd範本在不同語言和框架中是相同的。 所有範本都遵循相同的基本步驟。 這些步驟如下:

  1. 在終端機上,導航到您本機電腦上通常存放本地 git 儲存庫的資料夾。 建立一個名為 azdtest 的新資料夾。 然後,透過指令 cd 切換到該目錄。

    mkdir azdtest
    cd azdtest
    

    不要使用 Visual Studio Code 的終端機來進行此快速入門。

  2. 若要設定本機開發環境,請在終端機中輸入下列命令,並回答任何提示:

    azd init --template <template name>
    

    以您在上一個步驟中選取之<template name>的其中一個範本取代 ,例如 azure-django-postgres-aca

    當系統提示您輸入環境名稱時,請使用 azdtest 或任何其他名稱。 環境名稱用於命名 Azure 資源群組與資源。 為了達到最佳效果,請使用簡短的名字、小寫字母,且不使用特殊字元。

  3. 要將 azd 驗證到您的 Azure 帳號,請在終端機輸入以下指令並依照提示操作:

    azd auth login
    

    當提示「選擇帳號」或登入你的 Azure 帳號時,請依照指示操作。 一旦你成功認證,網頁上會顯示以下訊息:「認證完成。 您可以返回應用程式。 請隨意關閉此瀏覽器索引標籤。」

    當您關閉標籤時,系統會顯示一則訊息:

    Logged in to Azure.
    
  4. 在嘗試下一個步驟之前,請確定 Docker Desktop 在背景中開啟並執行。

  5. 要建立必要的 Azure 資源,請在終端機輸入以下指令並回答任何提示:

    azd up
    

    這很重要

    一旦azd up成功完成,範例網頁應用程式即可在公開網路上使用,您的Azure訂閱會開始對所有建立的資源產生費用。 範本的 azd 建立者刻意選擇廉價層,但不一定 是免費 層,因為免費層通常限制可用性。

    當提示選擇 Azure 訂閱用於付款時,依照指示操作,然後選擇 Azure 地點來使用。 選擇地理位置接近您的區域。

    執行 azd up 可能需要幾分鐘,因為它同時配置並部署多個 Azure 服務。 顯示進度時,請留意錯誤。 如果您看到錯誤,請嘗試下列專案來修正問題:

    • 從頭刪除 azd-quickstart 資料夾和快速入門指示。
    • 出現提示時,請為您的環境選擇更簡單的名稱。 只使用小寫字母和虛線。 沒有數位、大寫字母或特殊字元。
    • 選擇不同的位置。

    如果您仍有問題,請參閱本檔底部的 疑難解答 一節。

    這很重要

    完成使用範例網頁應用程式後,請使用 azd down 移除全部由 azd up 建立的服務。

  6. 成功完成時 azd up ,會顯示下列輸出:

     azd 命令列介面成功輸出的截圖,其中圓圈標示了端點網址,用以查看部署在 Azure 上運行的 Relecloud 應用程式。

    將第一個網址複製到- Endpoint:後面,貼到瀏覽器的位置列,就能看到該範例網頁應用程式專案在Azure上運行。

  7. 在你的網頁瀏覽器中開啟一個新分頁。

    1. 複製前一步的第二個網址,貼到位置列。
    2. Azure 入口網站會顯示你新資源群組中所有已部署用來承載範例網頁應用程式專案的服務。

編輯和重新部署

接著,對網頁應用程式做小改動,然後重新部署。

  1. 打開Visual Studio Code並打開 azdtest 資料夾。

  2. 此範本已設定為選擇性地使用開發容器。 當你看到開發容器通知出現在Visual Studio Code時,選擇Reopen in Container按鈕。

  3. 使用 Visual Studio Code 的檔案總管檢視,導覽到 src/templates 資料夾,並開啟 index.html 檔案。 找出下列程式碼行:

    <h1 id="pagte-title">Welcome to ReleCloud</h1>
    

    變更 H1 內的文字:

    <h1 id="pagte-title">Welcome to ReleCloud - UPDATED</h1>
    

    儲存您的變更。

  4. 要重新部署應用程式並進行你的變更,請在終端機執行以下指令:

    azd deploy
    

    由於您使用的是開發容器,且遠端連接到容器的 Shell,因此請勿使用 Visual Studio Code 的終端面板來執行 azd 指令。

  5. 指令完成後,重新整理你的網頁瀏覽器以查看更新。 根據你使用的網頁主機平台,變更可能需要幾分鐘才會顯示出來。

    您現在已準備好編輯和刪除範本中的檔案。 如需詳細資訊,請參閱 我可以在範本中編輯或刪除哪些專案?

清理資源

  1. 執行 azd down 命令,以清除範本所建立的資源。

    azd down
    

    azd down 指令會刪除Azure資源和GitHub Actions工作流程。 出現提示時,同意刪除與資源群組相關聯的所有資源。

    你也可以刪除 azdtest 資料夾,或透過修改專案檔案來作為你自己應用程式的基礎。

故障排除

如果您在 azd up 期間看到錯誤,請嘗試下列步驟:

  • 執行 azd down 以移除指令產生的任何資源。 或者,你也可以刪除你在 Azure 入口網站建立的資源群組。
  • 刪除本機電腦上的 azdtest 資料夾。
  • 在 Azure 入口網站中搜尋 Key Vaults。 選擇 「管理已刪除的保險庫」,選擇你的訂閱,選擇所有包含 azdtest 或你為環境命名名稱的金鑰保險庫,然後選擇 「清除」。
  • 重試這個快速入門的步驟。 出現提示時,請為您的環境選擇更簡單的名稱。 試試用短名字、小寫字母、不加數字、不加大寫字母,也不用特殊字元。
  • 重試快速入門步驟時,請選擇不同的位置。

欲了解更完整的可能問題與解決方案,請參閱 常見問題集。