練習 - 建立部署位置

12 分鐘

部署位置是 Web 應用程式執行個體，可供您在部署 Web 應用程式之前，先在其中測試新版應用程式。藉由交換位置，您可以在不停機的情況下部署新版應用程式。

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

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

重要

您必須有自己的 Azure 訂用帳戶才能執行本練習，且可能會產生費用。如果您還沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。

建立 Web 應用程式

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

登入 Azure 入口網站。
在資源功能表或 [首頁] 上，選取 [建立資源]。 [建立資源] 窗格隨即會顯示。
在資源功能表中，選取 [Web]，然後從結果中選取 [Web 應用程式]。 [建立 Web 應用程式] 窗格會隨即出現。

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

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

選取 [下一步: 部署]。
選取 [下一步: 網路]。
選取 [下一步: 監視]，並為設定輸入下列值。

設定值

Application Insights

啟用 Application Insights 切換為 [否]
選取 [檢閱 + 建立]，然後選取 [建立]。等待部署成功。
完成部署後，選取 [前往資源]。 Web 應用程式的 [App Service] 窗格會隨即出現。

設定	值
Application Insights
啟用 Application Insights	切換為 [否]

設定 Git 部署

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

在 [App Service] 功能表的 [部署] 底下，選取 [部署中心]。 App Service 的 [部署中心] 窗格隨即會顯示。
在 [設定] 索引標籤上，為 [來源] 選取 [本機 Git]，然後選取命令列上的 [儲存]，設定您的部署。
選取 [本機 Git/FTPS 認證] 索引標籤。在 [使用者範圍] 下，輸入您選擇的唯一使用者名稱和密碼，然後在命令列中選取 [儲存]。記下使用者名稱和密碼以供稍後使用。

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

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

在頁面頂端的 Azure 全域控制項中，選取 Cloud Shell 圖示來啟動 Azure Cloud Shell 工作階段。
在 Cloud Shell 工作模式中，出現提示時，請選取 Bash 體驗，並為您的訂用帳戶建立儲存體。

注意

Cloud Shell 需要有 Azure 儲存體資源，才能保存您在 Cloud Shell 中建立的任何檔案。第一次開啟 Cloud Shell 時，系統會提示您建立資源群組、儲存體帳戶，以及 Azure 檔案儲存體共用。所有未來的 Cloud Shell 工作階段都會自動使用此設定。
在 Cloud Shell 中輸入下列命令，以您慣用的使用者名稱取代 <your-username>。此設定值未與任何 Azure 帳戶建立關聯，因此您可以任意使用任何值。
```
git config --global user.name <your-username>
```
在 Cloud Shell 中輸入下列命令，以您慣用的電子郵件地址取代 <your-email-address>。此設定值未與任何 Azure 帳戶建立關聯，因此您可以任意使用任何值。
```
git config --global user.email <your-email-address>
```
輸入下列程式碼，為原始程式碼建立並開啟 demoapp 資料夾。
```
mkdir demoapp
cd demoapp
```

輸入下列程式碼，複製 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 設定為遠端存放庫。

在 Azure 入口網站中，您的 Web 應用程式應該在使用中。在資源功能表中，選取 [概觀]。
在您 Web 應用程式的 [概觀] 窗格中，[基本資訊] 區段在 [預設網域] 會顯示一個 URL。請注意，[URL] 包含您 Web 應用程式的部署名稱。

注意

如果您沒有在前面螢幕擷取畫面中顯示的位置看到 Git Clone URL，請重新整理入口網站。
將滑鼠游標暫留在 Git Clone URL 上方，並選取 [複製到剪貼簿] 圖示。請注意，此值也會包含您的部署使用者名稱。
在 Cloud Shell 中，執行下列命令將 Git 遠端的名稱設定為 "production"。以您在上一個步驟中複製到剪貼簿的內容取代 <git-clone-url>。
```
cd app-service-web-dotnet-get-started
git remote add production <git-clone-url>
```
執行下列命令，將 Web 應用程式部署至生產位置。系統提示您輸入密碼時，請輸入您在先前工作中建立的部署密碼。
```
git push production
```
終端工作階段會識別部署過程中執行的所有程序。等待部署完成。您應該會看到 [部署成功] 通知。
在 Azure 入口網站中，[概觀] 窗格應仍作用中。將滑鼠游停留在 URL 上方。您可以按兩下來在新的瀏覽器分頁中開啟，或複製並貼到新的瀏覽器分頁中。
關閉顯示 Web 應用程式的瀏覽器分頁。

建立新的預備位置

您已為 Web 應用程式建立一個位置 (生產位置)，並將原始程式碼部署至此位置。現在來建立可預備新版 Web 應用程式的部署位置。

在 Azure 入口網站的功能表上，選取 [首頁]，然後在 [Azure 服務] 中選取 [所有資源]。使用 Type == App Service 進行篩選，然後選取 [套用]。
依 [類型] 排序結果，然後選取您所建立 App Service。 Web 應用程式的 [App Service] 窗格會隨即出現。
在 [App Service] 功能表上的 [部署] 底下，選取 [部署位置]。 App Service 服務的 [部署位置] 窗格隨即會顯示。
在命令列中選取 [+新增位置]。 [新增位置] 窗格隨即顯示。
在 [名稱] 欄位中，輸入 Staging，接受 [從下列複製設定] 的預設值，然後選取 [新增]。
成功建立部署位置之後，請選取 [關閉]。

針對預備位置設定 Git 部署

現在來設定新的位置以使用 Git 部署。

在 Azure 入口網站上，選取 [首頁]，然後從 Azure 服務中選取 [所有資源]。
依資源群組排序資源。針對資源群組 mslearn-slots，您會看到兩種 App Service 類型。部署位置會以入口網站中不同的應用程式表示。
選取預備位置。 App Service (位置) 的 [概觀] 窗格隨即會顯示。
在 [預備] 功能表上的 [部署] 底下，選取 [部署中心]。
在 [設定] 索引標籤上，為 [來源] 選取 [本機 Git]，然後選取命令列上的 [儲存] 設定預備部署。
在產生的 [部署中心] 窗格上，選取 [本機 Git/FTPS 認證] 索引標籤。
在 [使用者範圍] 下，輸入您選擇的使用者名稱和密碼，然後選取 [儲存]。 Azure 會更新使用者登入資訊。記下使用者名稱和密碼以供稍後使用。

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

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

在 [App Service] 功能表中，選取 [概觀]。如果系統提示您儲存在上一個工作中所建立使用者名稱的密碼，請選取 [儲存]。
在 [概觀] 窗格的 [基本資訊] 區段中，將滑鼠停留在 Git Clone URL 值上，然後選取 [複製到剪貼簿] 圖示。請注意，URL 包含您的預備部署使用者名稱。

注意

如果沒有看到 Git Clone URL，請重新整理入口網站。請注意，預備位置的 Git Clone URL 與生產位置 URL 有些微不同，且包含位置名稱。
在 Cloud Shell 中，確定您位於 ~/demoapp/app-service-web-dotnet-get-started 資料夾，然後執行下列命令，並以您在上一個步驟中複製的 URL 取代 <git-clone-uri>。
```
git remote add staging <git-clone-uri>
```

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

接著，讓我們對 Web 應用程式檔案進行一個小變動，然後使用 Git 將新版本部署至預備位置：

在 Cloud Shell 中，執行下列命令。
```
code .
```
在 FILES 清單中，展開 aspnet-get-started>Views>Home 資料夾，然後選取 Index.cshtml。
找到下列 HTML。
```
<h1>ASP.NET</h1>
```
將該程式碼取代為此 HTML。
```
<h1>Web App Version 2</h1>
```
按 Ctrl+S 儲存變更，然後按 Ctrl+Q 關閉編輯器。
在 Cloud Shell 中執行下列程式碼，將新版應用程式認可至 Git，並部署至預備位置。
```
git add .
git commit -m "New version of web app."
git push staging
```
出現提示時，請輸入您的部署密碼。建立和部署預備作業的通知會顯示在 Cloud Shell 工作階段中，且應該會顯示 [部署成功]。

瀏覽預備位置

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

在 Azure 入口網站上預備位置的 [概觀] 窗格中，從命令列選取 [瀏覽]，或選取 [預設網域] 中的 URL。預備 Web 應用程式第 2 版的首頁會出現在瀏覽器分頁中。

恭喜，您已建立一個預備位置，其中包含它自己的 Web 應用程式程式碼版本，而且您可以在這裡執行測試。請記住，生產位置仍具有先前版本的 Web 應用程式，因此使用者尚無法看見您的新程式碼。