部署至 Azure

  • 7 分鐘

本練習需要沙箱。 沙箱可讓您存取免費資源。 您的個人訂閱不須收費。

您僅能使用沙箱來完成 Microsoft Learn 的訓練。 該沙箱禁止用於其他任何用途，否則可能導致永久無法存取沙箱。

若要讓您的網站可供公開使用，您必須將該網站部署至 Azure。 您將使用 Visual Studio Code 中的 Azure App Service 延伸模組來簡化流程。

安裝 Azure App Service 延伸模組

先從 Visual Studio Code 中安裝 Azure App Service 延伸模組開始著手：

  1. 在 Visual Studio Code 中，選取 [延伸模組] 圖示。

    Screenshot showing the Extensions icon.

  2. 在 [搜尋延伸模組] 欄位中，輸入 [App Service] 。

  3. 在 [Azure App Service] 下方，選取 [安裝] 。

如果您已經有 Azure App Service 延伸模組，請確保已更新為最新版本。 請參閱延伸模組頁面的上次更新日期。 如果您使用最新版本，應該會看到具有 App Services 節點的 RESOURCES 節點。

部署應用程式

按照步驟複製入門存放庫時，也應已將目錄變更為 [starter] 資料夾，再開啟 VS Code。 [starter] 目錄包含 manage.py 檔案，該檔案會示意 App Service 您要部署 Django Web 應用程式。

  1. 在 Visual Studio Code 中，於工具列上選取 [Azure] 圖示。

    Screenshot showing the Azure icon.

  2. 請使用用於建立沙箱的相同帳戶，選取 [登入] 以登入 Azure。

  3. 在 Azure 延伸模組的 [資源] 列中，暫留並選取 + (加號) 圖示以建立資源。

    Screenshot showing the App Service bar. The Deploy icon is highlighted.

  4. 如果系統提示您選擇訂用帳戶，請選擇您的 Azure 訂用帳戶。

  5. 選取 [建立 Azure App Service Web 應用...] 。

    Screenshot showing how to create a new web app.

  6. 請提供應用程式的唯一名稱。

    Screenshot showing where to provide an app name.

  7. 選取 Python 3.9 作為執行階段堆疊。

    Screenshot showing the runtime stack selection.

  8. 選取定價層。

    Screenshot showing the the pricing tier selection.

    該延伸模組會建立 Web 應用程式。 此流程會花費一段時間。

  9. 建立 Web 應用程式時，系統會要求您將 Web 應用程式部署至 App Service，請選取 [部署] 。

    Screenshot showing the deployment configuration option.

    如果您錯過部署應用程式的通知，或關閉通知，您也可以尋找建立的 App Service，以滑鼠右鍵按一下，然後選取 [部署至 Web 應用程式]，加以部署。

現在將部署您的網站！

建立資料庫伺服器

現在來建立 PostgreSQL 資料庫。

  1. 在 Azure 延伸模組的 [資源] 列中，暫留並選取 + (加號) 圖示以建立資源。

    Screenshot of the Databases extension, showing the Create Server icon.

  2. 如果系統提示您選擇訂用帳戶，請選擇您的 Azure 訂用帳戶。

  3. 選取 [建立資料庫伺服器...] 。

    Screenshot showing how to create a new database server.

  4. 對於 Azure 資料庫伺服器，請選取 [PostgreSQL Flexible 伺服器] 。

    Screenshot showing a list of available database servers.

  5. 為資料庫伺服器輸入唯一名稱。

    重要

    請記下您資料庫伺服器的名稱。

  6. 選取 [Postgres SKU] 和 [選項]。

  7. 對於系統管理員使用者的名稱，請輸入 [shelter_admin]。

  8. 輸入安全的密碼，例如 "86i^z5#emSk6wu3t10nC*"。

    重要

    建立密碼時，請勿使用貨幣符號 ($)。 此符號可能導致從 Python 的連線問題。 請記下您使用的密碼。

  9. 請再次輸入密碼以確認密碼。

  10. 針對資源群組，選取在其中建立 Web 應用程式的相同資源群組。

    若要找到用來建立 Web 應用程式的資源群組名稱和位置，請在 Azure 延伸模組中找到 App Service，以滑鼠右鍵按一下名稱，然後選取 [檢視屬性]。 在 "id" 索引鍵中，資源群組名稱為 "/resourceGroups/" 之後的部分。 "location" 索引鍵會顯示位置。

    您也能以滑鼠右鍵按一下 App Service 的名稱，然後選取 [在入口網站中開啟]，找到資源組名稱和位置。

  11. 針對新資源的位置，選取與資源群組和 Web 應用程式相同的位置。

    重要

    當您建立多個會彼此通訊的 Azure 資源時，請一律將其放在相同的區域中。 此共置可以確保最佳效能。

現在將建立您的伺服器！ 此流程可能需要幾分鐘的時間。

建立資料庫防火牆規則以允許從您的開發環境存取

建立資料庫後，您必須建立防火牆規則，以允許開發人員環境存取該資料庫。 請等到資料庫建立完成，再遵循後續步驟來建立規則。

  1. 使用 F1 或按鍵組合 Ctrl + Shift + P 開啟 Visual Studio Code 命令選擇區。

  2. 搜尋並選取 [PostgreSQL：設定防火牆]。

    Screenshot showing the firewall rule field.

  3. 當系統提示您將防火牆套用至資源時，請選取您建立的 Postgres 資料庫。

  4. 最後一個對話方塊會要求繼續，並顯示對話方塊將新增的 IP 位址。 選取 [是] 。

新增該規則需要幾分鐘的時間。 監看 VS Code 通知視窗以取得狀態。

在資料庫伺服器上建立資料庫

現在您已設定 App Service 並建立伺服器，可以開始建立 Postgres 資料庫伺服器中的資料庫。

  1. 在 Azure Tools 延伸模組的 [資源] 中，展開 [PostgreSQL 伺服器 (彈性)] 節點，然後找到您建立的伺服器。

  2. 以滑鼠右鍵按一下 [資料庫伺服器名稱]，再選取 [建立資料庫] 。

    Screenshot showing the Create Database selection.

  3. 輸入 [收容所] 。

系統會建立您的資料庫。

允許從 App Service 存取資料庫伺服器

在此練習中，您也需有裝載在 Azure App Service 中的狗收容所 Web 應用程式，才能連線到適用於 PostgreSQL 彈性伺服器的 Azure 資料庫。 Azure 內的應用程式嘗試連線到您的資料庫伺服器時，防火牆會確認是否允許 Azure 連線。 在上方，您允許來自本機環境的連線。 現在，您也必須允許來自 App Service 的連線。

  1. 在 VS Code 的 Azure Tools 延伸模組 [資源] 中，展開 [PostgreSQL 伺服器 (彈性)] 節點，然後找到您建立的伺服器。

  2. 以滑鼠右鍵按一下資料庫伺服器名稱，再選取 [在入口網站中開啟]。

  3. 選取 Postgres 伺服器的 [網路] 資源。

  4. 從 [網路] 索引標籤，選取入口網站中的 [允許 Azure 內的任何 Azure 服務對此伺服器進行公用存取]，然後選取 [儲存]。

    Screenshot showing the how to allow public access to database server.

設定 Web 應用程式的應用程式設定

App Service 使用應用程式設定來設定環境變數。 [設定] 是儲存不應放在程式碼的資訊的便捷方式，例如資料庫連接字串。

  1. 在 [App Service] 下方，展開沙箱訂閱。 然後展開您的應用程式。

  2. 若要建立第一個應用程式設定，以滑鼠右鍵按一下 [應用程式設定] ，再選取 [新增設定] 。

    Screenshot showing how to add a new setting.

  3. 在第一個欄位中，輸入名稱 DBUSER。

  4. 在第二個欄位中，輸入值 [shelter_admin] 。

  5. 請重複上述步驟來建立其餘設定：

    名稱 值
    DBHOST <The server name you created previously>
    DBPASS <The password you created previously>
    DBUSER shelter_admin
    DBNAME shelters
    SECRET_KEY <Generate a secure password>

    注意

    使用您稍早在本練習中建立的值，取代 DBHOST 和 DBPASS 值。 對於 SECRET_KEY，建立新的密碼。

所有必要的環境變數現都已在您的 App Service 上建立。

建立結構描述和超級使用者

部署的最後一個步驟是設定資料庫。 在本機開發中，您會執行 python manage.py migrate 和 python manage.py createsuperuser，以建立資料庫結構描述及超級使用者。 在 Azure 上的做法也一樣。

您將使用安全殼層 (SSH) 連線至 Azure 中的 Web 伺服器。 您可以在 Visual Studio Code 中進行連線，如下所示。

  1. 在 [App Service] 延伸模組中，以滑鼠右鍵按一下該 App Service，再選取 [SSH 至 Web 應用程式] 。

    Screenshot of the menu for SSH.

    系統會在 Azure 中對您的 Web 伺服器進行 SSH 連線。 此流程可能需要幾分鐘的時間。 終端窗格會出現在 Visual Studio Code 中。 此終端是連至您 Web 伺服器的 SSH 連線。 如果您在連線時遇到問題，請參閱下方疑難排解步驟。

    重要

    若您收到錯誤訊息，指出您需為資料庫啟用 SSL，請確認您已正確建立所有環境變數。

  2. 在 SSH 終端窗格內，執行下列命令確保已安裝適當程式庫，並建立資料庫。

    # Run database migrations
python manage.py makemigrations dog_shelters
python manage.py migrate

  3. 執行下列命令來建立您的超級使用者。

    python manage.py createsuperuser

  4. 提供超級使用者的 [名稱] 、[電子郵件] 地址及 [密碼] 。

  5. 建立超級使用者後，請執行命令 exit 來關閉連線。

您的資料庫現在已在 Azure 中設定，並有網站的超級使用者。

疑難排解 SSH

如果您無法從 VS Code 連線到 SSH，下列是您可以嘗試的一些步驟：

  • 移至 App Service 的 Azure 入口網站頁面，並在該處存取 SSH。 在 VS Code 中，以滑鼠右鍵按一下 App Service 的名稱，然後選取 [在入口網站中開啟]。 在 App Service 的入口網站頁面上，移至左側資源窗格中的 [SSH] 資源。

  • 確認裝載 Web 應用程式的 App Service 已正確啟動。 如果發生部署錯誤或編碼問題，App Service 可能尚未啟動，且您無法透過 SSH 連線。 在 App Service 的入口網站頁面上，移至左側資源窗格中的 [診斷並解決問題]，以找出問題。

  • 深入了解 App Service 中的 SSH。

前往您的網站

現在您已部署並設定所有項目，您可以在 Azure 上檢視您的網站。

在 App Service 延伸模組中，以滑鼠右鍵按一下您的網站名稱，再選取 [瀏覽網站]。

Screenshot showing where to select Browse Website.

現在您的網站會出現。 預設頁面不會顯示任何收容所。 若要新增收容所：

  1. 藉由新增網站 URL 的 "/admin" 移至網站的 Django 系統管理部分。

    系統會要求您使用以上建立的超級使用者名稱和密碼進行驗證。

  2. 新增收容所並瀏覽回到主頁面，您將能夠註冊該收容中心的狗。

網站的範例螢幕擷取畫面如下：

Screenshot showing Django admin and how to add shelters.

若您嘗試移至不存在於網站上的位置，您會收到一般性找不到錯誤通知，因為 DEBUG 已停用。

您現在已部署網站至 Azure！