Crea y publica tu aplicación web ASP.NET Core en Azure

Este Taller se realiza en el marco del Azure Tech Day, evento en línea organizado por la UPEC Microsoft Community y Microsoft Learn Student Ambassadors el 9 de Enero de 2021.

Descripción: En este taller desarrollaremos un sitio web en ASP .NET Core que registra información de alumnos en una base de datos de Azure SQL. Se utilizará Azure Storage para el registro de imágenes y Azure Web App para la publicación del sitio en la nube.

Parte 1. Creación de recursos en Azure

Ingresa al portal de Azure e inicia sesión con tu cuenta. https://portal.azure.com/

1.1 Creación de Azure Resource group

Da clic en el botón Create a resource y teclea Resource group. Una vez localizado el recurso, da clic en el botón Create

El nombre del grupo de recursos es AzureTechDay-RG y la región es South America (Brazil South).

Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create.

1.2 Creación de Azure Storage account

De regreso en la página de inicio del portal, da clic en el botón Create a resource y teclea Storage account. Una vez localizado el recurso, da clic en el botón Create.

En el formulario, ingresa la siguiente información:

• Grupo de recurso: AzureTechDay-RG (elige de la lista)
• Nombre de la cuenta de almacenamiento: Una palabra compuesta por:
  • universidadstorage
  • 2 letras de tus iniciales
  • 2 digitos cualquiera
  • Ejemplo: universidadstoragelb01
  • Nota 1: Todo debe estar en minúsculas, se aceptan máximo 24 caracteres (solo letras y dígitos, no símbolos especiales)
  • Nota 2: Este identificador debe ser único de manera universal
• Ubicación: (South America) Brazil South
• Tipo de cuenta: StorageV2 (propósito general)
• Replicación: LRS (opcional, no necesario)

Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create. Cuando finalice la creación, da clic en Go to resource.

Dentro de la cuenta de almacenamiento, da clic en Containers

Da clic en el botón + Container

Ingresa el nombre fotos, el nivel de acceso Container (acceso anónimo) y da clic en Create.

Confirma la creación del contenedor en la cuenta de almacenamiento

Para finalizar esta parte, en la sección Access keys, da clic en el botón Show keys y copia los valores indicados a continuación (usando el botón de la derecha) y pégalos en un bloc de notas.

• Storage account name
• Key 1 Key
• Key 1 Connection string

Estos valores serán utilizados posteriormente por la aplicación web para almacenar fotografías del usuario.

1.3 Creación de Azure SQL database

De regreso en la página de inicio del portal, da clic en el botón Create a resource y teclea SQL databases. Una vez localizado el recurso, da clic en el botón Add.

Ingresa la siguiente información:

• Grupo de recursos: AzureTechDay-RG (elige de la lista)
• Da clic en Create new en la sección Server:
  • El nombre del servidor es una palabra compuesta por:
    • universidadserver
    • 2 letras de tus iniciales
    • 2 digitos cualquiera
    • Ejemplo: universidadserverlb01
  • Server admin login: Tu nombre. Ejemplo: luis
  • Password: Una cadena segura. Ejemplo: P@$$w0rd
  • Confirma la contraseña
  • Ubicación: (South America) Brazil South
  • Click en OK

De regreso en el formulario de base de datos, completa el resto de campos:

• Nombre de la base de datos: universidaddb
• Server: Debes seleccionar el servidor que acabas de crear
• Sin pool elástico de SQL
• Configurar database en la sección Compute + storage.
• Redundancia de base de datos: Locally redundant.

En la sección de configuración de base de datos, para minimizar costos selecciona un servidor de tipo Basic. Da clic en Apply.

Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create. Cuando finalice la creación, da clic en Go to resource.

En la sección Overview, haz clic en Set server firewall.

Da clic en el botón Add client IP. Se añadirá tu dirección como regla de firewall para permitir el acceso al servidor. También haz clic en Yes en la sección Permitir a los servicios y recursos de Azure acceder a este servidor.

Finalmente, da clic en Save para guardar los cambios.

Finalmente, accede a la sección Connection strings de la base de datos y utiliza el ícono de la derecha para copiar en un bloc de notas la cadena de conexión de acceso a la base de datos y al servidor. No olvides reemplazar el campo Password con el valor ingresado previamente.

1.4 Creación de Azure Web App

Este recurso será creado desde Visual Studio al momento de publicar la aplicación web, así que no lo haremos en estos momentos.

Parte 2. Desarrollo de aplicación web ASP .NET Core con Visual Studio

2.1 Creación de la solución web

Abre Visual Studio 2019 y da clic en Crear un nuevo proyecto.

Localiza el tipo ASP .NET Core Web Application y da clic en Siguiente.

En la siguiente pantalla, ingresa la siguiente información y da clic en Crear:

• Nombre del proyecto: UniversidadWebsite
• Ubicación: Elige una ruta corta (recomendado crear una carpeta en raiz y ahí colocar el proyecto)

A continuación, elige la versión ASP .NET Core 5.0 y el template ASP .NET Core Web App (Model-View-Controller). Clic en Crear.

2.2 Configuración del proyecto web

Da clic derecho en el proyecto UniversidadWebsite y selecciona Manage Nuget packages.

En la sección Browse, busca e instala los siguientes paquetes:

• Microsoft.EntityFrameworkCore (versión 5.0.1)
• Microsoft.EntityFrameworkCore.Design (versión 5.0.1)
• Microsoft.EntityFrameworkCore.SqlServer (versión 5.0.1)
• Microsoft.EntityFrameworkCore.Tools (versión 5.0.1)
• Microsoft.EntityFrameworkCore.Sqlite (versión 5.0.1)
• Microsoft.VisualStudio.Web.CodeGeneration.Design (versión 5.0.1)

En cada caso, acepta la licencia y paquetes adicionales que se instalarán. Es importante que todos los paquetes Nuget estén en la misma versión (en este caso, la 5.0.1). El paquete Microsoft.VisualStudio.Web.CodeGeneration.Design admite una versión distinta a los demás, pero debería ser similar (por ejemplo, una versión 5.0.x).

2.3 Creando los Modelos

Sobre la carpeta Models da clic derecho y elige Agregar > Clase con el nombre Estudiante. El código se muestra a continuación y define la estructura (campos) de una tabla Estudiantes que vamos a crear en nuestra base de datos con la estrategia Code-First:

2.4 Conectando la base de datos

2.4.1 Añadiendo la cadena de conexión

En el archivo appsettings.json agrega una entrada ConnectionStrings que contiene un elemento UniversidadCadenaConexion y cuyo valor es la cadena de conexión de la base de datos que creaste en Azure. Observa la imagen siguiente como referencia:

2.4.2 Añadiendo el contexto

Crea una carpeta Context en el proyecto. Dentro de ella, crea una clase llamada UniversidadContexto, la cual tiene el código siguiente:

2.4.3 Configurando Startup.cs

Abre el archivo Startup.cs y realiza las siguientes modificaciones:

• Agrega los espacios de nombre:
  • UniversidadWebsite.Context
  • Microsoft.EntityFrameworkCore
  • En el método ConfigureServices agrega el contexto UniversidadContexto pasando la cadena de conexión UniversidadCadenaConexion localizada en appsettings.

A continuación se muestra el código completo de la clase con las modificaciones indicadas:

2.4.4 Realizando la migración

Abre la Consola de Paquetes Nuget desde Tools > Nuget Package Manager > Package Manager Console:

Introduce el comando Add-Migration “Version Inicial” y presiona Enter.

Observa que se ha creado una carpeta Migrations, así como una clase con un timestamp seguido del identificador Version_Inicial. El código contiene información necesaria para crear una tabla Estudiantes con los campos indicados en el modelo Estudiante.

Ahora ingresa el comando Update-Database

Esto crea la tabla Estudiantes en la base de datos de la nube. Para verificarlo, accede al portal de Azure. Localiza el recurso universidaddb y en la sección Query editor (preview), ingresa con tus credenciales.

Observa que ahora existe una tabla Estudiantes en la base de datos (por supuesto, vacía de momento, pero lista para funcionar con tu aplicación web).

2.5 Añadiendo la funcionalidad

2.5.1 Agregando el paquete Nuget

Da clic derecho en el proyecto y selecciona Manage Nuget packages. En la sección Browse, busca e instala la última versión estable del paquete Azure.Storage.Blobs.

2.5.2 Agregando la conexión a la cuenta de almacenamiento

Modifica appsettings.json agregando una nueva entrada, AzureStorage, la cual contiene tres elementos:

• Cuenta, cuyo valor es el nombre de la cuenta de almacenamiento de Azure.
• Llave, cuyo valor es el campo key de la cadena de conexión de la cuenta de almacenamiento de Azure.
• Contenedor, cuyo valor es fotos, el cual fue creado dentro de la cuenta de almacenamiento de Azure.

2.5.3 Agregando el manejador de blobs

Crea una carpeta Helpers y dentro de ella una clase AzureStorageConfig, con el código siguiente:

En el archivo Startup.cs, modifica lo siguiente:

• Agrega el namespace UniversidadWebsite.Helpers
• En el método ConfigureServices, registra una instancia de configuración AzureStorageConfig

En la carpeta Helpers crea otra clase, StorageHelper, con el código siguiente:

2.5.4 Agregando una vista y controlador

Da clic derecho en la carpeta Controllers y elige Add > Controller. En la sección MVC, selecciona MVC Controller with views, using Entity Framework y da clic en Add.

En la siguiente pantalla:

• Selecciona el modelo Estudiante
• Elige la clase de contexto de datos UniversidadContexto
• Marca las 3 opciones de Vista (Generate views es el más importante)
• El nombre del controlador EstudiantesController.

Da clic en Add. El resultado es que se agregará una clase EstudiantesController en la carpeta Controllers. Además, dentro de Views se ha generado la carpeta Estudiantes con varias páginas.

2.5.5 Modificando el modelo y la base de datos

En el modelo Estudiante.cs añade la propiedad Foto

En la Consola de Paquetes Nuget utiliza el comando Add-Migration “Foto Estudiante” y una vez creada la migración, utiliza Update-Database para actualizar la tabla Estudiante con el nuevo campo.

2.5.6 Modificando el controlador

En EstudiantesController realiza las siguientes modificaciones:

• Agrega los espacios de nombres Microsoft.AspNetCore.Http y Microsoft.Extensions.Options
• Agrega una instancia _config de IOptions<AzureStorageConfig>.
• Inyéctala en el constructor
• Modifica la firma el método Create agregando el parámetro archivo de tipo ICollection<IFormFile>
• Llama al método SubirArchivo de StorageHelper y asigna el resultado a la propiedad Foto de la clase Estudiante.

A continuación se muestra el código completo de la clase:

2.5.7 Modificando las vistas

En la carpeta Views, localiza la carpeta Estudiantes. Abre el archivo Create.cshtml y realiza los siguientes cambios:

• La definición del objeto form
• El tipo de control date para la fecha
• Agrega un input para que el usuario pueda elegir un archivo.

A continuación se muestra el código completo de la página:

En la vista Details.cshtml, añade un espacio para mostrar la Foto en un elemento img.

2.5.8 Agregando un enlace al menú

En el archivo _Layout.cshtml dentro de la ruta Views/Shared, agrega un nuevo elemento li a la lista (menú) que enlace a la vista de Estudiantes (Index)

2.6 Probando la aplicación web

Compila y ejecuta la aplicación web. Accede al menú Estudiantes y da de alta un nuevo registro.

Llena los datos del formulario

Observa que el registro ha sido creado con éxito

Si accedes a los detalles del registro, observa la foto del usuario.

2.7 Publicando el sitio web en Azure

Da clic derecho sobre el nombre del proyecto y elige la opción Publish.

Elige Azure en la sección Target y da clic en Next.

Especifica el tipo Azure App Service (Windows) y da clic en Next.

Da clic en Create an Azure App Service.

Da clic en el botón New en Hosting Plan e ingresa el nombre, ubicación y tamaño (Free)

Ahora ingresa los datos siguientes:

• El nombre del sitio debe ser único
• El grupo de recursos AzureTechDay-RG
• El Hosting Plan recién creado

Da clic en el botón Create. Espera unos instantes a que se provisionen los recursos en Azure. Ahora da clic en Finish.

Finalmente, da clic en Publish.

Espera unos instantes y al final da clic en la URL del sitio para lanzar el sitio web publicado en Azure. Verifica su funcionamiento.

En este taller creaste un sitio web que registra información de alumnos en una base de datos en la nube y utiliza una cuenta de almacenamiento también en la nube para guardar información adicional (fotografías). Posteriormente, el sitio fue publicado en Azure, de manera que está disponible de forma pública.

Espero esta sesión haya sido de tu interés. El código fuente de la aplicación estará disponible muy pronto en mi GitHub.

Saludos,

Luis