Tutorial: Implementación de una aplicación ASP.NET en Azure con Azure SQL Database

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático. En este tutorial se muestra cómo implementar una aplicación ASP.NET orientada a datos en App Service y conectarla a Azure SQL Database. Cuando haya terminado, tendrá una aplicación ASP.NET en ejecución en Azure y conectada a SQL Database.

En este tutorial, aprenderá a:

• Creación de una base de datos de Azure SQL Database
• Conectar una aplicación ASP.NET a SQL Database
• Implementar la aplicación en Azure
• Actualizar el modelo de datos y volver a implementar la aplicación
• Transmitir registros desde Azure a un terminal

Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.

Requisitos previos

Para completar este tutorial:

Instale Visual Studio 2022 con las cargas de trabajo ASP.NET y desarrollo web y desarrollo de Azure.

Si ya ha instalado Visual Studio, agregue las cargas de trabajo en Visual Studio, para lo que debe hacer clic en Herramientas>Get Tools and Features (Obtener herramientas y características).

Descarga del ejemplo

1. Descarga del proyecto de ejemplo

2. -Extraiga (descomprima) el archivo dotnet-sqldb-tutorial-master.zip.

El proyecto de ejemplo contiene una aplicación básica CRUD (crear, leer, actualizar, eliminar) de ASP.NET MVC que usa Entity Framework Code First.

Ejecución la aplicación

1. Abra el archivo dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln en Visual Studio.

2. Escriba F5 para ejecutar la aplicación. La aplicación se muestra en el explorador predeterminado.

   Nota

   Si solo instaló Visual Studio y los requisitos previos, es posible que tenga que instalar paquetes que faltan a través de NuGet.

3. Seleccione el vínculo Crear nuevo y cree un par de elementos de tareas pendientes.

   

4. Pruebe los vínculos Editar, Detalles y Eliminar.

La aplicación usa un contexto de base de datos para conectarse con la base de datos. En este ejemplo, el contexto de base de datos emplea una cadena de conexión llamada MyDbConnection. La cadena de conexión se establece en el archivo Web.config y se hace referencia a ella en el archivo Models/MyDatabaseContext.cs. El nombre de la cadena de conexión se usa más adelante en el tutorial para conectar la aplicación de Azure a una base de datos de Azure SQL.

Publicación de una aplicación ASP.NET en Azure

1. En el Explorador de soluciones, haga clic con el botón derecho en su proyecto DotNetAppSqlDb y seleccione Publicar.

   

2. Seleccione Azure como destino y haga clic en Siguiente.

3. Asegúrese de que Azure App Service (Windows) esté seleccionado y haga clic en Siguiente.

Inicio de sesión e incorporación de una aplicación

1. En el cuadro de diálogo Publicar, haga clic en Iniciar sesión.

2. Inicie sesión en la suscripción de Azure. Si ya ha iniciado sesión en una cuenta de Microsoft, asegúrese de que esa cuenta contiene la suscripción de Azure. Si la cuenta de Microsoft con la que inició sesión no contiene su suscripción de Azure, haga clic en ella para agregar la cuenta correcta.

3. En el panel Instancias de App Service, haga clic en +.

   

Configuración del nombre de la aplicación web

Puede mantener el nombre de aplicación web generado, o cambiarlo por otro nombre único (los caracteres válidos son a-z, 0-9 y -). El nombre de la aplicación web se usa como parte de la dirección URL predeterminada en la aplicación (<app_name>.azurewebsites.net, donde <app_name> es el nombre de la aplicación web). El nombre de la aplicación web debe ser único entre todas las aplicaciones de Azure.

Nota

No seleccione aún Crear.

Crear un grupo de recursos

Un grupo de recursos es un contenedor lógico en el que los recursos de Azure, como aplicaciones web, bases de datos y cuentas de almacenamiento, se implementen y administren. Por ejemplo, más adelante puede elegir eliminar todo el grupo de recursos en un solo paso.

1. Junto a Grupo de recursos, haga clic en Nuevo.

   

2. Llame al grupo de recursos myResourceGroup.

Creación de un plan de App Service

Un plan de App Service especifica la ubicación, el tamaño y las características de la granja de servidores web que hospeda la aplicación. Para ahorrar dinero cuando hospede varias aplicaciones, configure las aplicaciones web para que compartan un único plan de App Service.

Los planes de App Service definen lo siguiente:

• Región (por ejemplo: Norte de Europa, Este de EE. UU. o Sudeste de Asia)
• Tamaño de la instancia (pequeño, mediano o grande)
• Recuento de escala (de 1 a 20 instancias)
• SKU (Gratis, Compartido, Básico, Estándar o Premium)

1. Junto a Plan de hospedaje, haga clic en Nuevo.

2. En el cuadro de diálogo Configurar el plan de servicio de aplicaciones, configure el nuevo plan de App Service con los valores siguientes y haga clic en Aceptar:

   Valor	Valor sugerido	Para obtener más información
   Plan de App Service	myAppServicePlan	Planes de App Service
   Ubicación	Oeste de Europa	Regiones de Azure
   Tamaño	Gratuito	Planes de tarifa

   

3. Haga clic en Crear y espere a que se creen los recursos de Azure.

4. En el cuadro de diálogo Publicar se muestran los recursos que ha configurado. Haga clic en Finalizar

   

Creación de un servidor y una base de datos

Antes de crear una base de datos, necesita un servidor SQL lógico . Un servidor SQL lógico es una estructura lógica que contiene un conjunto de bases de datos administradas como un grupo.

1. En el cuadro de diálogo Publicar, desplácese hacia abajo hasta la sección Dependencias del servicio. Junto a Base de datos de SQL Server, haga clic en Configurar.

   Nota

   Asegúrese de configurar SQL Database desde la página Publicar, en lugar de la página Servicios conectados.

   

2. Seleccione Azure SQL Database y haga clic en Siguiente.

3. En el cuadro de diálogo Configurar Azure SQL Database, haga clic en +.

4. Junto a Servidor de bases de datos, haga clic en Nuevo.

   El nombre de servidor se usa como parte de la dirección URL predeterminada del servidor, <server_name>.database.windows.net. Tiene que ser único entre todos los servidores de Azure SQL. Cambie el nombre del servidor al valor que desee.

5. Agregue un nombre de usuario y una contraseña de administrador. Para conocer los requisitos de complejidad de la contraseña, consulte Directivas de contraseñas.

   Recuerde este nombre de usuario y esta contraseña. Los necesitará para administrar el servidor más adelante.

   

   Importante

   Aunque la contraseña de las cadenas de conexión está enmascarada (en Visual Studio y también en App Service), el hecho de que se conserva en otro lugar se suma a la superficie expuesta a ataques de la aplicación. App Service puede usar identidades de servicio administradas para quitar este riesgo eliminando por completo la necesidad de conservar secretos en el código o en la configuración de la aplicación. Para más información, consulte la sección Pasos siguientes.

6. Haga clic en OK.

7. En el cuadro de diálogo Azure SQL Database, mantenga el Nombre de la base de datos generado de forma predeterminada. Seleccione Crear y espere a que se cree el recurso.

   

Configuración de la conexión de base de datos

1. Cuando el asistente termine de crear los recursos de la base de datos, haga clic en Siguiente.

2. En Nombre de la cadena de la conexión de base de datos, escriba MyDbConnection. Este nombre tiene que coincidir con la cadena de conexión a la que se hace referencia en Models\MyDatabaseContext.cs.

3. En Nombre de usuario de la conexión de base de datos y Contraseña de conexión de base de datos, escriba el nombre de usuario de administrador y la contraseña que haya utilizado en Crear un servidor.

4. Asegúrese de que Configuración de App de Azure esté seleccionado y haga clic en Finalizar.

   Nota

   Si ve archivos de secretos de usuario local en su lugar, debe haber configurado SQL Database en la página Servicios conectados, en lugar de la página Publicar.

   

5. Espere a que finalice el Asistente para configuración y haga clic en Cerrar.

Implementación de la aplicación ASP.NET

1. En la pestaña Publicar, desplácese hacia arriba hasta la parte superior y haga clic en Publicar. Una vez implementada la aplicación ASP.NET en Azure. El explorador predeterminado se inicia con la dirección URL a la aplicación implementada.

2. Agregue algunos elementos de tareas pendientes.

   

   Felicidades. La aplicación ASP.NET orientada a datos se ejecuta en directo en Azure App Service.

Acceso local a la base de datos

Visual Studio le permite explorar y administrar su nueva base de datos en Azure de una manera fácil en el Explorador de objetos de SQL Server. La nueva base de datos ya ha abierto su firewall en la aplicación App Service que ha creado. Pero para acceder a él desde el equipo local (por ejemplo, desde Visual Studio), debe abrir un firewall para la dirección IP pública del equipo local. Si el proveedor de servicios de Internet cambia la dirección IP pública, debe volver a configurar el firewall para acceder de nuevo a la base de datos de Azure.

Creación de una conexión de base de datos

1. En el menú Ver, seleccione Explorador de objetos de SQL Server.

2. En la parte superior del Explorador de objetos de SQL Server, haga clic en el botón Agregar SQL Server.

Configuración de la conexión de base de datos

1. En el cuadro de diálogo Conectar, expanda el nodo Azure. Aquí se muestran todas las instancias de Azure SQL Database.

2. Seleccione la base de datos que creó anteriormente. La conexión que creó anteriormente se rellena automáticamente en la parte inferior.

3. Escriba la contraseña de administrador de base de datos que creó anteriormente y haga clic en Conectar.

   

Permitir la conexión de cliente desde el equipo

Se abre el cuadro de diálogo Create a new firewall rule (Crear nueva regla de firewall). De forma predeterminada, un servidor solo permite conexiones con sus bases de datos desde servicios de Azure, como la aplicación de Azure. Para conectarse a la base de datos desde fuera de Azure, cree una regla de firewall en el nivel de servidor. La regla de firewall permite la dirección IP pública del equipo local.

El cuadro de diálogo ya se ha rellenado con la dirección IP pública de su equipo.

1. Asegúrese de que Add my client IP (Agregar mi IP de cliente) está seleccionado y haga clic en Aceptar.

   

   Una vez que Visual Studio termina de crear la configuración de firewall para su instancia de SQL Database, la conexión se muestra en el Explorador de objetos de SQL Server.

   Aquí, puede realizar las operaciones de base de datos más comunes, como ejecutar consultas, crear vistas y procedimientos almacenados, entre otras.

2. Expanda la conexión >Bases de datos><base de datos>>Tablas. Haga clic con el botón derecho en la tabla Todoes y seleccione Ver datos.

   

Actualización de aplicaciones con Migraciones de Code First

Puede usar las conocidas herramientas de Visual Studio para actualizar la base de datos y la aplicación en Azure. En este paso, usará Migraciones de Code First en Entity Framework para realizar un cambio en el esquema de la base de datos y publicarlo en Azure.

Para más información sobre el uso de Entity Framework Code First Migrations, consulte Getting Started with Entity Framework 6 Code First using MVC 5 (Introducción a Entity Framework 6 Code First mediante MVC 5).

Actualización del modelo de datos

Abra Models\Todo.cs en el editor de código. Agregue la siguiente propiedad a la clase ToDo:

public bool Done { get; set; }

Ejecución de Migraciones de Code First

Ejecute algunos comandos para realizar actualizaciones en la base de datos local.

1. En el menú Herramientas, haga clic en Administrador de paquetes NuGet>Consola del Administrador de paquetes.

2. En la ventana de la consola del Administrador de paquetes, habilite Migraciones de Code First:

   Enable-Migrations
   

3. Agregue una migración:

   Add-Migration AddProperty
   

4. Actualice la base de datos local:

   Update-Database
   

5. Escriba Ctrl+F5 para ejecutar la aplicación. Pruebe los vínculos de edición, detalles y creación.

Si la aplicación se carga sin errores, la característica Migraciones de Code First ha funcionado correctamente. Sin embargo, la página todavía tiene el mismo aspecto porque la lógica de aplicación no usa aún esta propiedad.

Uso de la nueva propiedad

Realice algunos cambios en el código para usar la propiedad Done. Para simplificar, en este tutorial va a cambiar las vistas Index y Create para ver la propiedad en acción.

1. Abra Controllers\TodosController.cs.

2. Busque el método Create() en la línea 52 y agregue Done a la lista de propiedades del atributo Bind. Cuando haya terminado, la firma del método Create() se parecerá al código siguiente:

   public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
   

3. Abra Views\Todos\Create.cshtml.

4. En el código Razor, debería ver un elemento <div class="form-group"> que usa model.Description y, a continuación, otro elemento <div class="form-group"> que usa model.CreatedDate. Inmediatamente después de estos dos elementos, agregue otro elemento <div class="form-group"> que use model.Done:

   <div class="form-group">
       @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
       <div class="col-md-10">
           <div class="checkbox">
               @Html.EditorFor(model => model.Done)
               @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
           </div>
       </div>
   </div>
   

5. Abra Views\Todos\Index.cshtml.

6. Busque el elemento vacío <th></th>. Justo encima de este elemento, agregue el siguiente código Razor:

   <th>
       @Html.DisplayNameFor(model => model.Done)
   </th>
   

7. Busque el elemento <td> que contiene los métodos auxiliares Html.ActionLink(). Encima del elemento <td>, agregue otro <td> con el código Razor siguiente:

   <td>
       @Html.DisplayFor(modelItem => item.Done)
   </td>
   

   Eso es todo lo que necesita para ver los cambios en las vistas Index y Create.

8. Escriba Ctrl+F5 para ejecutar la aplicación.

Ahora puede agregar una tarea pendiente y marcar Listo. A continuación se debería mostrar en su página principal como un elemento completado. Recuerde que la vista Edit no muestra el campo Done, dado que no cambió la vista Edit.

Habilitación de Migraciones de Code First en Azure

Ahora que el cambio de código funciona, incluida la migración de la base de datos, lo publicará en la aplicación de Azure y actualizará también su instancia de SQL Database con Migraciones de Code First.

1. Igual que antes, haga clic con el botón derecho en su proyecto y seleccione Publicar.

2. Haga clic en Más acciones>Editar para abrir la configuración de publicación.

   

3. En la lista desplegable MyDatabaseContext, seleccione la conexión de base de datos para Azure SQL Database.

4. Seleccione Ejecutar Migraciones de Code First (se ejecuta al iniciar la aplicación) y luego haga clic en Guardar.

   

Publicación de los cambios

Ahora que ha habilitado Migraciones de Code First en su aplicación de Azure, publique los cambios en el código.

1. En la página de publicación, haga clic en Publicar.

2. Intente volver a agregar elementos de tareas pendientes y seleccione Listo; se mostrarán en su página de inicio como un elemento completado.

   

Aún se muestran todas las tareas pendientes existentes. Cuando vuelva a publicar su aplicación de ASP.NET, los datos existentes en su instancia de SQL Database no se perderán. Además, Migraciones de Code First solo cambia el esquema de datos y deja intactos los datos existentes.

Transmisión de registros de aplicación

Puede transmitir mensajes de seguimiento directamente desde la aplicación de Azure hasta Visual Studio.

Abra Controllers\TodosController.cs.

Cada acción comienza con un método Trace.WriteLine(). Este código se agrega para mostrarle cómo agregar mensajes de seguimiento a la aplicación de Azure.

Habilitación de la secuencia de registros

1. En la página de publicación, desplácese hacia abajo hasta la sección Hosting.

2. En la esquina derecha, haga clic en ...>Ver registros de streaming.

   

   Los registros se insertan ahora en la ventana Salida.

   

   Sin embargo, no verá aún ninguno de los mensajes de seguimiento. Esto se debe a que cuando selecciona primero Ver registros de streaming, la aplicación de Azure establece el nivel de seguimiento en Error, que solo registra eventos de error (con el método Trace.TraceError()).

Cambio de los niveles de seguimiento

1. Para cambiar los niveles de seguimiento para generar otros mensajes de seguimiento, vuelva a la página de publicación.

2. En la sección Hosting, haga clic en ...>Abrir en Azure Portal.

3. En la página de administración del portal de la aplicación, en el menú de la izquierda, seleccione Registros de App Service.

4. En Application Logging (File System) [Registro de la aplicación (sistema de archivos)], seleccione Detallado en Nivel. Haga clic en Save(Guardar).

   Sugerencia

   Puede experimentar con diferentes niveles de seguimiento para ver qué tipos de mensajes se muestran para cada nivel. Por ejemplo, el nivel Información incluye todos los registros creados por Trace.TraceInformation(), Trace.TraceWarning() y Trace.TraceError(), pero no los registros creados por Trace.WriteLine().

5. En el explorador, vaya a la aplicación de nuevo en http://<nombre de la aplicación>.azurewebsites.net e intente hacer clic en torno a la aplicación de la lista de tareas pendientes en Azure. Los mensajes de seguimiento se insertan ahora en la ventana Salida de Visual Studio.

   Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
   Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
   Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
   Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index
   

Detención de las secuencias de registro

Para detener el servicio de secuencias de registros, haga clic en el botón Detener supervisión en la ventana Salida.

Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. Si no cree que vaya a necesitar estos recursos en el futuro, puede eliminarlos mediante la eliminación del grupo de recursos.

1. En la página Información general de la aplicación web de Azure Portal, seleccione el vínculo myResourceGroup en Grupo de recursos.
2. En la página del grupo de recursos, asegúrese de que los recursos que aparecen son los que quiere eliminar.
3. Seleccione Eliminar grupo de recursos, escriba myResourceGroup en el cuadro de texto y seleccione Eliminar.
4. Vuelva a confirmar seleccionando Eliminar.

Pasos siguientes

En este tutorial, ha aprendido a:

• Creación de una base de datos de Azure SQL Database
• Conectar una aplicación ASP.NET a SQL Database
• Implementar la aplicación en Azure
• Actualizar el modelo de datos y volver a implementar la aplicación
• Transmitir registros desde Azure a un terminal

Continúe con el siguiente tutorial para aprender a mejorar fácilmente la seguridad de la conexión con Azure SQL Database.

Tutorial: Conectar para SQL Database de App Service sin secretos mediante una identidad administrada

Más recursos:

Configuración de la aplicación ASP.NET

¿Quiere optimizar y ahorrar en el gasto en la nube?

Comience a analizar los costos con Cost Management