ASP.NET nasazení webu pomocí sady Visual Studio: Nasazení aktualizace kódu

Tom Dykstra

Stáhnout úvodní projekt

V této sérii kurzů se dozvíte, jak nasadit (publikovat) webovou aplikaci ASP.NET do Aplikace Azure Service Web Apps nebo poskytovatele hostingu třetí strany pomocí sady Visual Studio 2012 nebo Visual Studio 2010. Informace o této sérii najdete v prvním kurzu série.

Přehled

Po počátečním nasazení bude vaše práce na údržbě a vývoji webu pokračovat a před dlouhou dobu budete chtít nasadit aktualizaci. Tento kurz vás provede procesem nasazení aktualizace do kódu aplikace. Aktualizace, kterou implementujete a nasazujete v tomto kurzu, nezahrnuje změnu databáze; V dalším kurzu se dozvíte, co se liší od nasazení změny databáze.

Připomenutí: Pokud se při procházení kurzu zobrazí chybová zpráva nebo něco nefunguje, nezapomeňte se podívat na stránku pro řešení potíží.

Provedení změny kódu

Jako jednoduchý příklad aktualizace aplikace přidáte na stránku Instruktory seznam kurzů, které vybraný instruktor učí.

Pokud spustíte stránku Instruktoři, všimnete si, že v mřížce jsou odkazy Vybrat, ale nedělají nic jiného, než že pozadí řádku změní na šedé.

Stránka instruktorů s výběrem

Teď přidáte kód, který se spustí po kliknutí na odkaz Vybrat a zobrazí seznam kurzů vyučovaných vybraným instruktorem .

  1. V Instructors.aspx přidejte následující kód bezprostředně za ErrorMessageLabelLabel ovládacího prvku:

    <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. Spusťte stránku a vyberte instruktora. Zobrazí se seznam kurzů vyučovaných tímto instruktorem.

    Snímek obrazovky zobrazující stránku Instruktorů s jediným zvýrazněným instruktorem a zobrazuje kurzy, které vyučuje.

  3. Zavřete prohlížeč.

Nasazení aktualizace kódu do testovacího prostředí

Než budete moct použít profily publikování k nasazení do testování, přípravy a produkce, musíte změnit možnosti publikování databáze. Už nemusíte spouštět skripty pro udělení a nasazení dat pro databázi členství.

  1. Otevřete průvodce publikováním webu tak, že kliknete pravým tlačítkem na projekt ContosoUniversity a kliknete na Publikovat.
  2. Klikněte na Test profil v rozevíracím seznamu Profil.
  3. Klikněte na kartu Settings (Nastavení).
  4. V sekci Databáze v části DefaultConnection zrušte zaškrtnutí políčka Aktualizovat databázi.
  5. Klikněte na kartu Profil a potom v rozevíracím seznamu Profil klikněte na Staging profil.
  6. Když se zobrazí dotaz, jestli chcete uložit změny provedené v testovacím profilu, klikněte na tlačítko Ano.
  7. Proveďte stejnou změnu ve staging profilu.
  8. Opakujte proces a proveďte stejnou změnu v produkčním profilu.
  9. Zavřete průvodce publikováním webu.

Nasazení do testovacího prostředí je teď jednoduchou otázkou opětovného spuštění publikování jedním kliknutím. Chcete-li tento proces urychlit, můžete použít lištu nástrojů Web One Click Publish.

  1. V nabídce Zobrazení zvolte Panely nástrojů a pak vyberte Web One Click Publish.

    Výběr nástroje pro publikování jedním kliknutím

  2. V Průzkumník řešení vyberte projekt ContosoUniversity.

  3. panel nástrojů Jedno kliknutí na publikaci webu, zvolte testovací profil publikování a potom klikněte na Publikovat web (ikona se šipkami směřujícími doleva a doprava).

    Web_One_Click_Publish_toolbar

  4. Visual Studio nasadí aktualizovanou aplikaci a prohlížeč se automaticky otevře na domovské stránce.

  5. Spusťte stránku Instruktory a vyberte instruktora, abyste ověřili, že se aktualizace úspěšně nasadila.

Normálně byste také udělali regresní testování (tedy otestujte zbytek webu a ujistěte se, že nová změna neporušila žádné existující funkce). V tomto kurzu ale tento krok přeskočíte a přejdete k nasazení aktualizace do přípravného a produkčního prostředí.

Při opětovném nasazení služba Web Deploy automaticky určí, které soubory se změnily, a zkopíruje pouze změněné soubory na server. Web Deploy ve výchozím nastavení používá data poslední změny u souborů k určení, které se změnily. Některé systémy správy zdrojového kódu mění data souborů, i když obsah souboru nezměníte. V takovém případě byste mohli chtít nakonfigurovat Web Deploy tak, aby používalo kontrolní součty souborů k určení změněných souborů. Další informace najdete v tématu Proč se všechny moje soubory znovu nasazují, i když jsem je nezměnil? v nejčastějších dotazech k nasazení ASP.NET.

Převést aplikaci do offline režimu během nasazování

Změna, kterou teď nasazujete, je jednoduchá změna stránky. Někdy ale nasadíte větší změny nebo nasadíte změny kódu i databáze a web se může chovat nesprávně, pokud uživatel požádá o stránku před dokončením nasazení. Pokud chcete uživatelům zabránit v přístupu k webu během nasazování, můžete použít soubor app_offline.htm . Když vložíte soubor s názvem app_offline.htm do kořenové složky aplikace, služba IIS automaticky zobrazí tento soubor místo spuštění aplikace. Abyste zabránili přístupu během nasazení, umístíte app_offline.htm do kořenové složky, spustíte proces nasazení a potom odeberete app_offline.htm po úspěšném nasazení.

Nasazení webu můžete nakonfigurovat tak, aby při spuštění nasazení automaticky umístilo výchozí soubor app_offline.htm na server a po jeho dokončení ho odebere. To vše, co musíte udělat, je přidat do souboru publish profile (.pubxml) následující element XML:

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

V tomto kurzu se dozvíte, jak vytvořit a použít vlastní soubor app_offline.htm .

Použití app_offline.htm v přípravném webu se nevyžaduje, protože nemáte uživatele, kteří přistupují k přípravnému webu. Je ale vhodné použít přípravu k otestování všeho, jak plánujete nasazení v produkčním prostředí.

Vytvořte app_offline.htm

  1. V Průzkumník řešení klepněte pravým tlačítkem myši na řešení a klepněte na tlačítko Přidat a potom klepněte na tlačítko Nová položka.

  2. Vytvořte stránku HTML s názvem app_offline.htm (ve výchozím nastavení odstraňte poslední "l" v rozšíření .html, které Visual Studio vytvoří).

  3. Nahraďte značku šablony následujícím kódem:

    <!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. Soubor uložte a zavřete.

Zkopírujte app_offline.htm do kořenové složky webu.

Ke kopírování souborů na web můžete použít libovolný nástroj FTP. FileZilla je oblíbený nástroj FTP a zobrazuje se na snímku obrazovky.

Pokud chcete použít nástroj FTP, potřebujete tři věci: adresu URL FTP, uživatelské jméno a heslo.

Adresa URL se zobrazí na stránce řídicího panelu webu na portálu pro správu Azure a uživatelské jméno a heslo pro FTP najdete v souboru .publishsettings , který jste si stáhli dříve. Následující kroky ukazují, jak tyto hodnoty získat.

  1. Na portálu pro správu Azure klikněte na kartu Weby a potom klikněte na přípravnou webovou lokalitu.

  2. Na stránce Řídicí panel přejděte dolů a v části Rychlý přehled vyhledejte název hostitele FTP.

    Název hostitele FTP

  3. Otevřete přípravný soubor .publishsettings v Poznámkovém bloku nebo jiném textovém editoru.

  4. Najděte prvek publishProfile pro profil FTP.

  5. Zkopírujte hodnoty userName a userPWD.

    Přihlašovací údaje FTP

  6. Otevřete nástroj FTP a přihlaste se k adrese URL FTP.

  7. Zkopírujte app_offline.htm ze složky řešení do složky /site/wwwroot v přípravném webu.

    Kopírovat app_offline

  8. Přejděte na adresu URL testovacího webu. Uvidíte, že místo domovské stránky se teď zobrazuje stránka app_offline.htm .

    app_offline.htm v okně prohlížeče

Teď jste připraveni k nasazení do přípravného prostředí.

Nasazení aktualizace kódu do přípravného a produkčního prostředí

  1. Na panelu nástrojů Web One Click Publish zvolte profil publikování Vývoj a poté klikněte na Publikovat web.

    Visual Studio nasadí aktualizovanou aplikaci a otevře prohlížeč na domovskou stránku webu. Zobrazí se soubor app_offline.htm . Než budete moct otestovat úspěšné nasazení, musíte odebrat app_offline.htm soubor.

  2. Vraťte se do nástroje FTP a odstraňte app_offline.htm z přípravného webu.

  3. V prohlížeči otevřete stránku Instruktory na přípravném webu a vyberte instruktora, abyste ověřili, že se aktualizace úspěšně nasadila.

  4. Postupujte podle stejného postupu pro produkční prostředí, jako jste to udělali při přípravě.

Kontrola změn a nasazení konkrétních souborů

Visual Studio 2012 také umožňuje nasadit jednotlivé soubory. U vybraného souboru můžete zobrazit rozdíly mezi místní verzí a nasazenou verzí, nasadit soubor do cílového prostředí nebo zkopírovat soubor z cílového prostředí do místního projektu. V této části kurzu se dozvíte, jak tyto funkce používat.

Provedení změny nasazení

  1. Otevřete Obsah/Site.css a vyhledejte blok značky body .

  2. Změňte hodnotu z background-color#fff na 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;
    }
    

Zobrazení změny v okně Publikovat náhled

Když k publikování projektu použijete průvodce publikováním webu , můžete zjistit, jaké změny budou publikovány poklikáním na soubor v okně Náhled .

  1. Klikněte pravým tlačítkem myši na projekt ContosoUniversity a klikněte na Publikovat.

  2. V rozevíracím seznamu Profil vyberte profil publikování testu .

  3. Klikněte na Náhled a potom na Spustit náhled.

  4. V podokně Náhled poklikejte na Site.css.

    Poklikejte na Site.css

    V dialogovém okně Náhled změn se zobrazí náhled změn, které se nasadí.

    Náhled změn v Site.css

    Pokud dvakrát kliknete na soubor Web.config , dialogové okno Náhled změn zobrazí účinek transformací konfigurace sestavení a publikování transformací profilu. V tuto chvíli jste neudělali nic, co by způsobilo změnu souboru Web.config na serveru, takže očekáváte, že neuvidíte žádné změny. Okno Náhled změn ale nesprávně zobrazuje dvě změny. Vypadá to, že se odeberou dva elementy XML. Tyto prvky se přidají procesem publikování, když vyberete Spustit migrace Code First při spuštění aplikace pro kontextovou třídu Code First. Porovnání se provádí předtím, než proces publikování přidá tyto prvky, takže se zdá, že jsou odstraněny, ačkoli ve skutečnosti nebudou. Tato chyba bude opravena v budoucí verzi.

  5. Klepněte na tlačítko Zavřít.

  6. Klikněte na Publikovat.

  7. Když se prohlížeč otevře na domovské stránce Testovacího webu, stiskněte kombinaci kláves CTRL+F5, aby se projevila změna CSS.

    Vliv změny šablon stylů CSS

  8. Zavřete prohlížeč.

Publikování konkrétních souborů z Průzkumník řešení

Předpokládejme, že se vám nelíbí modré pozadí a chcete se vrátit k původní barvě. V této části obnovíte původní nastavení publikováním konkrétního souboru přímo z Průzkumník řešení.

  1. Otevřete Obsah/Site.css a obnovte background-color nastavení na #fff.

  2. V Průzkumník řešení klikněte pravým tlačítkem myši na soubor Content/Site.css.

    V místní nabídce jsou uvedeny tři možnosti publikování.

    Možnosti publikování z Průzkumníka řešení

  3. Kliknutím na zobrazit náhled změn Site.css.

    Otevře se okno, ve které se zobrazí rozdíly mezi místním souborem a verzí v cílovém prostředí.

    Diff-Content/Site.css

  4. V Průzkumník řešení znovu klikněte pravým tlačítkem na Site.css a klikněte na publikovat Site.css.

    Okno Aktivity publikování webu ukazuje, že soubor byl publikován.

    Okno Aktivity publikování webu

  5. Otevřete prohlížeč a přejděte na adresu http://localhost/contosouniversity, poté stiskněte kombinaci kláves CTRL+F5 pro tvrdý refresh, abyste viděli efekt změny souboru CSS.

    Domovská stránka s normální šablonou stylů CSS

  6. Zavřete prohlížeč.

Shrnutí

Teď jste viděli několik způsobů, jak nasadit aktualizaci aplikace, která nezahrnuje změnu databáze, a viděli jste, jak zobrazit náhled změn, abyste ověřili, že to, co se aktualizuje, je to, co očekáváte. Stránka Instruktoři nyní obsahuje sekci Vyučované kurzy.

Snímek obrazovky zobrazující stránku Instruktory a kurzy, které vyučuje konkrétní instruktor

V dalším kurzu se dozvíte, jak nasadit změnu databáze: do databáze a na stránku Instruktory přidáte pole datum narození.