Este es el segundo artículo en una serie de tres que muestran cómo disponer de una aplicación sencilla de Flask en PyuthonAnywhere.
- Hola Mundo en PythonAnywhere con Flask
- PythonAnywhere subiendo una aplicación Flask desde GitHub ← (es el post en el que estamos)
- Flask en PythonAnywhere con despliegue continuo usando GitHub
Podemos seguir una serie de pasos para lograr nuestro objetivo.
1. Creamos el repositorio
Lo primero será crear el repositorio en GitHub donde subiremos el código.
En GitHub existe una página que nos explica cómo crear nuestro repositorio.
Pulsamos sobre el botón New.
Creamos el nuevo repositorio.
Hemos llamado a nuestro repositorio flaskmasterfinan y se encuentra en esta dirección:
Al crear el repositorio nuevo hemos creado también un readme donde podremos explicar brevemente el proyecto.
2. Clonamos el repositorio en local
Suponemos que en nuestro PC tenemos ya instalado
git.
Abriendo una terminal en local procedemos a clonar nuestro repositorio. Nos situamos en la carpeta donde tenemos el resto de repositorios en mi caso pyApa que está en Documents.
git clone https://github.com/financieras/flaskmasterfinan.git
La dirección del repositorio acaba en .git y se puede tomar del botón verde Code que muestra la siguiente imagen.
Ya tenemos todos los archivos clonados en local, en una carpeta con el mismo nombre que el repositorio, en nuestro PC.
3. Creamos un entorno virtual
Dentro de la carpeta vamos a crear un entorno virtual para Python. Para ello en la consola dentro de la carpeta del repositorio ejecutaremos una serie de comandos.
Instalar el entorno virtual (virtual environment). Si usamos Python 3 viene con
venv que es la nueva forma de instalar el entorno virtual. Si usas Python 2 debes usar el sistema antiguo con
virtualenv. En nuestro caso como usamos Python3, usaremos
venv que es más sencillo de instalar, demás es el que se recomienda en la instalación de Flask (
Instalación 2.0.x).
Actualmente no es necesario instalar virtualenv ya que existe venv que es el que instalamos en nuestro Ubuntu así:
sudo apt install python3-venv
python3 -m venv venv
La segunda venv es el nombre del entorno virtual, podemos asignar el nombre que queramos.
Activación del entorno virtual
El entorno virtual se activa así:
. venv/bin/activate
Dentro del entorno virtual no es necesario poner python3, si ponemos simplemente python ya se sabe que es la versión 3, tal y como se ve en la imagen anterior.
Instalar Flask
Estando dentro del entorno virtual instalar Flask, así:
pip install Flask
Ya tenemos instalada la última versión de Flask, que en este momento es la 2.0.1.
Desactivación del entorno virtual
Veamos cómo desactivar el entorno virtual. El entorno virtual se desactiva así:
deactivate
Para seguir con nuestro proyecto entraremos nuevamente en el entorno virtual.
4. El código de la aplicación
Dentro de la página de Flask existe una guía rápida para comenzar a crear nuestra aplicación básica, un 'Hola mundo'.
Ahora que tenemos montado nuestro entorno virtual en local podemos abrir Visual Studio Code y desarrollar la aplicación.
Para abrir VSCode podemos, estando en la terminal, en el entorno virtual, escribir:
code .
Poner el punto es importante.
Automáticamente se abrirá nuestro Visual Studio Code.
Creamos el archivo app.py
Comenzamos creando una aplicación sencilla de Flask usando el siguiente código.
app.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return '<p>Hello World</p>'
Creamos un .gitignore
Si miramos nuestro VSCode veremos que existen varios cientos de archivos que deben subirse a GitHub, cuando en realidad únicamente hemos creado el archivo app.py. Lo que está sucediendo es que ha detectado todos los archivos necesarios para montar el entorno virtual y si no hacemos nada los subirá a GitHub al hacer un push.
Para evitar que esto suceda crearemos un archivo .gitignore donde anotamos todos los archivos y carpetas que deseamos que no se suban a GitHub.
Ahora queremos subir el codigo del archivo app.py a GitHub pero no los archivos que nos ha generado crear el entorno virtual. Lo solucionamos creando otro archivo llamado .gitignore el punto es importante.
Dentro de él ponemos el nombre de los archivos que no queremos que se suban a nuestro repositorio.
Creamos el archivo .gitignore en la página:
indicando en el formulario los términos: linux, venv, Flask.
Se obtiene esta página:
Solucionado, ahora únicamente VSCode avisa de dos archivos que se han de subir, que son nuestro app.py y el propio .gitignore.
Creamos un requirements.txt
Una de las ventajas del entorno virtual es que nos puede generar un archivo con todas las dependencias que tiene nuestro proyecto, en este caso Flask, usando el comando:
pip freeze>requirements.txt
Como hemos clonado el repositorio, está conectado con GitHub lo que significa que podemos hacer un commit directamente.
Ya tenemos tres archivos pendientes de subir a GitHub y los subimos abriendo una terminal en VSCode y ejecutando las siguientes líneas en la consola bash.
git add --all
git commit -m "Primera version funcional"
git push
Ya tenemos subida nuestra aplicación básica de Flask a GitHub.
5. La cuenta de PythonAnywhere
Creamos una cuenta gratuita en PyhtonAnyWhere
Nos pedirá rellenar una dirección de correo electrónico y un nombre de usuario que esté disponible. Es importante elegir ese nombre para que sea de nuestro gusto ya que luego se usará en la dirección web. En nuestro caso hemos elegido como nombre de usuario masterfinan que estaba disponible y nadie lo tenía en uso. Esto supone que luego la dirección web que nos den será:
Añadimos una aplicación web
En la pestaña web veremos un botón que nos invita a añadir una aplicación web.
Pulsamos sobre el botón 'Add a new web app'.
Elegir la última versión de Flask disponible.
Cambiamos el Path por el siguiente.
donde
- masterfinan es el usuario de PythoAnywhere que hemos creado
- app.py es el nombre de la aplicación de Flask que hemos creado
Ahora ya podemos ver la pestaña Web de otra forma.
En este momento ya tenemos desplegada una página web, aunque no se trata de la que hemos programado.
Observamos que arriba pone 'Not secure' esto se debe a que es una página de tipo http y no https. Para conseguir que sea de tipo https debemos activar en la seguridad esta opción.
Ahora al solicitar la página web con https veremos que ya no vemos la advertencia de seguridad.
Configuración de la página web servida
Dentro de la pestaña Web tenemos una línea que dice 'WSGI configuration file: /var/www/masterfinan_pythonanywhere_com_wsgi.py'
Pulsamos sobre el enlace de esa ruta y nos lleva al siguiente archivo.
Vemos que la ruta (path) está correcta y que el nombre de la aplicación es app.
Todo esto está correcto, y por el contrario si recargamos la página esta no se actualiza con la web que nosotros hemos programado, ¿a qué se debe esto?
Podemos comprobar en la pestaña 'Files' los archivos disponibles en este momento.
Si editamos el actual archivo app.py vemos el siguiente código.
Esto explica el motivo por el que no estamos viendo nuestra página de Flask sino una página de Flask que nos proporciona PythonAnywhere por defecto.
La razón por la que no vemos nuestra página se debe a que aún no la hemos subido a PythonAnywhere, de momento solo la tenemos subida a GitHub.
6. Clonado desde PythoAnywhere
Para solucionar el inconveniente anterior lo que haremos es clonar el proyecto desde PythonAnywhere usando la terminal bash que nos proporcionan.
Abrimos una consola bash en PythonAnywhere
Vamos a la pestaña 'Consoles'.
Abrimos una consola Bash.
Miramos los archivos que tenemos.
Clonamos nuestro repositorio
git clone https://github.com/financieras/flaskmasterfinan.git
7. Configuración ruta Web
Source code
Vamos a la pestaña Web y miramos en 'Source code' y cambiamos el path para que sea:
/home/masterfinan/flaskmasterfinan
Observe que hemos añadido al final la carpeta flaskmasterfinan.
WSGI configuration file
Entramos dentro del archivo:
/var/www/masterfinan_pythonanywhere_com_wsgi.py
Editamos el archivo para que contenga en la línea 11 la ruta de la carpeta del repositorio:
project_home = '/home/masterfinan/flaskmasterfinan'
Observe que hemos añadido al final la carpeta flaskmasterfinan con el nombre de nuestro repositorio que se ha creado al hacer el clonado.
En la línea 16 aparece dos veces la palabra app, veamos su significado.
- Primer app. Hace referencia al nombre de nuestro archivo app.py que hemos subido al hacer el clonado. Si nuestro archivo no se llamara app.py deberíamos poner aquí el nombre que hubieramos dado a nuestro archivo, sin poner la extensión .py.
- Segundo app. Hace referencia al objeto app = Flask(__name__) que aparece en la línea 5 de nuestro archivo app.py. Si el objeto se hubiera llamado de otra forma deberíamos indicar ese nombre en nuestro fichero de configuración WSGI.
8. Recargar y mostrar la página
En la pestaña Web pulsamos el botón verde denominado 'Reload'.
Finalmente, pulsamos sobre el enlace que apunta a nuestra página:
¡Lo hemos conseguido!
Ya está disponible nuestra página web básica programada en Flask.
Truco
Para recargar una página web sin memoria cache pulsamos simultáneamente las dos teclas:
Control + F5
9. Modificando la Web
¿Qué hacer si queremos modificar nuestra página web?
Vamos a realizar algún pequeño cambio en nuestro código, en local, en nuestro Visual Studio Code, cambiando ligeramente lo que vamos a mostrar en página web.
Editamos el archivo app.py
Modificamos ligeramente nuestro código.
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return '<h1>Hola mundo</h1><p>Desde Flask</p>'
Hemos cambiado únicamente la última línea de código.
Subinos el cambio a GitHub
Lo subimos abriendo una terminal en VSCode y ejecutando las siguientes líneas en la consola bash. Tenemos que estar metidos en el entorno virtual.
git add --all
git commit -m "Cambiando el h1 y el p"
git push
Ahora los cambios ha llegado hasta GitHub pero aún no han llegado hasta PythonAnywhere.
Actualizamos los cambios en PythonAnyWhere
Para llevar los cambios desde GitHub, nuestra nube, hasta PythonAnywhere debemos usar la consola bash de éste y hacer un git pull.
Ya han llegado las modificaciones a PythoAnywhere.
Recargamos la página
Desde la pestaña Web puedes pulsar el botón verde de 'Reload' para recargar la página o puede que esto no sea necesario y la página web se sirva ya con las actualizaciones nada más recargarla.
Ya hemos completado el proceso. Hemos conseguido subir una aplicación sencilla programada en Flask desde nuestro Visual Studio Code, en local, hasta GitHub y finalmente desplegada en PythonAnywhere.
¿Cuál sería el siguiente paso?
Nos gustaría que se pudiera hacer despliegue contínuo (continuous deployment) de forma que cambiando nuestra aplicación en Visual Studio Code se subiera directamente a PythonAnywhere y se mostrará en página web sin necesidad de realizar tantos pasos. Esto lo atacaremos en un post posterior. Poco a poco y siempre avanzando.
