Tutorial – Aplicación Web ASP.Net con Base de datos SQL en Azure

Version curso.2022

1. Introducción

Objetivos

Usar una aplicacion de base de datos con ASP.Net y SQL Database de Azure basada en un proyecto existente
Desplegar la aplicación en Azure en Web App con un coste mínimo.

Este documento es una versión adaptada del Tutorial oficial: Implementación de una aplicación ASP.NET en Azure con Azure SQL Database [1]. Es casi idéntico al tutorial original, modificando la configuración de los resursos para que supongan un mínimo coste, como en la creación de la base de datos para elegir una base de datos de mínimo costo, suficiente para el uso que le vamos a dar.

En este tutorial aprenderás a implementar una aplicación ASP.NET orientada a datos en App Service y conectarla a Azure SQL Database. Se da por supuesto que se conoces .NET y que tienes una cuenta de Azure con una suscripción activa (Azure para estudiantes).

2. Requisitos

Para la realización del tutorial necesitarás tener instalado en tu PD de trabajo (Local):

Git
Visual Studio 2022 (Community o Profesional).
Cargas de trabajo ASP.NET y desarrollo web, y desarrollo de Azure para Visual Studio. 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)

Si necesitas instalar Visual Studio 2022, puedes hacerlo la página oficial, o bien puedes usar un gestor de paquetes (recomendable), que para Windows el más utilzado es Chocolatey.

Si optas por usar Chocolatey, instalalo siguiendo las instrucciones de la sección Install Chocolatey for Individual Use. Luego, abre una ventana de comandos (CMD) como administrador e instala Visual Studio y las cargas de trabajo necesarias con:

choco install visualstudio2022community -y
choco install visualstudio2022-workload-azure -y
choco install visualstudio2022-workload-netweb -y

IMPORTANTE: Ten mucha paciencia, porque puede tardar mucho tiempo (más de 30 minutos)

Además, en alguna descrición alternativa a la creación de los recursos Azure desde Visual Studio, usaremos Cloud Shell de Azure desde el Portal de Azure (en el navegador) para ejecutar los comandos mediante la CLI (Command Line Interface) de Azure, que son todos aquellos que comienzan por el comando az. La CLI nos permite interactuar con los recursos de Azure mediante comandos, sin tener que usar el Portal Web, con lo que lo haremos más rápido.

Figura 1. Cloud Shell de Azure

3. Configuración de la aplicación de ejemplo

Para seguir este tutorial, usa el proyecto disponible en el repositorio https://github.com/Azure-Samples/dotnet-sqldb-tutorial.git. 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. Para comenzar, clona el respositorio en tu máquina local en Visual Studio. Si lo deseas, puedes hacer antes un fork y trabajar sobre él,para permitir hacer guardar en remoto tus modificaciones al mismo.

git clone https://github.com/Azure-Samples/dotnet-sqldb-tutorial.git
cd dotnet-sqldb-tutorial

También puedes clonar directamente el respositorio en Visual Studio.

La aplicación Web de este proyecto, cuando la ejecutemos, tendrá este aspecto:

Figura 2. Captura de pantalla de la aplicación

4. Publicación de la aplicación ASP.NET en Azure

En Visual Studio, en el Explorador de soluciones, haga clic con el botón derecho en su proyecto DotNetAppSqlDb y seleccione Publicar.
Seleccione Azure como destino y haga clic en Siguiente.
Asegúrese de que Azure App Service (Windows) esté seleccionado y haga clic en Siguiente.

4.1. Inicio de sesión

En el cuadro de diálogo Publicar, haga clic en Iniciar sesión.
Inicie sesión en la suscripción de Azure.

4.2. Creación de la instancia de App Service

Se describen dos formas alternativas de realizar este paso. Si lo haces desde Visual Studio no necesitarás volver a hacerlo desde Azure CLI.

4.2.1. Desde Visual Studio

En primer lugar, vamos a crear la instancia de Azure App Service que hospede nuestra aplicación web implementada. Los pasos son similares al tutorial original, excepto el paso 6 en el que debes seccionar un plan F1 (Free) para que sea gratuita.

En el panel Instancias de App Service, haga clic en +.
Dale un nombre a la Web App. 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.
Junto a Grupo de recursos, haga clic en Nuevo
Llame al grupo de recursos igual que su Web App.
En Hosting Plan, haga clic en Nuevo
Elija Free

Figura 3. Plan gratuito

Haga clic en Crear y espere a que se creen los recursos de Azure.
En el cuadro de diálogo Publicar se muestran los recursos que ha configurado. Haga clic en Finalizar

4.2.2. Desde Azure CLI y Cloud Shell

Como alternativa, los recursos Web App se pueden crear con Azure CLI y Cloud Shell, mediante los siguientes comandos de la CLI de Azure, que deberás ejecutar en Cloud Shell (Figura 1).

En primer lugar, crea un grupo de recursos con el comando az group create. El grupo de recursos actua como contenedor de todos los recursos de Azure relacionados con esta aplicación. Crea el grupo de recursos en la región Este de EEUU, con nombre msdocs-core-sql:

az group create --location eastus --name DotNetAppSQLDb-jjcanada (1)

1	Sustituya `jjcanada` por su nombre de usuario de la UAL.

A continuación, crea un plan de App Service con el comando az appservice plan create. El parámetro --sku define el tamaño (CPU, memoria) y el costo del plan de App Service. En este ejemplo se usa el plan de servicio F1 (Gratis).

az appservice plan create \
    --name DotNetAppSQLDb-jjcanada-plan-f1 \
    --resource-group DotNetAppSQLDb-jjcanada \
    --sku F1

Por último, cree la aplicación web de App Service mediante el comando az webapp create.

az webapp create \
    --name DotNetAppSQLDb-jjcanada \ (1)
    --runtime "ASPNET|V4.8" \ (2)
    --plan DotNetAppSQLDb-jjcanada-plan-f1  \
    --resource-group DotNetAppSQLDb-jjcanada

1	Sustituye `jjcanada` por tu nombre de usuario de la UAL en el nombre de la instancia Web App. El nombre de la instancia de App Service se usa no solo como nombre del recurso en Azure, sino también para formar el nombre de dominio completo de la aplicación en el formato `https://<app_service_name>.azurewebsites.net`.
2	El runtime especifica la versión de .NET que ejecuta la aplicación. En este ejemplo se usa ASPNET V4.8 LTS. Use `az webapp list-runtimes` para ver la lista de runtimes disponibles.

4.3. Creación de la base de datos

A continuación, vamos a crear la base de datos de Azure SQL Database que almacene los datos en la aplicación. De nuevo se ofrecen dos alternativas para realizar este paso, la primera desde Visual Studio, y la segunda desde el Portal de Azure. En ambos casos, debes estar atento al paso de configuración de la base de datos de tipo básico para que tenga un consumo mínimo.

El tutorial oficial indica los pasos para crear una base de datos que consume más de 300€ al mes. Por ello se recomienda usar los pasos descritos a continuación.

4.3.1. Desde Visual Studio

Todos estos pasos son idéntidos al tutorial original, excepto el paso 9 que es muy importante porque modifica el tipo de base de datos al Básico (de menor coste).

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.
Seleccione Azure SQL Database y haga clic en Siguiente
En el cuadro de diálogo Configurar Azure SQL Database, haga clic en +.
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.
Agregue un nombre de usuario y una contraseña de administrador. Recuerde este nombre de usuario y esta contraseña. Los necesitará para administrar el servidor más adelante.
Haga clic en OK.
En el cuadro de diálogo Azure SQL Database, seleccione Crear y espere a que se cree el recurso
Tras unos minutos, accede al Portal Azure y consulta las bases de datos Azure SQL. Comprobarás que la base de datos se ha creado, y el tipo predeterminado supone un coste excesivo. Este paso es muy importante: cambie manualmente el tipo de la bbdd Azure SQL a Básico.

Figura 4. Seleccione la capa de precio actual

Figura 5. Cambia manualmente a Básico el tipo de base de datos

4.3.2. Desde Azure Portal

Como alternativa a la creación desde Visual Studio, se puede crear la BBDD en el Portal Azure y luego desde Visual Studio seleccionarla una vez que ya existe.

En Azure Portal, SQL Database, Crear.

Figura 6. SQL Database, Crear

Selecciona el grupo de recursos creado previamente, DotNetAppSqlDb-jjcanada

Figura 7. Selecciona el grupo de recursos ya creado

Más abajo, en la sección de detalles de creación de la BBDD, dale un nombre a la base de datos y crea un nuevo servidor

Figura 8. Da un nombre a la base de datos y crea un nuevo servidor

1	En el nombre de la base de datos, utiliza tu nombre de usuario de la UAL.

Crea un nuevo servidor, usando un nombre apropiado, y unas credenciales para el mismo.

Apunta bien estos datos porque los necesitarás más adelante.

Figura 9. Nuevo servidor y credenciales de acceso a la BBDD

Una vez creado el servidor, más abajo, en la creación de la BBDD, selecciona "Configurar base de datos". Este paso es muy importante, porque la base de datos predeterminada es una G5 con 2 nucleos que tiene un precio superior a los 300€ mensuales.

Figura 10. Configurar la base de datos

Selecciona la base de datos básica. El precio es de unos 3€ al mes, y no necesitamos más.

Figura 11. Configurar base de datos tipo básico

La base de datos básica aparece correctamente seleccionada

Figura 12. Base de datos seleccionada

Por último, selecciona redundancia local.

Figura 13. Redundancia local

Haz clic en Revisar y crear, y Crear.

Tu base de datos SQL con un coste mínimo ya está creada. En Visual Studio, en el paso de configurar la base de datos SQL Azure, en lugar de crear una nueva, selecciona la BBDD existente en la lista.

4.4. Despliegue de la aplicación

En Visual Studio, 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.

5. Prueba de la aplicación desplegada

Navega a la URL de tu web app. Ahora mismo la bbdd debe estar vacía, por lo que no se verán tareas.

Figura 14. Aplicación funcionando en el web app

Sin embargo, el tutorial da un error, reportado como un issue en el repositorio GitHub, que se describe en la siguiente sección, junto con su solución.

5.1. Troubleshooting

Se visualizará un error Server Error in '/' Application, para resolverlo realice los siguientes pasos:

Figura 15. Error tras la primera publicación

Vuelva a Visual Studio. Sobre la solución, botón derecho, Publicar. En la sección Connected Services, en Azure SQL Database aparecerá un aviso de error.

Figura 16. Error en la dependencia a la BBDD

Elimine la dependencia a Azure SQL Database.

Figura 17. Elimine la dependencia con problemas

Y vuelva a publicar.

Compruebe que la aplicación funciona.

Referencias

[1] Documentación Oficial de Azure Web Apps. Tutorial: Implementación de una aplicación ASP.NET en Azure con Azure SQL Database [Fecha de consulta: 7/04/2022]