實驗室 13:建立及設定 Azure Web 應用程式
Microsoft Azure 使用者介面
基於 Microsoft 雲端工具的動態性質,您可能會遇到在本訓練內容開發後變更的 Azure UI。 因此,實驗指示可能無法正確對應實驗步驟。
當社群提醒 Microsoft 需要做修改時,我們會更新此訓練課程。 然而,雲端更新經常發生,所以您可能會在此訓練內容更新前遇到 UI 的變更。 如果發生這種情況,請適應變更,然後視需要在實驗中調整。
指示
在您開始使用 Intune 之前
登入實驗室環境
使用下列認證登入您的 Windows 11 虛擬機器 (VM):
- 使用者名稱:
Admin
- 密碼:
Pa55w.rd
注意:您的講師會提供連線至虛擬實驗室環境的指示。
檢閱已安裝的應用程式
尋找 Windows 11 桌面上的工作列。 工作列包含此次實驗中會用到的應用程式圖示:
- Microsoft Edge
實驗情境
在此實驗室中,您將部署及設定與 GitHub 整合的 Azure Web 應用程式。 Web 應用程式將是單頁 Web 應用程式的簡單實作,只能供內部員工存取。 該網站將裝載與公司策略和部門銷售目標相關的內容。
若要建立 Web 應用程式,您將使用 Azure 入口網站,並將其連線至 GitHub 存放庫。 若要這樣做,您將需要免費的 GitHub 帳戶,您可以在其中上傳在此實驗室中提供的範例網站內容。 Web 應用程式啟動並執行之後,您將會變更內容,並看到 GitHub 內容會使用 CI/CD 方法同步至 Web 應用程式。
因為這是僅限員工使用的 Web 應用程式,因此您必須在 Azure AD 中建立使用者,並透過使用者驗證來實作 Web 應用程式的安全性,以保護 Web 應用程式的存取權。
架構圖
練習 1:建立 Azure App Service Web 應用程式
工作 1:建立 GitHub 帳戶,並將範例 Web 應用程式程式碼上傳至存放庫
-
在工作列上,選取 Microsoft Edge 圖示。
-
在瀏覽器視窗中,瀏覽至位於
https://github.com/
的 GitHub 網站,如果您還沒有帳戶,請建立新的帳戶。 -
登入之後,請按一下主頁面上的 [新增]** 按鈕來建立新的存放庫。
-
為您的存放庫提供名稱和描述,然後選擇其應該屬於公用或私人。
-
在 [新增讀我檔案]** 區段中,選取 [新增讀我檔案]**。
-
選取 [建立存放庫]** 以建立存放庫。
-
在 GitHub 上的存放庫頁面上,選取 [新增檔案]**,從下拉式清單中選取 [上傳檔案]**。
-
開啟 [檔案總管]** 視窗,瀏覽至 **Allfiles (F):\Allfiles\Labs\13\Starter\webapp-sam-lab13,選取所有檔案並使用拖放功能,將所有檔案新增至 GitHub 存放庫。
-
新增描述您所做變更的認可訊息 (例如:「範例 Web 應用程式程式碼的初始認可」)。
-
選取 [認可變更]**,將範例 Web 應用程式程式碼上傳至存放庫。
工作 2:在 Azure 入口網站中建立 Web 應用程式,並將其連線至 GitHub 帳戶
-
在工作列上,選取 Microsoft Edge 圖示。
-
在瀏覽器視窗中,瀏覽至 Azure 入口網站 (
https://portal.azure.com
),然後登入您在此實驗要用的帳戶。 -
在 Azure 入口網站的瀏覽窗格中,選取左側功能表中的 [建立資源]** 按鈕。
-
在搜尋列中,輸入 Web 應用程式,然後從選項清單中選取 [Web 應用程式]**。
-
在 [Web 應用程式]** 刀鋒視窗中,選取 [建立]**。
-
在 [建立 Web 應用程式]** 刀鋒視窗上選取 [基本]** 索引標籤,然後執行下列動作。
設定 動作 [訂閱] 下拉式清單 保留預設值 資源群組 選取 [新建]**,輸入 **wProject-Sam-RG,然後選取 [確定]** 名稱 輸入 webapp-sam[yourname] 發行 選取 [程式碼] 執行階段堆疊 選取 .NET 8 (LTS) 作業系統 選取 [Windows] 區域 選取 [美國東部] 區域 Windows 方案 (美國東部) 選取 [新建]**,然後在 [名稱]** 欄位中輸入 ManagedPlan,然後選取 [確定]** 定價方案 選取 [標準 S1]。 -
選取 [監視]** 索引標籤,然後在 [啟用 Application Insights]** 區段中選取 [是]**。 然後,選取 [檢閱 + 建立]**。
-
檢閱您在先前步驟中選取的選項,然後選取 [建立]**。
注意:等候 Web 應用程式建立完成,再繼續使用此實驗室。
-
在 [概觀]** 刀鋒視窗上,選取 [前往資源]** 按鈕,即可瀏覽至新建的 Web 應用程式。
工作 3:從 GitHub 部署 Web 應用程式
-
開啟 Azure 入口網站,並瀏覽至您在上一個工作中建立的 Web 應用程式。
-
在 [設定]** 區段中,從左側功能表中選取 [組態]**。
-
在 [組態]** 刀鋒視窗上,選取 [一般設定]**。
-
在 [一般設定]** 索引標籤中的 [基本驗證發行認證]** 上選取 [開啟]**,選取 [儲存],然後選取 [繼續]**。
注意:請等候一分鐘以儲存組態。
-
在 [部署]** 區段中,從左側功能表中選取 [部署中心]**。
-
在 [設定]** 索引標籤中選取 [來源],從下拉式清單中選取 [GitHub]**。
-
向下捲動至 [GitHub]** 區段,然後選取 [授權]** 按鈕,以允許 Azure 存取您的 GitHub 帳戶。
-
成功對 GitHub 授與存取權之後,請執行下列動作:,然後選取 [儲存]**:
設定 動作 [組織]** 下拉式清單 選取您的 GitHub 組織 [存放庫]** 下拉式清單 選取您在工作 1 中建立的存放庫 [分支] 下拉式清單** 選取您在工作 1 中建立的分支 注意:請等候一分鐘以儲存組態。
-
開啟您在上一個工作中建立的 GitHub 存放庫,從頂端功能表中選取 [動作]**。
-
在 [動作]** 索引標籤的 [所有工作流程]** 底下,選取 [新增或更新 Azure App Service 建置和部署工作流程設定]**,以查看建置和部署流程。
-
成功建置和部署之後,開啟 Azure 入口網站並瀏覽至 App Service。
-
在 [App Service]** 刀鋒視窗上,選取 [概觀],然後選取 [瀏覽]**。
-
檢閱及測試 Web 應用程式的各種功能和特色,以確保其如預期般運作。
注意:讓 Web 應用程式瀏覽器視窗保持開啟,稍後您會需要用到。
工作 4:變更 GitHub 中的程式碼,並確認變更反映在 Web 應用程式中
-
開啟包含 Web 應用程式程式碼的 GitHub 存放庫。
-
在 Pages 資料夾中,選取 Index.cshtml 檔案,在程式碼預覽中,選取 [鉛筆]** 圖示來編輯檔案。
-
在 Index.cshtml 檔案的程式碼編輯器索引標籤上,刪除現有檔案中的第 9 行程式碼。
<h1>My Gallery</h1>
-
新增下列程式碼:
<h1>Portfolio Gallery</h1> <P>This is a simple .NET web project.</P>
-
選取 [認可變更]**、寫入認可訊息和擴充描述,然後對 Index.cshtml 檔案選取 [認可變更]**。
注意:請等候變更反映在 Web 應用程式中。 視部署流程而定,這可能需要幾分鐘到一小時的時間。
-
開啟 Web 應用程式瀏覽器視窗,然後重新整理瀏覽器視窗以查看變更。
-
確認已看見變更。
-
測試受變更影響的功能,以確保一切如預期般運作。
-
如果變更未反映在 Web 應用程式中,請檢查部署記錄,並視需要進行疑難排解。
-
如果仍然看不到變更,請連絡您的訓練人員以取得協助。
注意:請記得一律要先測試變更,才能將變更認可至存放庫,並將其部署至 Web 應用程式。 此外,在 GitHub 中使用程式碼時,請務必遵循版本控制和共同作業的最佳做法。
檢閱
此練習的內容是如何在 Azure 入口網站中建立 Web 應用程式,並將其連線至 GitHub 存放庫。
練習 2:啟用 Web 應用程式的自動調整
工作 1:啟用自訂調整
-
開啟 Azure 入口網站並瀏覽至 App Service,選取您在上一個練習中建立的 Web 應用程式。
-
在 [Web 應用程式]** 刀鋒視窗上,從 [設定]** 區段選取 [擴增 (App Service 方案)]**。
-
在 [擴增 (App Service 方案)]** 頁面上,選取 [擴增方法]** 底下的 [以規則為基礎]**。
-
在頁面底部,警示訊息「如果啟用自動調整,則會忽略以規則為基礎的調整」** 的後方。 選取 [管理以規則為基礎的調整]** 連結。
-
分頁在 [自動調整設定]** 頁面上,輸入下列資訊,然後選取 [儲存]**:
設定 資訊 設定 選取 [自訂自動調整] 調整放模式 選取 [依計量縮放] 規則 選取 [新增規則]** 連結,在 [調整規則]** 刀鋒視窗上保留所有設定的預設值,然後選取 [新增]** [執行個體限制] 區段中的 [最小值] 文字輸入框 輸入 1 [執行個體限制] 區段中的 [最大值] 文字輸入框 輸入 4 [執行個體限制] 區段中的 [預設] 文字輸入框 輸入 2 注意:等候儲存作業完成,再繼續進行實驗。
工作 2:根據 CPU 使用量設定擴增選項來增加執行個體計數
-
在 [自動調整設定]** 頁面上,向下捲動並選取 [+ 新增規則]**。
-
在 [調整規則]** 頁面上,執行下列動作,然後選取 [新增],接著選取 [儲存]**:
設定 動作 [計量名稱]** 下拉式清單 選取 [CPU百分比]** [運算子]** 下拉式清單 選取 [大於]** [觸發調整動作的計量閾值]** 文字輸入框 輸入 60 [持續時間 (分鐘)]** 文字輸入框 輸入 「5」 [作業]** 下拉式清單 選取 [將計數增加]** [冷卻 (分鐘)]** 文字輸入框 輸入 「5」 [執行個體計數]** 文字輸入框 輸入 1 -
藉由產生達到您所設定 CPU 閾值的流量來測試規則。
-
確認自動調整群組會如預期般擴增。
注意:您可以遵循類似的步驟,根據 CPU 使用量來設定縮減選項,以減少執行個體計數
工作 3:根據 CPU 使用量設定相應縮減選項,以減少執行個體計數
-
在 [自動調整設定]** 頁面上,向下捲動並選取 [+ 新增規則]**。
-
在 [調整規則]** 頁面上,執行下列動作,選取 [新增],然後選取 [儲存]**:
設定 動作 [計量名稱]** 下拉式清單 選取 [CPU百分比]** [運算子]** 下拉式清單 選取 [小於]** [觸發調整動作的計量閾值]** 文字輸入框 輸入 40 [持續時間 (分鐘)]** 文字輸入框 輸入 「5」 [作業]** 下拉式清單 選取 [將計數減少]** [冷卻 (分鐘)]** 文字輸入框 輸入 3 [執行個體計數]** 文字輸入框 輸入 1 -
藉由產生達到您所設定 CPU 閾值的流量來測試規則。
-
確認自動調整群組會如預期般縮減。
注意:您可以遵循類似的步驟,根據其他計量來設定擴增選項,例如記憶體使用量或 HTTP 佇列長度。
工作 4:建立 Azure 負載測試
-
在 Azure 入口網站中,使用 [搜尋資源、服務及文件]** 文字輸入框,搜尋 **Azure 負載測試,然後在結果清單中選取 [Azure 負載測試]**。
-
在 [Azure 負載測試] ** 刀鋒視窗中,選取 [+ 建立]**。
-
在 [ 建立負載測試資源]** 刀鋒視窗上,執行下列動作,然後選取 [檢閱 + 建立]**:
設定 動作 [訂閱] 清單 保留預設值 [資源群組] 下拉式清單 在清單中選取 [WebProject-Sam-RG]** [名稱] 文字輸入框 輸入 loadtest-sam[yourname] [區域] 下拉式清單 選取您想要測試 Web 應用程式的 Azure 區域 -
選取 [建立]** 以建立 Azure 負載測試。
注意:等候 Azure 負載測試建立完成,再繼續使用此實驗室。
-
在 [概觀]** 刀鋒視窗上,選取 [前往資源]** 按鈕,即可瀏覽至新建的 Azure 負載測試刀鋒視窗。
工作 5:快速測試及分析 Web 應用程式的效能計量
-
在新建立的 [Azure 負載測試]** 刀鋒視窗中,選取 [測試]** 區段中的 [測試]**。
-
從下拉式清單中選取 [+ 建立]**,選取 [建立 URL 型測試]**。
-
在 [建立 URL 型測試]** 刀鋒視窗上,執行下列動作,然後選取 [執行測試]**:
設定 動作 [測試 URL]** 文字輸入框 輸入「您在此實驗室中建立的 Web 應用程式 URL」** [指定負載]** 區段 選取清單中的 [虛擬使用者]** [虛擬使用者數目]** 文字輸入框 輸入 100 [測試持續時間 (分鐘)]** 文字輸入框 輸入 3 [增加時間 (分鐘)]** 文字輸入框 輸入 0 注意:等候約 3 分鐘以完成 Azure 負載測試。
-
負載測試完成後,分析效能計量並找出任何效能瓶頸。
-
選取 [負載測試結果]**,檢閱 Web 應用程式的統計資料和用戶端計量**。
-
選取 [引擎健康情況]**,檢閱 Web 應用程式的 [負載引擎健康情況計量]**。
-
若要下載負載測試結果,請從下拉式清單中選取 [下載]**,選取 [結果]**。
在這項工作中,您已建立 Azure 負載測試 Web 應用程式,並在目標 Web 應用程式上執行負載測試。 您已進行設定、監視效能計量及分析結果來識別效能瓶頸。
檢閱
在本練習中,您已了解如何根據 CPU 使用量設定規則,以啟用 Web 應用程式的自訂調整。 您也已使用 Azure 負載測試執行負載測試,並分析效能計量,以識別並解決效能瓶頸。 此練習提供最佳化可擴縮性並確保 Web 應用程式獲得最佳效能的實作體驗。
練習 3:設定使用者驗證和授權
工作 1:設定 Web 應用程式的驗證
-
開啟 Azure 入口網站,並瀏覽至您想要設定用來驗證的 Web 應用程式。
-
在 [設定]** 區段上,從左側功能表中選取 [驗證]**。
-
在 [驗證]** 窗格中,選取 [新增識別提供者]**。
-
在 [新增識別提供者]** 頁面上,執行下列動作,然後選取 [新增]**:
設定 動作 [識別提供者]** 下拉式清單 選取 [Microsoft]** [租用戶類型]** 區段 選取 [員工]** [應用程式註冊類型]** 區段 選取 [建立新的應用程式註冊]** [名稱] 文字輸入框 輸入 Web 應用程式名稱 [支援的帳戶類型]** 區段 選取 [目前租用戶 - 單一租用戶]** [限制存取]** 區段 選取 [需要驗證]** [未經驗證的要求]** 區段 選取 [HTTP 302 找到重新導向 - 建議用於網站]** -
設定驗證提供者之後,您可以設定 Web 應用程式的特定驗證設定。 這包括允許哪些使用者或群組存取您的應用程式、應該如何驗證使用者 (例如透過登入頁面或快顯示窗),以及應該設定何種存取控制。
-
開啟 Web 應用程式瀏覽器視窗,然後重新整理瀏覽器視窗。 系統應該會提示您透過 Microsoft 驗證提供者登入,完成,後,您應該就能夠正常存取您的應用程式。
介紹完畢 透過這些步驟,您應該能夠設定 Azure Web 應用程式的驗證,並確保只有授權使用者能夠存取。
工作 2:在登入記錄中檢視活動
-
開啟 Azure 入口網站並瀏覽至 Microsoft Entra ID。
-
在 [Microsoft Entra ID]** 頁面上,從左側功能表中選取 [企業應用程式]**。
-
在 [企業應用程式 所有應用程式]** 頁面上,搜尋並選取您的 Web 應用程式。 -
在 [活動]** 區段上,從左側功能表中選取 [登入記錄]**。
-
您可以根據特定準則篩選登入記錄,例如使用者的名稱、他們存取的應用程式,或登入的日期和時間。
-
您也可以將登入記錄匯出為 CSV 檔案,以進行進一步的分析或報告。
注意:等候幾分鐘,即可查看最近的登入記錄。
介紹完畢 透過這些步驟,您應該能夠設定 Azure Web 服務的登入記錄,並確保您的應用程式安全且符合組織的原則。
檢閱
此練習的內容為設定 Web 應用程式的使用者驗證和登入記錄。
練習 4:適用於 Web 應用程式的 Application Insights
工作 1:透過 Application Insights 檢視應用程式的效能
-
開啟 Azure 入口網站並瀏覽至 App Service,選取您在上一個練習中建立的 Web 應用程式。
-
在 [Web 應用程式]** 刀鋒視窗上,從 [設定]** 區段中選取 [Application Insights]**。
-
選取 [檢視 Application Insights 資料]**。
-
您應該會看到具有數個應用程式效能計量的儀表板,包括回應時間、伺服器回應時間和頁面檢視。
-
若要檢視特定計量的詳細資訊,請將其選取以開啟對應的圖表。
-
您可以從這裏調整圖表的時間範圍和資料粒度,以檢視您感興趣的資料。
-
您也可以使用 [篩選]** 選項,根據特定準則縮小資料範圍。
-
如果您發現任何效能問題,您可以使用 [調查]** 選項向下鑽研資料,並找出問題的根本原因。
-
此外,您可以使用 [警示]** 功能來設定特定效能計量的警示,讓您在警示落在可接受的範圍之外時收到通知。
恭喜您,您現在已透過 ApplicationInsights 成功檢視應用程式的效能! 您現在可以繼續在工作 3 中設定自訂遙測。
工作 2:在 Log Analytics 中查詢 Web 效能計量
-
在 [Application Insights]** 刀鋒視窗上的 [監視]** 區段中,選取 [記錄]**。
-
這會開啟 Application Insights 資源的 Log Analytics 工作區。
-
在查詢編輯器中,輸入下列查詢以擷取 Web 效能計量:
requests
| where timestamp > ago(24h)
| summarize count() by bin(timestamp, 1h), resultCode
-
此查詢會擷取過去 24 小時內每小時的要求數目和 HTTP 狀態碼。 您可以視需要修改查詢的時間範圍和資料粒度。
-
選取 [執行]** 以執行查詢。 結果會顯示在查詢編輯器下方的表格中。
-
您也可以按下查詢編輯器中的 [圖表]** 按鈕,將查詢結果視覺化。 這會開啟圖表,其中會以更視覺化的格式顯示資料。
-
如果您想要儲存查詢以供日後使用,請選取 [儲存]** 按鈕,並提供查詢的名稱和描述。
恭喜您,您現在已成功在 Log Analytics 中查詢 Web 效能計量! 您現在可以繼續在工作 4 中建立自訂遙測。
工作 3:在 Azure Web 應用程式中檢視應用程式對應
-
在 [Application Insights]** 刀鋒視窗上,從 [調查]** 區段選取 [應用程式對應]**。
-
在 [應用程式對應]** 刀鋒視窗上,選取 [應用程式對應] 頁面中央的圓形。
-
從應用程式對應中,您可以探索應用程式的各個層面,例如不同元件之間的整體健康情況、效能和相依性。
-
您可以在對應中按一下特定元件來向下鑽研這些元件,以分析個別的相依性和效能計量。
介紹完畢 您已成功設定 Application Insights 並存取 Azure Web 應用程式的應用程式對應。
工作 4:在適用於 Web 應用程式的 Application Insights 中設定可用性功能
-
在 [Application Insights]** 刀鋒視窗上,從 [調查]** 區段選取 [可用性]**。
-
在 [可用性]** 刀鋒視窗中,選取 [新增標準測試]** 以建立新的可用性測試。
-
在 [建立標準測試]** 頁面上,執行下列動作,然後選取 [建立]**:
設定 動作 [測試名稱]** 文字輸入框 輸入 standardTest [URL] 文字輸入框 輸入 Web 應用程式 URL [測試頻率]** 下拉式清單 選取 [5 分鐘]** [測試位置]** 下拉式清單 選取 [要從中執行測試的位置]** -
可用性測試現在會根據指定的頻率執行,您可以在 Application Insights 資源的 [可用性]** 區段中監視結果。
注意:等候 5 到 10 分鐘以查看測試結果。
-
您可以從 [可用性]** 區段檢視測試結果、設定警示,以及分析 Web 應用程式的可用性和效能。
介紹完畢 您已成功在 Azure 的 Application Insights 中為 Web 應用程式設定可用性功能。
檢閱
此練習旨在從 Azure 中啟用和使用 Application Insights 服務來監視和診斷 Web 應用程式中的問題。
練習 5:啟用 Web 應用程式的快取
工作 1:建立 CDN 設定檔
-
在 Azure 入口網站的 [瀏覽] 窗格上,選取 [建立資源]。
-
在 [建立資源] 窗格的 [搜尋服務和市集] 文字輸入框中,輸入 CDN,然後選取 [輸入]。
-
在 [市集] 搜尋結果窗格上,選取 [Front Door 和 CDN 設定檔] 結果,然後選取 [建立]。
-
在 [比較供應項目] 頁面上,選取 [探索其他供應項目],選取 [Microsoft 的 Azure CDN 標準版 (傳統版)],然後選取 [繼續]。
-
在 [CDN 設定檔] 窗格的 [基本] 索引標籤上,執行下列動作,然後選取 [檢閱 + 建立]:
設定 動作 [訂閱] 下拉式清單 保留預設值 [資源群組] 下拉式清單 在清單中選取 [wProject-Sam-RG]** [名稱] 文字輸入框 輸入 contentdeliverynetwork [區域] 文字輸入框 保留預設值 (全域) [定價層] 下拉式清單 選取 [Microsoft CDN (傳統)] [建立新的 CDN 端點] 核取方塊 未選取 -
在 [檢閱 + 建立] 索引標籤上,檢閱您在先前步驟中選取的選項。
-
選取 [建立],使用您指定的設定建立 CDN 設定檔。
注意:等候 Azure 建立 CDN 設定檔完成,再繼續實驗。 應用程式建立完成時,您會收到通知。
-
在 [概觀]** 刀鋒視窗上,選取 [前往資源]** 按鈕,即可瀏覽至新建的 CDN 設定檔刀鋒視窗。
-
在 [CDN 設定檔] 窗格中,選取 [+ 端點]。
-
在 [新增端點] 快顯對話方塊中,執行下列動作,然後選取 [新增]:
設定 動作 [名稱] 文字輸入框 輸入 cdn-web-sam[yourname] [來源類型] 下拉式清單 選取 [Web 應用程式] [來源主機名稱] 下拉式清單 選取您先前在此實驗中建立的 Web 應用程式的 webapp-sam [yourname].azurewebsites.net 選項 [來源路徑] 文字輸入框 保留預設值 [來源主機標頭] 文字輸入框 保留預設值 [通訊協定] 和 [來源連接埠] 區段 保留預設值 [最佳化對象] 下拉式清單 選取 [一般 Web 傳遞]
恭喜您,您現在已成功建立 CDN 設定檔和 CDN 端點。
工作 2:在 Web 應用程式端點上啟用快取
-
在 [Front Door 和 CDN 設定檔] ** 刀鋒視窗中,選取您之前建立的 **cdn-web-sam[yourname]** 端點。
-
在 [CDN 端點] ** 刀鋒視窗上,選取 [設定]** 區段底下的 [快取規則]**。
-
在 [快取規則]** 刀鋒視窗上,執行下列動作:
設定 動作 [查詢字串快取行為]** 下拉式清單 選取 [快取所有不重複的 URL]** -
選取 [儲存]** 按鈕。
恭喜您,您現在已成功在 Web 應用程式端點上啟用快取! CDN 現在會快取指定的檔案或路徑,以改善 Web 應用程式的效能和可擴縮性。
檢閱
此練習旨在使用 Azure CDN 啟用 Web 應用程式的快取。 藉由完成工作,您將取得註冊 CDN 提供者、建立 CDN 設定檔,以及設定快取規則的實際經驗。