Despliega tu primer aplicación web Flask en Azure paso a paso.

Ángel Ramírez
NinjaCom
Published in
6 min readApr 25, 2020
Azure App Service tiene múltiples servicios para postear distintos tipos de aplicaciones.

Con este artículo, aprenderás a desplegar una sencilla aplicación web de Flask, que podrías tomar como plantilla y adecuarla a todas tus necesidades en Azure App Service, de Microsoft. También conectaremos un repo de Github para que presumas de usar Entrega Continua o CI (Continous Integration), una parte muy importante de las DevOps.

Ya lo más complicado lo has pasado… el desarrollar tu aplicación web con Python 3 y Flask. Lo que sigue no debería ser tan complicado, sin embargo, si no se tienen nociones en tecnologías de Cloud Computing, te será casi igual de complicado el sólo hecho de publicarla.

Dentro de todos los servicios que ofrece Azure, con el que podríamos empezar a explorar el mundo del Cloud Computing es con App Service. El cuál nos permitirá publicar y correr una aplicación de forma gratuita!

Además que, Azure te brinda un crédito los primeros 30 días al registrarte para que puedas gastarlo en cualquiera de sus productos. Pero bueno, para que no suene a comercial, comencemos.

Antes de empezar…

Vamos a necesitar que tengas varias cosillas para poder continuar:

  1. Una suscripción activa en Azure
  2. Azure Cli instalada en tu computadora. Descárgalo o ve como instalarlo aquí.
  3. Una cuenta activa en Github (opcional)

Explorando el repo y preparando la aplicación…

Ahora sí, comencemos. Lo primero que deberás hacer es hacer una bifurcación (fork) o clonarte este repositorio:

Ese repositorio será el template de tu aplicación en Azure. Podrías ejecutarlo en tu computadora si ejecutas los siguientes comandos (Entornos linux):

Para entornos Windows CMD:

Cabe señalar que dentro del repositorio hay archivos importantes:

  • requirements.txt : En este archivo deberemos de colocar todas las librerías que estará ocupando nuestra aplicación de Flask. Es importante que veas incluyas el nombre exacto de la librería y la versión que estarás empleando en tu app. Por ejemplo:

Estos nombres y versiones las podrás obtener si corres en tu consola o en tu entorno virtual el comando:

pip3 freeze > requirements.txt

NOTA: Tu aplicación no funcionará si no pones todas las librerías que ocupas (incluyendo Flask) en

  • application.py : Este archivo es el archivo de código fuente de tu aplicación de Flask. Es recomendable que mantengas este nombre para tu aplicación. En caso contrario, deberás realizar ajustes extras con el Azure cli.

De forma predeterminada, Azure App Service buscará el archivo app.py o application.py para servir la aplicación…

Desplegando nuestra aplicación…

Una vez que has vaciado un poco de tu código en application.py y has puesto las librerías que necesitas en requirements.txt, vamos a desplegarlo a Azure.

Para ello, ubica tu consola en la ruta en donde clonaste el repositorio template, al fin emplearemos el Azure cli.

Una vez ubicada tu consola, ejecutaremos los siguientes comandos:

Inicio de sesión en Azure cli mediante el navegador.
$ az login

Lo que hará esto es abrirnos una ventana de nuestro navegador predeterminado para que iniciemos sesión en Azure.

Pondremos nuestra cuenta de Azure e iniciaremos sesión.

Lo que sucederá si el login es exitoso, será el cierre de la ventana del navegador y pasará nuestras credenciales al Azure cli.

Luego, desplegaremos nuestro archivo de ejemplo. En la terminal ejecuta el comando:

az webapp up --sku F1 -n <app-name>

Donde:

  • F1 corresponde al “free tier” que se te va a facturar. Te recomiendo que experimentes primero con esta modalidad, a menos que ya quieras empezar a pagar tu consumo con Microsoft. Al final, todo dependerá de si se trata de la publicación de tu aplicación para probarla o si ya la quieres poner completamente en un ambiente de producción. Para revisar las tarifas de cobro de Microsoft, da click aquí.
  • <app-name> será el nombre con el que tu aplicación se identificará en Azure, por ende, no podrás emplear alguno que ya esté en uso.

Por ejemplo:

az webapp up --sku F1 -n example-azure-app

De forma predeterminada Azure cli determinará en dónde convendrá desplegar tu aplicación dependiendo de la ubicación aproximada de tu dirección IP. Si deseas cambiar en qué región se almacenará y correrá tu aplicación puedes agregar la bandera -l <location-name> al comando anterior. Consulta aquí la lista de locaciones soportadas.

Luego de ejecugar el comando az webapp up, deberás observar una pantalla parecida a la siguiente.

Resultado de la ejecución del comando az webapp up

Y voila! Tu aplicación habrá sido publicada y podrás consultarla en la dirección que te indica el JSON de salida en el campo “URL”. En este caso, la aplicación de ejemplo para este articulo se podría consumir en la dirección: “http://example-azure-app.azurewebsites.net”.

Nótese que… la dirección de nuestra aplicación toma de forma predeterminada el parámetro <app-name> del comando az webapp up. Quizá debas pensar de mejor manera qué nombre le pondras a tu aplicación cuando ejecutes el comando az webapp up.

Aplicación desplegada en Azure App Service Web Apps.

Y bien, el trabajo podría terminar aquí, sin embargo, cada que necesites actualizar el código de tu aplicación y volverlo a publicar deberás ejecutar el comando az webapp up usando el azure cli, para que se refresque el código que sirve tu aplicación en Azure.

Conectándo nuestra aplicación de Azure a Github para tener Continuous Integration

Este paso es opcional, pero te facilitará las cosas si tienes que seguir cambiando tu aplicación de Flask y publicarla sin mucho esfuerzo.

Para ello debes tener el código de tu aplicación de Flask en un repositorio de Github, de forma parecida al repo del template de ejemplo.

Esto es más configuración, que programación. (Como muchas de las cosas en las DevOps)

  1. Accede a tu consola de Azure en la dirección: https://portal.azure.com/
  2. Dirígete hacia el servicio App Services
Página de inicio de Azure.

3. Selecciona la aplicación que acabas de desplegar. En mi caso del ejemplo, es la aplicación llamada “example-azure-app”.

4. Una vez dentro de la aplicación, navegando en el panel izquierdo, nos dirigiremos al “Centro de implementación”.

5. Dentro del centro de implementación, nos dará varias opciones para conectar nuestra aplicación. En este caso lo haremos con Github, que recordemos, al día de hoy, también es de Microsoft.

Centro de implementación de nuestra aplicación en App Service

6. Lo que resta es seguir los pasos que Azure nos va indicando para conectarnos al servicio de repositorios de Github.

Si es la primera vez que lo hacemos, nos solicitará permiso de acceso a nuestra cuenta de Github, nos logearemos y luego seleccionaremos el repositorio, la rama que posteará Azure cuando sufra algún cambio.

Y nuevamente, ¡Voila!

Cada que hagamos un push o merge a la rama que seleccionamos conectar, se actualizará nuestra aplicación de forma automática.

En este caso, modifiqué el archivo application.py, se guardó, hizo commit y push a master y se publicó de forma automática a nuestra aplicación.

Cambios reflejados en nuestra aplicación.

Podremos constatar que se hizo de forma automática en el centro de implementación.

Bitácora de cambios adquiridos de Githu por App Services.

Vaya, si te quieres volver un experto en DevOps, sería conveniente que revises el siguiente artículo:

Y bien, esto es todo por el momento, ya puedes presumir que sabes publicar aplicaciones de Flask en Azure :D! Pronto publicaré nuevas guías y/o tutoriales para que sigamos aprendiendo juntos!

“La tecnología por sí sola no basta. También tenemos que poner el corazón” — Jane Goodall

Happy coding!

--

--

Ángel Ramírez
NinjaCom
Editor for

Ingeniero en Sistemas Computacionales. Fundador de la Comunidad NinjaCom.