共用方式為

快速入門：使用 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 應用程式中使用的技術。

    範本 Web Framework Database 裝載平臺 新的 Codespace
    azure-django-postgres-flexible-aca Django PostgreSQL 彈性伺服器 Azure 容器應用程式 新的 Codespace
    azure-django-postgres-flexible-appservice 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 Web 範本載入為工作區。

向 Azure 驗證並部署 azd 範本

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

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

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

    azd auth login

    azd auth login 開始向 Azure 帳戶驗證 Codespace 的程式。

    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 入口網站 中，搜尋 金鑰保存庫。 選取 [管理已刪除的保存庫]、選擇您的訂用帳戶、選取所有包含 azdtest 名稱的密鑰保存庫，或您命名環境的任何專案，然後選取 [清除]。
  • 請再次重試本快速入門中的步驟。 出現提示時，請為您的環境選擇更簡單的名稱。 請嘗試簡短名稱、小寫字母、沒有數位、沒有大寫字母、沒有特殊字元。
  • 重試快速入門步驟時，請選擇不同的位置。

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

相關內容