Conectar un Azure App Service mediante Filezilla

Introducción

Azure app Service es una solución de servicio como plataforma (PaaS) que nos ofrece la nube de Azure entre su vasta cantidad de soluciones, desde poder desarrollar nuestras aplicaciones web, subir una API, trabajar hasta con aplicaciones de terceros, sin preocuparte acerca de la administración de su infraestructura.

tradicionalmente un deploy de cualquier aplicación web debe de requerir no solamente en la planificación de su arquitectura desde el punto de vista del desarrollo sino también considerar la parte de toda la infraestructura que se debe desarrollar o crear como por ejemplo las redes, balanceo de cargas, tolerancia a fallos, tener alta disponibilidad entre algunas cosas que deben ser consideradas que debemos de manejar en nuestras aplicaciones.

Una vez desplegado estos sistemas o estas aplicaciones web o API en general bajo un entorno de producción se necesita darle mantenimiento ahí es donde entran nuestro personal de infraestructura lo cual monitorean la salud de estas aplicaciones.

toda esa responsabilidad esta resumida con esta solución que llegó hacia los desarrolladores como caída del cielo llamada Azure app Service, donde nos da la facilidad de crear aplicaciones y desplegar las mismas de una manera super fácil sin necesidad de preocuparnos por toda esa capa de mantenimiento e infraestructura vital para tener nuestras aplicaciones encendidas y totalmente funcionales.

Que aprenderás en este articulo:

  1. Aprenderás a crear una App Service directamente desde el portal de Azure
  2. Podrás conectarte mediante el protocolo FTP a la app web de app Service mediante la aplicación Filezilla
  3. Poder hacer respaldos y gestión de los archivos y carpetas en esa instancia de App Service mediante Filezilla por el protocolo FTP

Requisitos básicos:

  1. Filezilla (https://filezilla-project.org/download.php?platform=win64)
  2. Una cuenta de Azure (https://docs.microsoft.com/en-us/learn/modules/create-an-azure-account/)
  3. Ganas de aprender

Creación de un App Service

Lo primero que debemos de hacer para poner en práctica este artículo es empezar a preparar todos los recursos necesarios en la nube de Azure pero para ello primero debemos de crear nuestra cuenta de Azure, sí ya la posees entonces ya te puedes saltar este paso e ingresar al portal principal de Azure (https://portal.azure.com) dónde vamos a seleccionar en el botón de hamburguesa en la esquina superior izquierda del portal principal le vamos a dar clic en la primera opción como aparece en la siguiente imagen.

Azure predefine una serie de elementos comunes para crear en sus recursos, para este articulo vamos a hacer clic en la opción Web App como se muestra a continuación.

Una vez ido al formulario de creación de una web app para App Services vamos a seleccionar la suscripción como primera opción, luego vamos a crear un recurso nuevo, en mi caso yo le llame Demos, como siguiente opción damos un nombre a la web app, esta a la vez será la url a la cual vamos a acceder desde la internet yo le llame demoappservicefilezilla, en publicación dejamos en la opción Código, luego en la opción Runtime la verdad puedes elegir cualquiera, el interés de este demo es acceder a los archivos que están en este espacio reservado para alojar nuestra app, en mi caso seleccione .NET 5, en la opción de sistema operativo lo dejamos como quedo por defecto, en este caso Windows y en la región, agreguen la que mas les haga sentido, para este demo seleccione South Central US.

en la sección de App service plan, yo como no tenia ninguna nueva le di a crear nuevo plan y del lado derecho se va a desplegar una página donde aparecerán los distintos esquemas de precios que nos ofrece app service para hospedar, primero seleccionar en sus distintos ambientes (Dev/Test – Production – Isolated), vamos a hacer para efectos de este demo clic en la primera opción (Dev / Test) y seleccionaremos el tier F1 que es gratuito donde nos ofrece 1 GB de memoria y 60 minutos al día de cómputo, esto quiere decir que entre cada transacción ya sea de request o response este nos va a consumir dentro de nuestro rango de tiempo que ofrece diario este tier que no sobrepase de los 60 minutos lo cual para pruebas y demos esta mas que suficiente, mas no es una instancia que debemos dejar luego cuando queramos ir a producción o ambientes más públicos.

Luego de seleccionar o crear el plan de app service y aplicamos los cambios le damos a revisar y crear para que nos envíe a la siguiente pagina donde nos va a mostrar un resumen de todas las configuraciones seleccionadas hacemos clic en el botón crear para que Azure proceda a crear nuestra app web como se muestran en la siguiente imagen.

Una vez creado el recurso, vamos a ello haciendo clic en el botón Go to resource

Para comprobar que todo esta al 100% funcional con nuestra app web vamos a buscar la opción de Browse en la pagina principal del recurso que pertenece a nuestra app web o bien ubicar la opción URL y hacer clic en la opción de copiar y pegar la ruta en nuestro navegador web para confirmar que ya tenemos nuestra app web ejecutándose sin problemas como se muestra a continuación.

De esta manera ya tenemos creada nuestra app web mediante el cual nos vamos a poder conectar mediante ftp con Filezilla y gestionar los archivos que se encuentran hospedados en ese recurso.

Conectar App Service mediante Filezilla

Aquí el truco para conectarnos mediante ftp a cualquier web app es obtener el perfil de publicación que nos ofrece app service en la pagina principal de aquel recurso que creemos, vamos a ubicar la opción Get Publish Profile y hacemos clic para descargar el archivo con extensión .PublishSettings como se muestra a continuación.

Una vez descargado el archivo lo ubicamos y abrimos con nuestro bloc de notas y vamos a hacer clic en la opción formato y hacemos clic en ajuste de línea para que no se abra el archivo y se muestre todo en 1 sola línea y se vea mas entendible el archivo, luego vamos a notar que parece código xml con configuración relevante usuarios, contraseñas, urls, en realidad lo que estas descargando son los perfiles para conexión mediante ftp, ftp pasivo y webapp que luego veremos en otros artículos como sacarles el máximo provecho para hacer liberaciones de nuestras aplicaciones de una manera más rápida y sencilla, continuando con el articulo vamos a ubicar el tag de publishProfile y para que sea mas entendible hagamos enter para dar espacios y de ahí sacar el perfil que nos interesa que es el FTP como se muestra en las siguientes imágenes.

Ok entonces ya teniendo los datos de conexión abrimos Filezilla y hacemos clic en el primer icono del lado izquierdo que es donde se nos va a desplegar una ventana de configuración de conexiones y vamos a hacer clic en la opción New Site, le damos un nombre a nuestro site, en mi caso coloque DemoAzureAppService como se muestra a continuación.

A este paso veremos del lado derecho de la ventana de conexión una serie de valores que vamos a rellenar con las configuraciones que ya tenemos del archivo publishProfile donde vamos a copiar el publishUrl y lo vamos a pegar en la casilla de host como primer paso, luego seguimos con el usuario y contraseña es mas que obvio ubicarlo en el bloc de notas los copiamos y pegamos y hacemos clic en Connect como se muestra en la siguiente imagen.

Hasta este paso ya vamos muy bien, solamente se nos mostrará una ventana mostrándonos el certificado de conexión entrante que nos permitirá hacer conexión con el recurso de Azure mediante el protocolo FTP, simplemente hacemos clic en OK.

Hasta este punto ya nos podemos conectar mediante ftp a nuestra web app y poder hacer gestión de nuestros archivos, en este caso solo se ve un archivo que es el que predefine Azure al momento de crear un recurso de app service que es el archivo hostingstart.html.

Respaldar y hacer cambios en nuestros archivos

En los pasos previos ya nos pudimos conectar mediante Filezilla a nuestro espacio reservado donde tenemos los archivos que pertenecen a nuestra app web, por ahora tenemos el único archivo que automáticamente genera Azure, pero ya hasta aquí podríamos subir archivos pertinentes a un portal web, modificar imágenes, cambiar nombres y permisos a carpetas, para hacer una prueba si cualquier cambio surte efecto hacemos clic en la carpeta wwwroot, y en la lista de abajo nos va a aparecer el archivo hostingstart.html le damos clic derecho y hacemos clic en la opción View/Edit.

Nos abrirá el bloc de notas con todo el contenido en html donde vamos a buscar el tag de title y solamente voy a cambiar las líneas del titulo para ver el cambio en tiempo real luego de guardar el archivo como se muestra en la siguiente imagen.

Se nos mostrara una ventana donde vamos a confirmar los cambios realizados en el servidor propiamente en el archivo hostingstart.html y hacemos clic en Yes.

Vamos a nuestra web app de Azure y copiamos la url o hacemos clic en browse y nos mostrara los cambios que hicimos directamente desde FTP al archivo html que previamente modificamos.

Conclusión

De esta manera ya como lo vimos en los pasos anteriores podemos demostrar de una manera rápida el aprovechamiento de la herramienta de Filezilla para gestionar los archivos ya almacenados en esa instancia de app service, ya sea para configurar algunas cosas que quedaron pendientes, alguna modificación de un parámetro o variable en una configuración por ambientes, algún respaldo, algún archivo faltante por reemplazar o añadir, en fin.

Accediendo de manera rápida mediante Filezilla podemos controlar más cómodamente nuestras instancias de App service, si se esta al tanto y se conoce de que ya se puede hacer gestión mediante otros recursos mediante ya sea el App Service Editor que aun sigue en fase preview a día de hoy así como también mediante KUDU, el CLI y también herramientas como Powershell pero nada quita la comodidad de arrastrar y soltar archivos de manera fácil mediante Filezilla o algún programa de gestión de archivos mediante el protocolo FTP.

Manejo de Azure Blob Storage mediante el SDK de Azure.

Introducción

La nube de Azure posee una basta cantidad de posibilidades y maneras de trabajar y hacernos más fácil todo a través del cómputo en la nube, una de ellas son los famosos blob storage.

¿Pero entonces que es un blob storage?…

El blob storage de Azure está diseñado para almacenar datos no estructurados, que no tienen una estructura definida. que incluye archivos de texto, imágenes, videos, documentos y mucho más. Una entidad almacenada en el almacenamiento de blobs se denomina blob.

Existen muchas maneras de trabajar un blob storage, en este artículo vamos a desarrollar una forma sencilla de subir contenido ya sea desde un archivo multimedia como una imagen, sonido, vídeo, hasta archivos muy pesados utilizando todo el poder del SDK da Azure.

Qué aprenderás en este artículo:

  1. Conceptos básicos de un blob storage en Azure
  2. Crear un contenedor de blob storage
  3. Conectar una aplicación el C# a Azure mediante su SDK
  4. Subir archivos multimedia mediante el SDK de Azure

Requisitos básicos:

  1. Visual Studio 2019
  2. Una cuenta de Azure (Para esto puedes crear una cuenta nueva sin costo alguno)
  3. .Net Core 5 instalado
  4. Conocimientos básicos de C#
  5. Ganas de aprender

Creación de un contenedor de blob storage

Lo primero que debemos de hacer para poner en práctica este artículo es empezar a preparar todos los recursos necesarios en la nube de Azure pero para ello primero debemos de crear nuestra cuenta de Azure (Creación de una cuenta de Azure – Learn | Microsoft Docs), sí ya la posees entonces ya te puedes saltar este paso e ingresar al portal principal de Azure (https://portal.azure.com) dónde vamos a seleccionar en el botón de hamburguesa en la esquina superior izquierda del portal principal le vamos a dar clic en la primera opción como aparece en la siguiente imagen

Una vez habiendo hecho clic se desplegará una nueva página y vamos a escribir en la barra de búsqueda la palabra blob en sí como se muestra en la siguiente imagen

Al hacer clic nos va a enviar a una nueva página donde va a detallar toda la información relacionada a este recurso dando una introducción los planes de precios uso información soporte y revisiones, así como también una sugerencia de recursos similares al storage account que vamos a crear a continuación le vamos a dar clic al botón crear cómo se muestra en la siguiente imagen

Una vez dado clic en el botón de crear nos va a llevar a una página dónde vamos a empezar a configurar nuestra cuenta de almacenamiento donde el primer valor que nos pide es la suscripción, seleccionamos la suscripción luego el recurso asociado a esa suscripción si no posees un recurso puedes crear uno nuevo dándole al botón debajo de la casilla de texto donde ingresó a ser el recurso dándole a crear nuevo, luego en la sección de detalles de la instancia vamos ahora sí a darle un nombre a nuestra cuenta de almacenamiento para este artículo yo voy a escribir “demostorageazhugh” es de resaltar que el nombre de la cuenta de almacenamiento debe ser con letras minúsculas y el nombre que le vamos a dar debe de ser aceptado por Azure como tal como paso siguiente vamos a seleccionar la región en este caso yo voy a seleccionar “US South Central US” como último paso vamos a seleccionar el performance y la redundancia para este demo vamos a dejarlo en sus valores predeterminados y vamos a seleccionar el botón de revisar y crear como se muestra todo en la siguiente imagen

Una vez que la validación de toda esta configuración que hemos generado ha sido exitosa simplemente lo que hacemos es darle al botón de crear como se muestra en la siguiente imagen

Luego de esperar aquel recurso este creado vamos a ir ahora a acceder a él dándole clic en el botón ir al recurso

Ya accediendo a la página donde nos muestra el recurso que acabamos de generar nos vamos a ir a la sección de data storage en el menú izquierdo vamos a ver una sección que se llama contenedores y vamos a crear un nuevo contenedor dándole clic en el símbolo de más como se muestra en la siguiente imagen

Luego vamos a ir a una ventana que se despliega del lado derecho donde vamos a escribir el nombre del contenedor dónde vamos a almacenar nuestros archivos blog para ello vamos a determinar un nombre en minúscula y que éste sea aceptado por Azure como tal luego en la siguiente sección vamos a ver los niveles de accesos de este contenedor para ello vamos a seleccionar la segunda opción para este artículo como tal de manera de poder darle salida pública a los archivos que más adelante vamos a subir y que puedan ser tanto consumidos tanto leídos como subidos de manera dinámica a través del SDK de Azure, las demás opciones las dejamos como están predeterminadas y hacemos clic en el botón crear

Para asegurarnos que los archivos que vamos a subir se puedan ver de manera correcta a través de una URL de Azure vamos a subir un archivo directamente dándole clic al botón de subir seleccionamos el archivo y luego le damos al botón de subir, luego de subir el archivo vamos a seleccionar el mismo y nos va a aparecer una ventana o una página donde explicara el detalle directamente de todo lo relacionado a ese archivo en sí hay un una propiedad que se llama URL que es donde vamos a copiar ese valor y lo vamos a pegar en el navegador directamente para ver si ya podemos acceder al contenedor en sí como se muestra en las siguientes imágenes

De esta manera ya podemos acceder a nuestros archivos públicamente desde cualquier navegador y ya podemos pasar a generar la aplicación para realizar el consumo ya sea de subida o de descarga de nuestros archivos blob.

Generar la aplicación de consola en visual Studio 2019

Para seguir continuando con el desarrollo de este artículo vamos a abrir visual Studio 2019, luego vamos a ir a la primera ventana de diálogo que nos ofrece visual Studio y vamos a seleccionar la opción de crear un nuevo proyecto como se muestra en la siguiente imagen

Luego nos vamos a ir a la barra de búsqueda y vamos a escribir consola luego esta nos va a filtrar los tipos de aplicaciones soportadas en visual Studio y vamos a seleccionar la primera opción que nos filtra lo cual se llama console application, nótese que existen varios tipos de aplicaciones con el mismo nombre lo único que varía es el tipo del lenguaje y plataforma en la que van a ser configurados y preparados en el entorno de Visual Studio para fines de este ejemplo vamos a trabajar con C# por lo tanto vamos a seleccionar el proyecto correspondiente a la plataforma de desarrollo de C# y .Net Core como se muestra en la siguiente imagen

Le hacemos clic al botón siguiente y nos aparecerá una siguiente ventana en donde vamos a especificar el nombre del proyecto la ubicación del proyecto y vamos a seleccionar nuevamente el botón de siguiente

Luego nos aparecerá información adicional del framework que vamos a utilizar de desarrollo para este caso vamos a seleccionar .Net 5.0 y vamos a hacer clic en el botón crear como se muestra en la siguiente imagen

Hasta este punto ya tenemos configurado el almacenamiento en la nube tenemos los permisos necesarios y ya tenemos nuestra aplicación de consola creada en el entorno de visual Studio 2019.

Instalar y configurar el SDK de Azure

Para instalar el SDK de Azure nuestra solución previamente creada de consola para poder ya sea consumir archivos a través de una descarga, así como colocar o subir estos objetos hacia un contenedor de blogs storage sencillamente lo que hacemos es que damos clic derecho en el proyecto y seleccionamos la opción de manejar los paquetes de NuGet tal como se muestra en la siguiente imagen

Una vez seleccionada la opción nos va a mostrar del lado izquierdo una pestaña donde se va a mostrar el administrador de paquetes de NuGet dónde vamos luego a seleccionar y escribir en la barra de búsqueda de Azure. Storage. Blogs y vamos a seleccionar la primera opción y hacer clic en el botón instalar tal como se muestra en la siguiente imagen

Una vez realizado bien este paso ya podemos trabajar directamente con el SDK de Azure ya solamente nos queda ir de nuevo al portal de Azure y traernos la configuración correspondiente.

Implementación de la solución

Para empezar a consumir el SDK de Azure vamos a realizar un ejercicio de descarga del archivo que probamos al crear el contenedor de blob storage en Azure, luego hacer una subida de una nueva imagen y por último vamos a listar los archivos que ya existen en el contenedor de blob storage para confirmar que existe ya arriba en la nube.

Como primer paso a implementar vayámonos de nuevo al portal de Azure y vamos a ir a la sección del storage account que ya habíamos generado y vamos a ir a la sección de seguridad y hacemos clic en la opción Access keys como se muestra en la siguiente imagen

A continuación, nos abrirá una nueva pagina donde se mostrarán las llaves de acceso y rotación, así como algunos datos relevantes conformes a la seguridad de estas llaves, vamos a hacer clic en la primera opción para mostrar las llaves que a primera vista estarán ocultas y poder copiar la información, para este articulo vamos a copia el Connection String, yo tome la primera llave, pero sin problemas puedes tomar cualquiera de las dos como se muestra a continuación en la siguiente imagen

Esta información del connection string es necesario traérnosla a nuestra aplicación y vamos a crear una variable donde vamos a pegar esta cadena de conexión y también necesitamos el nombre del contenedor que nombramos al crear la cuenta de almacenamiento en este caso le llamamos “demoshugh”, estos dos valores son importantes para poder acceder mediante el SDK de Azure a estos recursos en la nube.

static string storageconnstring = "<Aqui va el connection string>";
static string containerName = "demoshugh";
static string fileToDownload = "azure.png";
static string fileToUpload = "azurelogo.png";
static string filepath = @"C:\DemoFiles\";

además de esos 2 valores crearemos 3 variables mas donde vamos a definir en la variable fileToDownload al nombre del archivo que ya esta arriba en el contenedor de blob, la variable fileToUpload que se refiere al valor del nombre del archivo que esta localmente en el pc y queremos subir a ese contenedor de blob, y por último la variable filePath que es la ruta donde ya esta el archivo a subir y también va a servir para descargar el archivo que tenemos arriba en dicho contenedor de blob.

Se necesitan inicializar los objetos de BlobServiceClient donde vamos a pasar la variable de storageconnstring y también vamos a especificar el nombre del contenedor mediante la función dentro del blobServiceClient llamada GetBlobContainerClient y le pasamos el nombre de la variable containerName

private static void InitializeBlob()
{
   try
   {
     blobServiceClient = new BlobServiceClient(storageconnstring);
     containerClient = blobServiceClient.
                       GetBlobContainerClient(containerName);
   }
   catch (Exception)
   {  
     throw;
   }            
}

Vamos a implementar el método DownloadBlob donde vamos a especificar con el uso del SDK de Azure que archivo queremos descargar y guardar en nuestro pc de la siguiente manera mediante el siguiente fragmento de código fuente a continuación.

private static async Task DownloadBlob()
{
   try
   {                
      BlobClient blobClient = containerClient.GetBlobClient(fileToDownload);
                
      //Download data content of blob and copy to the disc
      using FileStream stream = File.Create(filepath + fileToDownload);
      var result = await blobClient.DownloadToAsync(stream);

      if (result.Status > 200 || result.Status < 300)
      {
         Console.WriteLine("File downloaded sucessfully!");
         return;
      }

      Console.WriteLine("Error to download file!");
      }
   catch (Exception)
   {
      throw;
   }
}

¡Ya creamos el método para descargar un elemento del contenedor de blob, vamos bien no! ahora procederemos a crear el método UploadBlob donde vamos a subir el archivo que tenemos en nuestro equipo para almacenarlo en el contenedor de blob storage como se muestra en el siguiente fragmento de código.

private static async Task UploadBlob()
{
  try
  {                
    BlobClient blobClient = containerClient.
                            GetBlobClient(fileToUpload);
    var result = await blobClient.
                 UploadAsync(filepath + fileToUpload, true);

    if (result.GetRawResponse().Status == 201)
    {
      Console.WriteLine("File uploaded sucessfully!");
      return;
    }

    Console.WriteLine("Error to upload file!");
  }
  catch (Exception)
  {
    throw;
  }
}

Una vez ya creado el método para descargar una imagen, así como también un método para subir una imagen, para asegurar que todos los elementos existen en nuestro contenedor vamos a crear un método para listar u obtener los ítems o archivos guardados en el contenedor mediante el siguiente fragmento de código a continuación.

private static void ListBlobs()
{
  try
  {
    Console.WriteLine($"List of all items in blob {containerName} container");
    Console.WriteLine("------------------------------");
    // Print out all the blob names
    foreach (BlobItem blob in containerClient.GetBlobs())
    {
       Console.WriteLine(blob.Name);
    }
  }
  catch (Exception)
  {
     throw;
  }
}

Ahora juntemos todas las piezas en el punto inicial de la aplicación en el método Main de la aplicación de consola.

        static void Main(string[] args)
        {
            InitializeBlob();
            DownloadBlob().Wait();
            UploadBlob().Wait();
            ListBlobs();
        }

Y de esta manera compilamos y ejecutamos la aplicación, para ver mas detallado todo el proceso es recomendable ejecutar la aplicación aplicando breakpoints en cada método para que veas más detenidamente el flujo de la aplicación.

Conclusión

De esta manera ya como lo vimos en los pasos anteriores podemos demostrar de una manera rápida el aprovechamiento de este SDK de Azure para manejar un contenedor de almacenamiento blob dinámicamente ya sea para subir elementos a ese contenedor como también poder descargar directamente ya sea agregándole una solución de base de datos donde le podríamos guardar la información que esto se genera a través de una ruta o URL  generada en el blob storage como una buena práctica para el manejo de los contenidos multimedia o contenidos de archivos en nuestras aplicaciones.

La nube de Azure posee una gran cantidad de recursos y herramientas que cualquier desarrollador puede sencillamente manejar desde una consola de comandos pasando por un SDK así como también su uso interactivo directamente mediante su portal web, Para una mejor gestión de la información y los recursos que queramos trabajar en la nube ya sea desde una base de datos a una máquina virtual o simplemente un guardado de información relevante para poder utilizarse en cualquiera de nuestras aplicaciones.