Implementación web de ASP.NET mediante Visual Studio: implementación de una actualización de código

Artículo
03/20/2024

En esta serie de tutoriales, se muestra cómo implementar (publicar) una aplicación web de ASP.NET en Azure App Service Web Apps o en un proveedor de hospedaje de terceros, mediante Visual Studio 2012 o Visual Studio 2010. Para obtener información sobre la serie de tutoriales, consulte el primer tutorial de la serie.

Información general

Después de la implementación inicial, el trabajo de mantenimiento y desarrollo del sitio web continúa y no tardará en querer implementar una actualización. Con este tutorial recorrerá el proceso de implementación de una actualización en el código de la aplicación. La actualización que implementará en este tutorial no implica un cambio en la base de datos; en el siguiente tutorial verá qué tiene de diferente implementar un cambio en la base de datos.

Aviso: Si recibe un mensaje de error o algo no funciona mientras recorre el tutorial, asegúrese de comprobar la página de solución de problemas.

Cambio de código

Como ejemplo sencillo de una actualización de la aplicación, agregará a la página Instructors una lista de cursos enseñados por el instructor seleccionado.

Si ejecuta la página Instructors, observará que hay vínculos Select en la cuadrícula, pero no hacen nada que no haga que el fondo de fila cambie de color gris.

Instructors page with selection

Ahora agregará código que se ejecuta cuando se haga clic en el vínculo Select y muestre una lista de cursos impartidos por el instructor seleccionado.

En Instructors.aspx, agregue el siguiente marcado inmediatamente después del control 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>

Actualice la página y seleccione un instructor. Verá una lista de los cursos que enseña ese instructor.
Cierre el explorador.

Implementación de la actualización de código en el entorno de prueba

Antes de poder utilizar los perfiles de publicación para implementarlos en pruebas, ensayo y producción, debe cambiar las opciones de publicación de la base de datos. Ya no es necesario ejecutar los scripts de concesión e implementación de datos para la base de datos de pertenencia.

Para abrir el Asistente para publicación web, haga clic con el botón derecho en el proyecto ContosoUniversity y haga clic en Publicar.
Haga clic en el perfil de prueba en la lista desplegable Perfil.
Haga clic en la pestaña Configuración .
En DefaultConnection de la sección Bases de datos, desactive la casilla Actualizar base de datos.
Haga clic en la pestaña Perfil y, a continuación, haga clic en el perfil Ensayo en la lista desplegable Perfil.
Cuando se le pregunte si quiere guardar los cambios realizados en el perfil de prueba, haga clic en Sí.
Realice el mismo cambio en el perfil de ensayo.
Repita el proceso para realizar el mismo cambio en el perfil de producción.
Cierre el Asistente para publicación web.

La implementación en el entorno de prueba es ahora una simple cuestión de volver a ejecutar la publicación con un solo clic. Para que este proceso sea más rápido, puede usar la barra de herramientas Publicación en Web con un clic.

En el menú Ver, elija Barras de herramientas y, a continuación, seleccione Publicación en Web con un clic.
En el Explorador de soluciones, seleccione el proyecto ContosoUniversity.
En la barra de herramientas Publicación en Web con un clic, elija el perfil de publicación Prueba y, a continuación, haga clic en Publicación web (el icono con flechas que apuntan a la izquierda y a la derecha).
Visual Studio implementa la aplicación actualizada y el explorador se abre automáticamente en la página principal.
Ejecute la página Instructors y seleccione un instructor para comprobar que la actualización se implementó correctamente.

Normalmente, también haría pruebas de regresión (es decir, probaría el resto del sitio para asegurarse de que el nuevo cambio no interrumpe ninguna funcionalidad existente). Sin embargo, este tutorial omitirá ese paso y continuará con la implementación de la actualización en el entorno de ensayo y producción.

Al volver a implementar, Web Deploy determina automáticamente qué archivos han cambiado y solo copia los archivos modificados en el servidor. De forma predeterminada, Web Deploy usa las fechas modificadas por última vez en los archivos para determinar cuáles han cambiado. Algunos sistemas de control de código fuente cambian las fechas del archivo incluso cuando no se cambia el contenido del archivo. En ese caso, es posible que desee configurar Web Deploy para usar sumas de comprobación de archivos para determinar qué archivos han cambiado. Para más información, consulte ¿Por qué se vuelven a implementar todos mis archivos aunque no los he cambiado? en las preguntas más frecuentes sobre la implementación de ASP.NET.

Desconexión de la aplicación durante la implementación

El cambio que va a implementar ahora es un cambio sencillo en una sola página. Pero a veces se implementan cambios más grandes o cambios de código y de base de datos, y el sitio podría comportarse incorrectamente si un usuario solicita una página antes de que finalice la implementación. Para evitar que los usuarios accedan al sitio mientras la implementación está en curso, puede usar un archivo app_offline.htm. Al colocar un archivo denominado app_offline.htm en la carpeta raíz de la aplicación, IIS muestra automáticamente ese archivo en lugar de ejecutar la aplicación. Por lo tanto, para evitar el acceso durante la implementación, coloque app_offline.htm en la carpeta raíz, ejecute el proceso de implementación y, a continuación, quite app_offline.htm después de la implementación correcta.

Puede configurar Web Deploy para colocar automáticamente un archivo app_offline.htm predeterminado en el servidor al iniciar la implementación y quitarlo cuando termine. Para ello, debe agregar el siguiente elemento XML al archivo de perfil de publicación (.pubxml):

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Para este tutorial, verá cómo crear y usar un archivo app_offline.htm personalizado.

No es necesario usar app_offline.htm en el sitio de ensayo, ya que no tiene usuarios que accedan a ese sitio. Sin embargo, se recomienda usar el entorno de ensayo para probar todo lo que piensa implementar en producción.

Creación de app_offline.htm

En el Explorador de soluciones, haga clic con el botón derecho en la solución, haga clic en Agregar y, a continuación, en Nuevo elemento.
Cree una página HTML denominada app_offline.htm (elimine la "l" final en la extensión .html que Visual Studio crea de forma predeterminada).

Reemplace el marcado de la plantilla por el marcado siguiente:

<!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>

Guarde y cierre el archivo.

Copia de app_offline.htm en la carpeta raíz del sitio web

Puede usar cualquier herramienta FTP para copiar archivos en el sitio web. FileZilla es una herramienta FTP popular y se muestra en las capturas de pantalla.

Para usar una herramienta FTP, necesita tres cosas: la dirección URL de FTP, el nombre de usuario y la contraseña.

La dirección URL se muestra en la página del panel del sitio web en el Portal de administración de Azure y el nombre de usuario y la contraseña de FTP se pueden encontrar en el archivo .publishsettings que descargó anteriormente. En los pasos siguientes se muestra cómo obtener estos valores.

En el Portal de administración de Azure, haga clic en la pestaña Sitios web y, a continuación, haga clic en el sitio web de ensayo.
En la página Panel, desplácese hacia abajo para buscar el nombre de host FTP en la sección Vista rápida.
Abra el archivo .publishsettings de ensayo en el Bloc de notas u otro editor de texto.
Busque el elemento publishProfile para el perfil FTP.
Copie los valores userName y userPWD.
Abra la herramienta FTP e inicie sesión en la dirección URL de FTP.
Copie app_offline.htm de la carpeta de la solución a la carpeta /site/wwwroot del sitio de ensayo.
Vaya a la dirección URL del sitio de ensayo. Verá que la página app_offline.htm ahora se muestra en lugar de la página principal.

Ya está listo para realizar la implementación en el entorno de ensayo.

Implementación de la actualización del código en el entorno de ensayo y producción

En la barra de herramientas Publicación en Web con un solo clic, elija el perfil de publicación Ensayo y, a continuación, haga clic en Publicación web.

Visual Studio implementa la aplicación actualizada y abre el explorador por la página principal del sitio. Se muestra el archivo app_offline.htm. Para poder probar y comprobar si la implementación se realizó correctamente, debe quitar el archivo app_offline.htm.
Vuelva a la herramienta FTP y elimine app_offline.htm del sitio de ensayo.
En el explorador, abra la página Instructors en el sitio de ensayo y seleccione un instructor para comprobar que la actualización se implementó correctamente.
Siga el mismo procedimiento para producción que hizo para ensayo.

Revisión de cambios e implementación de archivos específicos

Visual Studio 2012 también ofrece la posibilidad de implementar archivos individuales. Para un archivo seleccionado, puede ver las diferencias entre la versión local y la versión implementada, implementar el archivo en el entorno de destino o copiar el archivo del entorno de destino al proyecto local. En esta sección del tutorial verá cómo usar estas características.

Realización de un cambio para implementar

Abra Content/Site.css y busque el bloque de la etiqueta body.

Cambie el valor de background-color de #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;
}

Visualización del cambio en la ventana Vista previa de la publicación

Al usar el Asistente para publicación web para publicar el proyecto, puede ver qué cambios se van a publicar haciendo doble clic en el archivo en la ventana Vista previa.

Haga clic con el botón derecho en el proyecto ContosoUniversity y haga clic en Publicar.
En la lista desplegable Perfil, seleccione el perfil de publicación Prueba.
Haga clic en Vista previa y, a continuación, en Iniciar vista previa.
En el panel Vista previa, haga doble clic en Site.css.

El cuadro de diálogo Vista previa de cambios muestra una vista previa de los cambios que se implementarán.

Si hace doble clic en el archivo Web.config, el cuadro de diálogo Vista previa de cambios muestra el efecto de las transformaciones de la configuración de compilación y las transformaciones del perfil de publicación. En este momento no ha hecho nada que haga que el archivo Web.config en el servidor cambie, por lo que espera no ver ningún cambio. Sin embargo, la ventana Vista previa de cambios muestra incorrectamente dos cambios. Parece que se quitarán dos elementos XML. El proceso de publicación agrega estos elementos al seleccionar Ejecutar migraciones de Code First al inicio de la aplicación para una clase de contexto Code First. La comparación se realiza antes de que el proceso de publicación agregue esos elementos, por lo que parece que se quitan aunque no se van a quitar. Este error se corregirá en una versión futura.
Haga clic en Cerrar.
Haga clic en Publicar.
Cuando el explorador se abra en la página principal del sitio de prueba, presione CTRL+F5 para provocar una actualización completa y ver el efecto del cambio de CSS.
Cierre el explorador.

Publicación de archivos específicos desde el Explorador de soluciones

Supongamos que no le gusta el fondo azul y desea revertirlo al color original. En esta sección, restaurará la configuración original publicando un archivo específico directamente desde el Explorador de soluciones.

Abra Content/Site.css y restaure la configuración de background-color a #fff.
En el Explorador de soluciones, haga clic con el botón derecho en el archivo Content/Site.css.

El menú contextual muestra tres opciones de publicación.
Haga clic en Vista previa de cambios en Site.css.

Se abre una ventana para mostrar las diferencias entre el archivo local y la versión del mismo en el entorno de destino.
En el Explorador de soluciones, vuelva a hacer clic con el botón derecho en Site.css y haga clic en Publicar Site.css.

La ventana Actividad de publicación web muestra que el archivo se ha publicado.
Abra un explorador en la dirección URL http://localhost/contosouniversity y presione CTRL+F5 para provocar una actualización completa y ver el efecto del cambio de CSS.
Cierre el explorador.

Resumen

Ahora ha visto varias maneras de implementar una actualización de aplicación que no implica un cambio en la base de datos y ha visto cómo obtener una vista previa de los cambios para comprobar que lo que se actualizará es lo que espera. La página Instructors ahora tiene una sección Courses Taught.

Screenshot showing the Instructors page and the courses taught by a specific Instructor.

En el siguiente tutorial se muestra cómo implementar un cambio en la base de datos: agregará un campo de fecha de nacimiento a la base de datos y a la página Instructors.

Anterior Siguiente