共用方式為

快速入門：使用 Azure 開發人員 CLI 範本，從 GitHub Codespaces 建立 Python Web 應用程式並將其部署至 Azure

本快速入門會引導您以最簡單且最快的方式，建立 Python Web 和資料庫解決方案並將其部署至 Azure。 依照本快速入門中的指示，您將：

  • 根據您要建置的 Python Web 架構、Azure 資料庫平臺和 Azure Web 裝載平臺，選擇 Azure 開發人員 CLI （azd） 範本。
  • 建立新的 GitHub Codespace，其中包含從您選取的 azd 範本產生的程式代碼。
  • 使用 GitHub Codespaces 和在線 Visual Studio Code 的 bash 終端機。 終端機可讓您使用 Azure 開發人員 CLI 命令來執行 azd 範本來建立範例 Web 應用程式和資料庫，以及建立及設定必要的 Azure 資源，然後將範例 Web 應用程式部署至 Azure。
  • 在 GitHub Codespace 中編輯 Web 應用程式，並使用 azd 命令重新部署。
  • 使用azd命令來清理 Azure 資源。
  • 關閉並重新開啟您的 GitHub Codespace。
  • 將您的新程式代碼發佈至 GitHub 存放庫。

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

若要深入瞭解這些 azd 範本以進行 Python Web 應用程式開發：

先決條件

這很重要

GitHub Codespaces 和 Azure 都是付費訂用帳戶型服務。 在一些免費撥款之後，您可能需支付使用這些服務的費用。 遵循本快速入門可能會影響這些分配或帳單。 如果可能，azd 範本會使用最便宜的選項層建置，但有些可能需要付費。 使用 Azure 定價計算機 來進一步瞭解成本。 如需詳細資訊，請參閱 GitHub Codespaces 定價 以取得詳細數據。

選擇範本並建立 Codespace

azd根據您想要建置的 Python Web 架構、Azure Web 裝載平臺和 Azure 資料庫平台，選擇範本。

  1. 從下列範本清單中，選擇一個使用您要在新 Web 應用程式中使用的技術。

    範本 網頁框架 資料庫 主機平台 新的 Codespace
    azure-django-postgres-flexible-aca Django PostgreSQL 彈性伺服器 Azure 容器應用程式 新的 Codespace
    azure-django-postgres-彈性應用服務 Django PostgreSQL 彈性伺服器 Azure App Service 新的 Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB （PostgreSQL 配接器） Azure 容器應用程式 新的 Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB （PostgreSQL 配接器） Azure App Service 新的 Codespace
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL 附加元件 Azure 容器應用程式 新的 Codespace

  1. 為了方便起見，每個數據表的最後一個數據行都包含一個連結，可建立新的 Codespace，並在 GitHub 帳戶中初始化 azd 範本。 以滑鼠右鍵按兩下並選取 [在新的索引標籤中開啟] 的 [新增 Codespace] 連結旁的範本名稱，以起始安裝程式。

    在此程式中，系統可能會提示您登入 GitHub 帳戶，並要求您確認要建立 Codespace。 選取 [建立 Codespace] 按鈕以查看 [設定您的代碼空間] 頁面。

  2. 幾分鐘後，Visual Studio Code 會以網頁版的形式在新的瀏覽器分頁中開啟，並在總管檢視中將 Python 網頁範本載入為工作區。

向 Azure 驗證並部署 azd 範本

既然您有包含新產生程式代碼的 GitHub Codespace，您可以使用 azd Codespace 內的 公用程式，將程式代碼發佈至 Azure。

  1. 在 Web 型 Visual Studio Code 中，終端機預設應開啟。 如果不是，請使用波浪號 ~ 鍵來開啟終端機。 此外，根據預設，終端機應該是bash終端機。 如果不是，請變更為終端機視窗右上方區域的bash。

  2. 在bash終端機中，輸入下列命令：

    azd auth login

    azd auth login 開始驗證您的 Codespace 到 Azure 帳戶的過程。

    Start by copying the next code: XXXXXXXXX
Then press enter and continue to log in from your browser...

Waiting for you to complete authentication in the browser...

  3. 請遵循指示，包括：

    • 複製產生的程序代碼
    • 選取 Enter 以開啟新的瀏覽器索引標籤，並將程式代碼貼到文字框中
    • 從清單中選擇您的 Azure 帳戶
    • 確認您正在嘗試登入 Microsoft Azure CLI

  4. 成功時，終端機的 [Codespaces] 索引標籤中會顯示下列訊息：

    Device code authentication completed.
Logged in to Azure.

  5. 輸入下列命令，將您的新應用程式部署至 Azure：

    azd up

    在此過程中，系統會要求您：

    • 輸入新的環境名稱
    • 選取 Azure 訂用帳戶以使用 [使用箭號移動，輸入以篩選]
    • 選取要使用的 Azure 位置：[使用箭號移動，輸入以篩選]

    回答這些問題之後，來自 azd 的輸出會指出部署正在進行中。

    這很重要

    成功完成之後 azd up ，範例 Web 應用程式將會在公用因特網上取得，而您的 Azure 訂用帳戶將會開始收取所有已建立資源的費用。 範本的 azd 建立者刻意選擇廉價層，但不一定 是免費 層，因為免費層通常限制可用性。 一旦您完成範例 Web 應用程式的使用，請使用 azd down 來移除 所 azd up建立的所有服務。

    當系統提示您選擇要用於付款的 Azure 訂用帳戶時，請遵循指示，然後選取要使用的 Azure 位置。 選擇地理位置接近您的區域。

    執行 azd up 可能需要幾分鐘的時間，因為它正在布建和部署多個 Azure 服務。 顯示進度時，請留意錯誤。 如果您看到錯誤，請參閱本檔底部的 疑難解答 一節。

  6. 順利完成時 azd up ，會顯示類似的輸出：

    (✓) Done: Deploying service web
- Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/

SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
You can view the resources created under the resource group xxxxx-rg in Azure Portal:
https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview

    如果您看到默認畫面或錯誤畫面，應用程式可能會啟動。 請等候 5-10 分鐘，以查看問題是否在疑難解答之前自行解決。

    Ctrl + 按下字 - Endpoint: 組後面的第一個URL，以查看在 Azure 中執行的範例 Web 應用程式專案。

  7. Ctrl + 按兩下上一步驟中的第二個網址，以在 Azure 入口網站中檢視布建的資源。

編輯和重新部署

下一個步驟是對 Web 應用程式進行小變更，然後重新部署。

  1. 返回包含 Visual Studio Code 的瀏覽器索引標籤，並使用 Visual Studio Code 的 [總管] 檢視流覽至 src/templates 資料夾，然後開啟 index.html 檔案。 找出下列程式碼行：

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

    變更 H1 內的文字：

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

    您的程式代碼會在您輸入時儲存。

  2. 若要使用您的變更重新部署應用程式，請在終端機中執行下列命令：

    azd deploy

  3. 命令完成之後，請使用 ReleCloud 網站重新整理瀏覽器索引標籤，以查看更新。 視所使用的 Web 主控平臺而定，可能需要幾分鐘的時間才能看到您的變更。

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

清理資源

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

azd down

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

選擇性：尋找您的程式代碼空間

本節示範如何在 Codespace 中暫時執行及短期保存您的代碼。 如果您打算繼續處理程式碼，您應該將程式代碼發佈至新的存放庫。

  1. 關閉與此快速入門文章相關的所有索引標籤，或完全關閉網頁瀏覽器。

  2. 開啟網頁瀏覽器和新的索引標籤，然後瀏覽至： https://github.com/codespaces

  3. 在底部附近，您會看到最近的 Codespaces 清單。 在標題為「由 Azure-Samples 擁有」的一節中，尋找您所建立的項目。

  4. 選取此 Codespace 的右側省略號，以檢視內容功能表。 您可以從這裡重新命名codespace、發佈至新的存放庫、變更機器類型、停止codespace等等。

選擇性：從 Codespaces 發佈 GitHub 存放庫

此時，您擁有一個 Codespace，這是一個由 GitHub 托管的容器，運行的是您的 Visual Studio Code 開發環境，並包含從 azd 範本產生的新程式代碼。 不過，程式代碼不會儲存在 GitHub 存放庫中。 如果您打算繼續處理程式碼，您應該將此作為優先事項。

  1. 從程式代碼空間的作功能表中，選取 [發佈至新的存放庫]。
  2. 在 [發佈至新的存放庫] 對話框中，重新命名您的新存放庫，然後選擇您想要成為公用或私人存放庫。 選取 [建立存放庫]。
  3. 幾分鐘后，將會建立存放庫，而您稍早在本快速入門中產生的程式代碼將會推送至新的存放庫。 選取 [查看存放庫] 按鈕以瀏覽至新的存放庫。
  4. 若要重新開啟並繼續編輯程序代碼，請選取綠色的 [<> 程序代碼] 下拉式清單，切換至 [Codespaces] 索引卷標，然後選取您先前處理之 Codespace 的名稱。 您現在應該會回到 Codespace Visual Studio Code 開發環境。
  5. 使用 [原始檔控制] 窗格來建立新的分支、暫存並提交新的變更至您的程式碼。

故障排除

如果您在 azd up 時看到錯誤，請嘗試以下操作：

  • 執行 azd down 以移除可能已建立的任何資源。 或者，您也可以刪除在 Azure 入口網站中建立的資源群組。
  • 前往您的 GitHub 帳戶的 Codespaces 頁面，找到在此快速入門過程中建立的 Codespace，選取右側的省略號，然後從上下文功能表中選擇「刪除」。
  • 在 Azure 入口網站中，搜尋 Key Vault。 選取 [ 管理已刪除的保存庫]、選擇您的訂用帳戶、選取所有包含 azdtest 名稱的密鑰保存庫，或您命名環境的任何專案，然後選取 [ 清除]。
  • 請再次重試本快速入門中的步驟。 出現提示時，請為您的環境選擇更簡單的名稱。 請嘗試使用簡短的名稱、小寫字母、不含數字、不含大寫字母、不含特殊字元。
  • 重試快速入門步驟時，請選擇不同的位置。

如需可能問題和解決方案的更完整清單，請參閱 常見問題 。

相關內容

  • Last updated on