ASP.NET distribuzione Web con Visual Studio: Distribuzione di un aggiornamento del codice

di Tom Dykstra

Scaricare il progetto iniziale

Questa serie di esercitazioni illustra come distribuire (pubblicare) un'applicazione Web ASP.NET in Servizio app di Azure App Web o in un provider di hosting di terze parti usando Visual Studio 2012 o Visual Studio 2010. Per informazioni sulla serie, vedere la prima esercitazione della serie.

Panoramica

Dopo la distribuzione iniziale, il lavoro di gestione e sviluppo del sito Web continua e prima di molto si vuole distribuire un aggiornamento. Questa esercitazione illustra il processo di distribuzione di un aggiornamento nel codice dell'applicazione. L'aggiornamento implementato e distribuito in questa esercitazione non comporta una modifica del database. Nell'esercitazione successiva verranno illustrate le differenze tra la distribuzione di una modifica del database.

Promemoria: se viene visualizzato un messaggio di errore o qualcosa che non funziona durante l'esercitazione, assicurarsi di controllare la pagina di risoluzione dei problemi.

Effettuare una modifica del codice

Come semplice esempio di aggiornamento dell'applicazione, si aggiungerà alla pagina Instructors un elenco di corsi insegnato dall'insegnante selezionato.

Se si esegue la pagina Instructors , si noterà che nella griglia sono presenti collegamenti Select , ma non fanno altro che rendere grigio lo sfondo della riga.

Pagina Instructors con selezione

A questo punto si aggiungerà il codice che viene eseguito quando si fa clic sul collegamento Seleziona e viene visualizzato un elenco di corsi tenuti dall'insegnante selezionato.

  1. In Instructors.aspx aggiungere il markup seguente subito dopo il controllo 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. Eseguire la pagina e selezionare un insegnante. Viene visualizzato un elenco di corsi insegnato da tale insegnante.

    Screenshot che mostra la pagina Instructors con un singolo insegnante evidenziato e visualizzando i corsi che insegnano.

  3. Chiudere il browser.

Distribuire l'aggiornamento del codice nell'ambiente di test

Prima di poter usare i profili di pubblicazione per eseguire la distribuzione per testare, gestire la gestione temporanea e la produzione, è necessario modificare le opzioni di pubblicazione del database. Non è più necessario eseguire gli script di concessione e distribuzione dei dati per il database di appartenenza.

  1. Aprire la procedura guidata Pubblica web facendo clic con il pulsante destro del mouse sul progetto ContosoUniversity e scegliendo Pubblica.
  2. Fare clic sul profilo di test nell'elenco a discesa Profilo .
  3. Fare clic sulla scheda Impostazioni.
  4. In DefaultConnection nella sezione Database deselezionare la casella di controllo Aggiorna database .
  5. Fare clic sulla scheda Profilo e quindi sul profilo di gestione temporanea nell'elenco a discesa Profilo .
  6. Quando viene chiesto se si desidera salvare le modifiche apportate al profilo di test , fare clic su .
  7. Apportare la stessa modifica nel profilo di gestione temporanea.
  8. Ripetere il processo per apportare la stessa modifica nel profilo di produzione.
  9. Chiudere la procedura guidata Pubblica Web .

La distribuzione nell'ambiente di test è ora una semplice questione di eseguire di nuovo la pubblicazione con un clic. Per semplificare questo processo, è possibile usare la barra degli strumenti Web Con un clic su Pubblica .

  1. Scegliere Barre degli strumenti dal menu Visualizza e quindi selezionare Web Con un clic su Pubblica.

    Selecting_One_Click_Publish_toolbar

  2. In Esplora soluzioni selezionare il progetto ContosoUniversity.

  3. la barra degli strumenti Pubblica con un clic sul Web , scegliere il profilo di pubblicazione test e quindi fare clic su Pubblica Web (l'icona con frecce che puntano a sinistra e a destra).

    Web_One_Click_Publish_toolbar

  4. Visual Studio distribuisce l'applicazione aggiornata e il browser si apre automaticamente alla home page.

  5. Eseguire la pagina Instructors e selezionare un insegnante per verificare che l'aggiornamento sia stato distribuito correttamente.

In genere si eseguirebbero anche test di regressione, ovvero testare il resto del sito per assicurarsi che la nuova modifica non interrompa alcuna funzionalità esistente. Per questa esercitazione, tuttavia, si ignorerà questo passaggio e si procederà alla distribuzione dell'aggiornamento alla gestione temporanea e alla produzione.

Quando si ridistribuisce, Distribuzione Web determina automaticamente quali file sono stati modificati e vengono copiati solo i file modificati nel server. Per impostazione predefinita, Distribuzione Web usa le date dell'ultima modifica nei file per determinare quali sono state modificate. Alcuni sistemi di controllo del codice sorgente modificano le date dei file anche quando non si modifica il contenuto del file. In tal caso, è possibile configurare Distribuzione Web per l'uso dei checksum dei file per determinare quali file sono stati modificati. Per altre informazioni, vedere Perché tutti i file vengono ridistribuiti anche se non sono stati modificati? nelle domande frequenti sulla distribuzione di ASP.NET.

Portare l'applicazione offline durante la distribuzione

La modifica che si sta distribuendo è ora una semplice modifica a una singola pagina. In alcuni casi, tuttavia, si distribuiscono modifiche di dimensioni maggiori oppure si distribuiscono modifiche al codice e al database e il sito potrebbe comportarsi in modo errato se un utente richiede una pagina prima del completamento della distribuzione. Per impedire agli utenti di accedere al sito mentre è in corso la distribuzione, è possibile usare un file diapp_offline.htm . Quando si inserisce un file denominato app_offline.htm nella cartella radice dell'applicazione, IIS visualizza automaticamente tale file anziché eseguire l'applicazione. Per evitare l'accesso durante la distribuzione, inserire app_offline.htm nella cartella radice, eseguire il processo di distribuzione e quindi rimuovere app_offline.htm dopo la corretta distribuzione.

È possibile configurare Distribuzione Web per inserire automaticamente un file diapp_offline.htm predefinito nel server all'avvio della distribuzione e rimuoverlo al termine. A tale scopo, è necessario aggiungere il seguente elemento XML al file del profilo di pubblicazione (con estensione pubxml):

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Per questa esercitazione verrà illustrato come creare e usare un file diapp_offline.htm personalizzato.

L'uso diapp_offline.htm nel sito di gestione temporanea non è necessario, perché non si dispone di utenti che accedono al sito di gestione temporanea. È tuttavia consigliabile usare la gestione temporanea per testare tutto il modo in cui si prevede di eseguire la distribuzione nell'ambiente di produzione.

Creare app_offline.htm

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione e scegliere Aggiungi, quindi fare clic su Nuovo elemento.

  2. Creare una pagina HTML denominata app_offline.htm (eliminare l'ultima "l" nell'estensione .html creata da Visual Studio per impostazione predefinita).

  3. Sostituire il markup del modello con il markup seguente:

    <!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. Salvare e chiudere il file.

Copiare app_offline.htm nella cartella radice del sito Web

È possibile usare qualsiasi strumento FTP per copiare i file nel sito Web. FileZilla è uno strumento FTP diffuso e viene visualizzato nelle schermate.

Per usare uno strumento FTP, sono necessari tre elementi: l'URL FTP, il nome utente e la password.

L'URL viene visualizzato nella pagina del dashboard del sito Web nel portale di gestione di Azure e il nome utente e la password per FTP sono disponibili nel file con estensione publishsettings scaricato in precedenza. La procedura seguente illustra come ottenere questi valori.

  1. Nel portale di gestione di Azure fare clic sulla scheda Siti Web e quindi sul sito Web di gestione temporanea.

  2. Nella pagina Dashboard scorrere verso il basso per trovare il nome host FTP nella sezione Riepilogo rapido .

    Nome host FTP

  3. Aprire il file con estensione publishsettings di staging nel Blocco note o in un altro editor di testo.

  4. Trovare l'elemento publishProfile per il profilo FTP.

  5. Copiare i userName valori e userPWD .

    Credenziali FTP

  6. Aprire lo strumento FTP e accedere all'URL FTP.

  7. Copiare app_offline.htm dalla cartella della soluzione alla cartella /site/wwwroot nel sito di gestione temporanea.

    Copia app_offline

  8. Passare all'URL del sito di gestione temporanea. Si noterà che la pagina app_offline.htm è ora visualizzata invece della home page.

    app_offline.htm nella finestra del browser

A questo momento è possibile eseguire la distribuzione nell'ambiente di gestione temporanea.

Distribuire l'aggiornamento del codice nella gestione temporanea e nell'ambiente di produzione

  1. Nella barra degli strumenti Pubblica con un clic sul Web scegliere il profilo di pubblicazione di staging e quindi fare clic su Pubblica Web.

    Visual Studio distribuisce l'applicazione aggiornata e apre il browser alla home page del sito. Viene visualizzato il file app_offline.htm . Prima di poter verificare la corretta distribuzione, è necessario rimuovere il file app_offline.htm .

  2. Tornare allo strumento FTP ed eliminare app_offline.htm dal sito di gestione temporanea.

  3. Nel browser aprire la pagina Instructors nel sito di gestione temporanea e selezionare un insegnante per verificare che l'aggiornamento sia stato distribuito correttamente.

  4. Seguire la stessa procedura per la produzione eseguita per la gestione temporanea.

Revisione delle modifiche e distribuzione di file specifici

Visual Studio 2012 offre anche la possibilità di distribuire singoli file. Per un file selezionato è possibile visualizzare le differenze tra la versione locale e la versione distribuita, distribuire il file nell'ambiente di destinazione o copiare il file dall'ambiente di destinazione al progetto locale. In questa sezione dell'esercitazione viene illustrato come usare queste funzionalità.

Apportare una modifica alla distribuzione

  1. Aprire Content/Site.css e trovare il blocco per il body tag.

  2. Modificare il valore per background-color da #fff a 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;
    }
    

Visualizzare la modifica nella finestra Pubblica anteprima

Quando si usa la Pubblicazione guidata Web per pubblicare il progetto, è possibile visualizzare le modifiche che verranno pubblicate facendo doppio clic sul file nella finestra anteprima .

  1. Fare clic con il pulsante destro del mouse sul progetto ContosoUniversity e scegliere Pubblica.

  2. Nell'elenco a discesa Profilo selezionare il profilo di pubblicazione test .

  3. Fare clic su Anteprima e quindi su Avvia anteprima.

  4. Nel riquadro Anteprima fare doppio clic su Site.css.

    Fare doppio clic su Site.css

    La finestra di dialogo Anteprima modifiche mostra un'anteprima delle modifiche che verranno distribuite.

    Anteprima delle modifiche apportate a Site.css

    Se si fa doppio clic sul file Web.config , nella finestra di dialogo Anteprima modifiche viene visualizzato l'effetto delle trasformazioni di configurazione della compilazione e delle trasformazioni del profilo di pubblicazione. A questo punto non è stato eseguito alcun risultato che provocherebbe la modifica del file Web.config nel server, quindi si prevede di non visualizzare alcuna modifica. Tuttavia, la finestra Anteprima modifiche mostra erroneamente due modifiche. Sembra che vengano rimossi due elementi XML. Questi elementi vengono aggiunti dal processo di pubblicazione quando si seleziona Esegui Migrazioni Code First all'avvio dell'applicazione per una classe di contesto Code First. Il confronto viene eseguito prima dell'aggiunta di tali elementi da parte del processo di pubblicazione, quindi sembra che vengano rimossi anche se non verranno rimossi. Questo errore verrà corretto in una versione futura.

  5. Fare clic su Close.

  6. Fare clic su Pubblica.

  7. Quando il browser si apre alla home page del sito di test, premere CTRL+F5 per fare in modo che venga visualizzato l'effetto della modifica CSS.

    Effetto della modifica CSS

  8. Chiudere il browser.

Pubblicare file specifici da Esplora soluzioni

Si supponga di non gradire lo sfondo blu e di voler ripristinare il colore originale. In questa sezione verranno ripristinate le impostazioni originali pubblicando un file specifico direttamente da Esplora soluzioni.

  1. Aprire Content/Site.css e ripristinare l'impostazione background-color su #fff.

  2. In Esplora soluzioni fare clic con il pulsante destro del mouse sul file Content/Site.css.

    Il menu di scelta rapida mostra tre opzioni di pubblicazione.

    Opzioni di pubblicazione da Esplora soluzioni

  3. Fare clic su Anteprima modifiche a Site.css.

    Viene visualizzata una finestra che mostra le differenze tra il file locale e la versione di esso nell'ambiente di destinazione.

    Diff-Content/Site.css

  4. In Esplora soluzioni fare di nuovo clic con il pulsante destro del mouse su Site.css e scegliere Pubblica sito.css.

    La finestra Attività pubblicazione Web mostra che il file è stato pubblicato.

    Finestra Attività pubblicazione Web

  5. Aprire un browser per l'URL http://localhost/contosouniversity , quindi premere CTRL+F5 per fare in modo che venga visualizzato l'effetto della modifica CSS.

    Home page con CSS normale

  6. Chiudere il browser.

Riepilogo

Sono stati ora illustrati diversi modi per distribuire un aggiornamento dell'applicazione che non comporta una modifica del database e si è visto come visualizzare in anteprima le modifiche per verificare che ciò che verrà aggiornato è quello previsto. La pagina Instructors include ora una sezione Courses Taught .

Screenshot che mostra la pagina Instructors e i corsi insegnato da un insegnante specifico.

L'esercitazione successiva illustra come distribuire una modifica del database: si aggiungerà un campo di data di nascita al database e alla pagina Instructors .