共用方式為

使用 Visual Studio ASP.NET Web 部署：部署程式碼更新

  • 發行項

By Tom Dykstra

下載入門專案

本教學課程系列說明如何使用 Visual Studio 2012 或 Visual Studio 2010，將 (發佈) ASP.NET Web 應用程式部署至Azure App 服務 Web Apps或協力廠商裝載提供者。 如需系列的相關資訊，請參閱 系列的第一個教學課程。

概觀

在初始部署之後，您維護及開發網站的工作會繼續，而且在很長的時間之前，您會想要部署更新。 本教學課程會引導您完成將更新部署至應用程式程式碼的程式。 您在本教學課程中實作和部署的更新不包含資料庫變更;您將在下一個教學課程中看到部署資料庫變更有何不同。

提醒：如果您在完成教學課程時收到錯誤訊息或某些專案無法運作，請務必檢查 疑難排解頁面。

進行程式碼變更

作為應用程式更新的簡單範例，您將新增至 Instructors 頁面所選講師所教導的課程清單。

如果您執行 Instructors 頁面，您會發現方格中有 [ 選取 ] 連結，但它們不會執行任何其他動作，而不是讓資料列背景變成灰色。

具有選取專案的講師頁面

現在，您將新增程式碼，以在按一下 [ 選取 ] 連結時執行，並顯示所選講師所教導的課程清單。

  1. 在Instructors.aspx中，在ErrorMessageLabelLabel 控制項後面立即新增下列標記：

    <h3>Courses Taught</h3>
<asp:ObjectDataSource ID="CoursesObjectDataSource" runat="server" TypeName="ContosoUniversity.BLL.SchoolBL"
    DataObjectTypeName="ContosoUniversity.DAL.Course" SelectMethod="GetCoursesByInstructor">
    <SelectParameters>
        <asp:ControlParameter ControlID="InstructorsGridView" Name="PersonID" PropertyName="SelectedDataKey.Value"
            Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="CoursesGridView" runat="server" DataSourceID="CoursesObjectDataSource"
    AllowSorting="True" AutoGenerateColumns="False" SelectedRowStyle-BackColor="LightGray"
    DataKeyNames="CourseID">
    <EmptyDataTemplate>
        <p>No courses found.</p>
    </EmptyDataTemplate>
    <Columns>
        <asp:BoundField DataField="CourseID" HeaderText="ID" ReadOnly="True" SortExpression="CourseID" />
        <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
        <asp:TemplateField HeaderText="Department" SortExpression="DepartmentID">
            <ItemTemplate>
                <asp:Label ID="GridViewDepartmentLabel" runat="server" Text='<%# Eval("Department.Name") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

  2. 執行頁面並選取講師。 您會看到該講師所教授的課程清單。

    顯示 Instructors 頁面的螢幕擷取畫面，其中已醒目提示單一 Instructor，並顯示他們教授的課程。

  3. 關閉瀏覽器。

將程式碼更新部署至測試環境

您必須先變更資料庫發佈選項，才能使用發佈設定檔來部署以測試、預備和生產環境。 您不再需要執行成員資格資料庫的授與和資料部署腳本。

  1. 以滑鼠右鍵按一下 ContosoUniversity 專案，然後按一下 [發佈]，以開啟[發佈 Web精靈]。
  2. 按一下 [設定檔] 下拉式清單中的[測試設定檔]。
  3. 按一下 [設定] 索引標籤。
  4. 在 [資料庫]區段的 [DefaultConnection] 下，清除 [更新資料庫] 核取方塊。
  5. 按一下 [設定檔] 索引標籤，然後按一下 [設定檔] 下拉式清單中的 [預備設定檔]。
  6. 當系統詢問您是否要儲存對 測試 設定檔所做的變更時，請按一下 [ 是]。
  7. 在預備設定檔中進行相同的變更。
  8. 重複此程式，以在生產設定檔中進行相同的變更。
  9. 關閉 [發佈 Web 精靈]。

部署至測試環境現在是再次執行單鍵發行的簡單事項。 若要讓此程式更快速，您可以使用 Web One Click Publish 工具列。

  1. 在 [ 檢視 ] 功能表中，選擇 [ 工具列] ，然後選取 [ Web One Click Publish]。

    Selecting_One_Click_Publish_toolbar

  2. 在方案總管中，選取 ContosoUniversity 專案。

  3. [Web One Click Publish] 工具列，選擇[測試發佈設定檔]，然後按一下 [發佈 Web] (圖示，其中箭號指向左和右) 。

    Web_One_Click_Publish_toolbar

  4. Visual Studio 會部署更新的應用程式，而瀏覽器會自動開啟至首頁。

  5. 執行 Instructors 頁面，然後選取講師以確認更新已成功部署。

您通常會在 (進行迴歸測試，也就是測試月臺的其餘部分，以確保新的變更不會中斷任何現有的功能) 。 但在本教學課程中，您將略過該步驟，並繼續將更新部署至預備和生產環境。

當您重新部署時，Web Deploy 會自動判斷哪些檔案已變更，而且只會將變更的檔案複製到伺服器。 根據預設，Web Deploy 會在檔案上使用上次變更的日期，以判斷哪些變更日期。 即使您未變更檔案內容，某些原始檔控制系統也會變更檔案日期。 在此情況下，您可能想要將 Web Deploy 設定為使用檔案總和檢查碼來判斷哪些檔案已變更。 如需詳細資訊，請參閱 ASP.NET 部署常見問題中的為何會重新部署所有檔案。

在部署期間讓應用程式離線

您正在部署的變更現在是單一頁面的簡單變更。 但有時候您會部署較大的變更，或同時部署程式碼和資料庫變更，而且如果使用者在部署完成之前要求頁面，則網站的行為可能不正確。 若要防止使用者在部署進行時存取網站，您可以使用 app_offline.htm 檔案。 當您將名為 app_offline.htm 的檔案放在應用程式的根資料夾中時，IIS 會自動顯示該檔案，而不是執行您的應用程式。 因此，若要避免在部署期間存取，請將 app_offline.htm 放在根資料夾中、執行部署程式，然後在成功部署之後移除 app_offline.htm 。

您可以將 Web Deploy 設定為在伺服器開始部署時自動將預設 app_offline.htm 檔案放在伺服器上，並在完成時將其移除。 若要這樣做，您只需要將下列 XML 元素新增至發行設定檔 (.pubxml) 檔案：

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

在本教學課程中，您將瞭解如何建立和使用自訂 app_offline.htm 檔案。

不需要在預備網站中使用 app_offline.htm ，因為您沒有存取預備網站的使用者。 但最好使用預備來測試您在生產環境中部署的所有方式。

建立app_offline.htm

  1. 在方案總管中，以滑鼠右鍵按一下方案，然後按一下 [新增]，然後按一下 [新增專案]。

  2. 建立名為app_offline.htm的HTML 頁面， (刪除 Visual Studio) 預設建立.html延伸模組中的最終 「l」。

  3. 以下列標記取代範本標記：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Contoso University - Under Construction</title>
</head>
<body>
  <h1>Contoso University</h1>
  <h2>Under Construction</h2>
  <p>The Contoso University site is temporarily unavailable while we upgrade it. Please try again later.</p>
</body>
</html>

  4. 儲存並關閉檔案。

將app_offline.htm複製到網站的根資料夾

您可以使用任何 FTP 工具來將檔案複製到網站。 FileZilla 是熱門的 FTP 工具，並顯示在螢幕擷取畫面中。

若要使用 FTP 工具，您需要三件事：FTP URL、使用者名稱和密碼。

URL 會顯示在 Azure 管理入口網站的儀表板頁面上，您可以在您稍早下載的 .publishsettings 檔案中找到 FTP 的使用者名稱和密碼。 下列步驟示範如何取得這些值。

  1. 在 Azure 管理入口網站中，按一下 [網站] 索引標籤，然後按一下預備網站。

  2. 在 [ 儀表板] 頁面上，向下捲動以在 [ 快速流覽 ] 區段中尋找 FTP 主機名稱。

    FTP 主機名稱

  3. 在 [記事本] 或其他文字編輯器中開啟預備 .publishsettings 檔案。

  4. publishProfile尋找 FTP 設定檔的專案。

  5. userName複製 和 userPWD 值。

    FTP 認證

  6. 開啟您的 FTP 工具並登入 FTP URL。

  7. 將 app_offline.htm 從方案資料夾複製到預備 網站中的 /site/wwwroot 資料夾。

    複製app_offline

  8. 流覽至預備網站的 URL。 您會看到 app_offline.htm 頁面現在會顯示，而不是您的首頁。

    瀏覽器視窗中的app_offline.htm

您現在已準備好部署至預備環境。

將程式碼更新部署至預備和生產環境

  1. 在 [Web One Click Publish ] 工具列中，選擇 [預備 發佈設定檔]，然後按一下 [ 發佈 Web]。

    Visual Studio 會部署更新的應用程式，並將瀏覽器開啟至網站的首頁。 app_offline.htm檔案隨即顯示。 您必須先移除 app_offline.htm 檔案，才能測試以確認部署成功。

  2. 返回您的 FTP 工具，並從預備網站刪除 app_offline.htm 。

  3. 在瀏覽器中，開啟預備網站中的 Instructors 頁面，然後選取講師以確認更新已成功部署。

  4. 請遵循與預備階段相同的生產程式。

檢閱變更和部署特定檔案

Visual Studio 2012 也可讓您部署個別檔案。 針對選取的檔案，您可以檢視本機版本與已部署版本之間的差異、將檔案部署到目的地環境，或將檔案從目的地環境複製到本機專案。 在本教學課程的本節中，您將瞭解如何使用這些功能。

進行部署的變更

  1. 開啟 Content/Site.css，並尋找標籤的 body 區塊。

  2. 將 的值 background-color 從 #fff 變更為 darkblue 。

    body {
    background-color: darkblue;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

在 [發佈預覽] 視窗中檢視變更

當您使用 [發佈 Web 精靈] 發佈專案時，您可以按兩下 [預覽 ] 視窗中的檔案，以查看要發佈的變更。

  1. 以滑鼠右鍵按一下 ContosoUniversity 專案，然後按一下 [ 發佈]。

  2. 從 [ 設定檔 ] 下拉式清單中，選取 [測試 發行設定檔]。

  3. 按一下 [預覽]，然後按一下 [ 開始預覽]。

  4. 在 [ 預覽] 窗格中，按兩下 [Site.css]。

    按兩下 Site.css

    [ 預覽變更 ] 對話方塊會顯示將部署之變更的預覽。

    預覽 Site.css 的變更

    如果您按兩下 Web.config 檔案，[ 預覽變更 ] 對話方塊會顯示組建組態轉換和發佈設定檔轉換的效果。 此時，您尚未執行任何會導致伺服器上 Web.config 檔案變更的任何動作，因此您預期不會看到任何變更。 不過， [預覽變更] 視窗不正確地顯示兩項變更。 它看起來會移除兩個 XML 元素。 當您針對 Code First 內容類別別選取[在應用程式啟動時執行Code First 移轉時，發佈程式會新增這些專案。 在發佈程式新增這些元素之前，會先進行比較，所以看起來會移除這些專案，雖然不會移除這些專案。 未來版本將會更正此錯誤。

  5. 按一下 [關閉] 。

  6. 按一下 [發佈]。

  7. 當瀏覽器開啟至測試網站的首頁時，請按 CTRL+F5 造成硬式重新整理，以查看 CSS 變更的效果。

    CSS 變更的效果

  8. 關閉瀏覽器。

從 方案總管發佈特定檔案

假設您不喜歡藍色背景，而且想要還原為原始色彩。 在本節中，您會直接從方案總管發佈特定檔案來還原原始設定。

  1. 開啟 Content/Site.css 並將 background-color 設定還原至 #fff 。

  2. 在方案總管中，以滑鼠右鍵按一下Content/Site.css檔案。

    操作功能表會顯示三個發佈選項。

    從 方案總管 發佈選項

  3. 按一下 [預覽 Site.css 的變更]。

    隨即開啟一個視窗，以顯示本機檔案與目的地環境中的版本之間的差異。

    Diff-Content/Site.css

  4. 在[方案總管] 中，再次以滑鼠右鍵按一下[Site.css]，然後按一下 [發佈 Site.css]。

    [ Web 發佈活動] 視窗會顯示檔案已發佈。

    Web 發佈使用中視窗

  5. 開啟瀏覽器至 http://localhost/contosouniversity URL，然後按 CTRL+F5 以造成硬式重新整理，以查看 CSS 變更的效果。

    具有一般 CSS 的首頁

  6. 關閉瀏覽器。

總結

您現在已看到數種方式來部署未涉及資料庫變更的應用程式更新，並瞭解如何預覽變更，以確認所預期的更新內容。 Instructors 頁面現在有一個 課程教學 課程區段。

此螢幕擷取畫面顯示講師頁面，以及特定講師所教授的課程。

下一個教學課程說明如何部署資料庫變更：您會將生日欄位新增至資料庫和 Instructors 頁面。

上一個下一個