練習 - 建立部署位置

  • 12 分鐘

部署位置是 Web 應用程式的實例，您可以在其中測試新的應用程式版本，再進行部署。 藉由交換位置，您可以部署新版本的應用程式，而不需要停機。

假設您決定使用 Azure App Service 部署位置來簡化新版社交媒體 Web 應用程式的部署。 您想要在 Azure 中設定 Web 應用程式，並設定一或多個部署位置。

在此練習中，您會設定 Web 應用程式、新增用於預備階段的新部署位置，以及將不同版本的 Web 應用程式部署到生產與預備位置。

這很重要

您需要自己的 Azure 訂用帳戶才能完成此練習，而且可能會產生費用。 如果您還沒有 Azure 訂用帳戶，請在開始之前建立 免費帳戶 。

建立 Web 應用程式

首先，在 Azure 入口網站中建立新的 Web 應用程式資源。

  1. 登入 Azure 入口網站。

  2. 在資源功能表中，或從 [ 首頁 ] 頁面中，選取 [建立資源]。 [建立資源] 窗格隨即出現。

  3. 在資源功能表中，選取 [Web]，然後從結果中選取 [Web 應用程式]。 [建立 Web 應用程式] 窗格會隨即出現。

  4. 在 [基本] 索引標籤上，為每個設定輸入下列值。

    設定 價值觀
    項目詳細數據
    訂閱 選取您想要用來完成練習的訂用帳戶
    資源群組 選取 [ 建立新 連結]，然後輸入 mslearn-slots，然後選取 [ 確定]。
    實例詳細數據
    名稱 輸入唯一名稱。
    發佈 Code
    執行階段堆疊 ASP.NET V4.8
    作業系統 窗戶
    區域 選取您附近的區域。
    App Service 方案
    Windows 方案 接受預設值。
    SKU 和大小 接受預設值。

  5. 選取 [下一步：資料庫]。

  6. 選取 [下一步：部署]。

  7. 選取 [下一步：網络]。

  8. 選取 [下一步：監視 + 安全]，然後針對設定輸入下列值。

    設定 價值觀
    應用程式深入解析
    啟用 Application Insights 切換至 [否]

  9. 選取 檢閱 + 建立，然後選取 建立。 等到部署成功為止。

  10. 完成部署後，選取 [前往資源]。 Web 應用程式的 [App Service ] 窗格隨即出現。

設定 Git 部署

雖然您可以使用許多不同的工具來將程式代碼部署至 Web 應用程式，但在此練習中，您會將 Web 應用程式設定為使用本機 Git 存放庫。

  1. 在 [App Service] 功能表的 [ 部署] 底下，選取 [部署中心]。 App Service 的 [部署中心 ] 窗格隨即出現。

  2. 在 [ 設定 ] 索引標籤上，針對 [來源] 選取 [ 本機 Git]，然後在命令行上選取 [ 儲存 ] 來設定您的部署。

  3. 選取 [ 本機 Git/FTPS 認證 ] 索引標籤。在 [用戶範圍] 下，輸入您選擇的唯一使用者名稱和密碼，然後在命令行中選取 [ 儲存]。 記下使用者名稱和密碼以供稍後使用。

設定 git 用戶端並複製 Web 應用程式原始程式碼

現在，您會在 Cloud Shell 中設定 Git 用戶端，並用它來複製範例 Web 應用程式。

  1. 在頁面頂端的 Azure 全域控件中，選取 Cloud Shell 圖示以啟動 Azure Cloud Shell 會話。

    全域控件中 Cloud Shell 圖示的螢幕快照。

  2. 在 Cloud Shell 工作階段中，出現提示時，選取 Bash 體驗並為您的訂用帳戶建立記憶體。

    備註

    Cloud Shell 需要有 Azure 儲存體資源，才能保存您在 Cloud Shell 中建立的任何檔案。 第一次開啟 Cloud Shell 時，系統會提示您建立資源群組、儲存體帳戶，以及 Azure 檔案儲存體共用。 所有未來的 Cloud Shell 工作階段都會自動使用此設定。

  3. 在 Cloud Shell 中輸入下列命令，將 <your-username> 取代為您慣用的用戶名稱。 此組態值未與任何 Azure 帳戶相關聯，因此您可以使用任何您想要的值。

    git config --global user.name <your-username>

  4. 在 Cloud Shell 中輸入下列命令，將 <your-email-address> 取代為您慣用的電子郵件位址。 此組態值未與任何 Azure 帳戶相關聯，因此您可以使用任何您想要的值。

    git config --global user.email <your-email-address>

  5. 輸入下列程式代碼，以建立並開啟 demoapp 原始程式碼的資料夾。

    mkdir demoapp
cd demoapp

  6. 輸入下列程式代碼以複製 Web 應用程式的來源，然後開啟您的本機複本。

    git clone https://github.com/Azure-Samples/app-service-web-dotnet-get-started.git
cd app-service-web-dotnet-get-started

設定 Git 遠端以將應用程式部署至生產環境

我們將使用 git 將原始程式碼部署至 Web 應用程式的生產位置，然後將應用程式的 Git URL 設定為遠端存放庫。

  1. 在 Azure 入口網站中，您的 Web 應用程式應為作用中。 在資源功能表中，選取 [概觀]。

  2. 在 Web 應用程式的 [概觀] 窗格中， [基本資訊 ] 區段在 [預設網域] 中具有 URL。 URL 包含 Web 應用程式的部署名稱。

    Essentials 區段的螢幕擷取畫面，您可以在其中複製 git clone URL。

    備註

    如果在上一張螢幕快照中顯示的位置看不到 git clone URL，請刷新入口網站。

  3. 將滑鼠停留在 Git 複製 URL 上，然後選取 [ 複製到剪貼簿 ] 圖示。 此值也包含您的部署用戶名稱。

  4. 在 Cloud Shell 中，執行下列命令來設定名為 production的 git 遠端。 以您在上一個步驟中複製到剪貼簿的內容取代 \<git-clone-url>。

    cd app-service-web-dotnet-get-started
git remote add production <git-clone-url>

  5. 執行下列命令，將 Web 應用程式部署至生產位置。 當系統提示您輸入密碼時，請輸入您在上一個工作中建立的部署密碼。

    git push production

    終端機工作階段會識別部署過程中進行的所有進程。 等到部署完成為止。 您應該會看到 部署成功 通知。

  6. 在 Azure 入口網站中，[ 概觀 ] 窗格仍應為使用中狀態。 將滑鼠停留在 URL 上。 您可以按兩下它，在新的瀏覽器索引標籤中開啟它，或複製並貼到新的瀏覽器索引標籤中。

    生產環境中 Web 應用程式的螢幕快照。

  7. 關閉顯示 Web 應用程式的瀏覽器索引標籤。

建立新的預備位置

針對您的 Web 應用程式，您已建立一個位置、生產位置，並將原始程式碼部署至此位置。 讓我們建立一個部署位置，您可以在其中暫存新版的 Web 應用程式。

  1. 在 Azure 入口網站功能表上，選取 [ 首頁]，然後在 Azure 服務中選取 [所有資源]。 依 類型 == App Service 進行篩選，然後選取 [ 套用]。

  2. 依 [類型] 排序結果，然後選取您建立的 App Service。 Web 應用程式的 [App Service ] 窗格隨即出現。

  3. 在 [App Service] 功能表的 [部署] 底下，選取 部署插槽。 App Service 服務的 [部署位置] 窗格隨即會顯示。

    [App Service] 功能表的螢幕擷取畫面，醒目提示 [部署位置]。

  4. 在命令列中選取 [+新增位置]。 [ 新增插槽] 窗格隨即出現。

  5. 在 [名稱] 欄位中，輸入 Staging，接受 [從下列複製設定] 的預設值，然後選取 [新增]。

  6. 成功建立部署位置之後，請選取 [關閉]。

針對預備位置設定 Git 部署

讓我們設定新的插槽，使其使用 git 部署。

  1. 在 Azure 入口網站中，選取 [ 首頁 ]，然後從 Azure 服務選取 [所有資源]。

  2. 依 資源群組排序資源。 針對資源群組 mslearn-slots，有兩種 App Service 類型。 部署位置會以入口網站中不同的應用程式表示。

  3. 選取預備位置。 App Service (位置) 的 [概觀] 窗格隨即會顯示。

  4. 在 [預備] 功能表中的 [ 部署] 底下，選取 [部署中心]。

  5. 在 [ 設定 ] 索引標籤上，針對 [來源] 選取 [ 本機 Git]，然後在命令行中選取 [ 儲存 ] 來設定預備部署。

  6. 在產生的 [部署中心 ] 窗格中，選取 [ 本機 Git/FTPS 認證 ] 索引標籤。

  7. 在 [用戶範圍] 下，輸入您選擇的使用者名稱和密碼，然後選取 [ 儲存]。 Azure 會更新用戶認證。 記下使用者名稱和密碼以供稍後使用。

設定 git 以將應用程式部署至預備位置

為了使用 Git 用戶端將原始程式碼部署至新位置，需將額外的遠端新增至 Git 設定。

  1. 在 [App Service] 功能表中，選取 [ 概觀]。 如果系統提示您儲存您在上一個工作中建立的使用者名稱密碼，請選取 [ 儲存]。

  2. 在 [ 概觀 ] 窗格的 [ 基本資訊 ] 區段中，將滑鼠停留在 Git 複製 URL 值上，然後選取 [ 複製到剪貼簿 ] 圖示。 URL 包含您的預備部署用戶名稱。

    備註

    如果沒有看到 git clone URL，請重新整理入口網站。 預備位置的 Git Clone URL 與生產位置 URL 有些微不同，且包含位置名稱。

  3. 在 Cloud Shell 中，確定您位於 ~/demoapp/app-service-web-dotnet-get-started 資料夾，然後執行下列命令，以 <您在上一個步驟中複製的 URL 取代 git-clone-uri> 。

    git remote add staging <git-clone-uri>

修改應用程式原始程式碼，並將應用程式部署至預備位置

接下來，讓我們對 Web 應用程式檔案進行小變更，然後使用 git 將新版本部署到預備位置：

  1. 在 Cloud Shell 中，執行下列命令。

    code .

  2. 在 [檔案] 清單中，展開 [aspnet-get-started>Views>首頁 ] 資料夾，然後選取 [Index.cshtml]。

  3. 找到下列 HTML。

    <h1>ASP.NET</h1>

  4. 以這個 HTML 取代該程式碼。

    <h1>Web App Version 2</h1>

  5. 按 Ctrl+S 儲存變更，然後按 Ctrl+Q 以關閉編輯器。

  6. 在 Cloud Shell 中，執行下列程式代碼，將新版本的應用程式認可至 git，並將其部署至預備位置。

    git add .
git commit -m "New version of web app."
git push staging

    出現提示時，請輸入您的部署密碼。 在 Cloud Shell 工作階段中建立和部署預備顯示的操作通知，應該會顯示 部署成功。

瀏覽預備位置

現在，您可以瀏覽至預備部署位置的 URL，以檢視新版本的 Web 應用程式。

  1. 在 Azure 入口網站的階段插槽 概觀 窗格中，從命令列選取 流覽，或選取 預設網域 中的 URL。 預備 Web 應用程式第 2 版 的首頁會出現在瀏覽器索引標籤中。

    預備位置中更新版 Web 應用程式的螢幕擷取畫面。

恭喜您，您剛剛建立了一個具有自己獨立 Web 應用程式程式代碼版本的預備環境，並且您可以在該環境中進行測試。 請記住，生產環境具有先前的 Web 應用程式版本，且使用者還看不到您的新程式碼。