Python + Flask + PythonAnywhere : Partie 6 - Héberger FlaskR chez PythonAnywhere - MCHobby

Cet article fait suite au précédent article "Python + Flask + PythonAnywhere : Partie 5 - Présentation de PythonAnywhere"

Cette série d'articles se penche sur:

L'évaluation d'un projet web basé sur le Micro FrameWork Flask écrit en Python.
Préparation d'un environnement sous Windows (Python et Flask)
Mise-en-ligne et configuration du projet chez l'hébergeur PythonAnywhere.com (qui fait de l'hébergement autour de Python).

Cette fois, nous allons prendre les sources de FlaskR (voir article partie 4)

L'arboresence de FlaskR lorsqu'il était utilisé sur notre PC

Et faire en sorte de les installer chez PythonAnywhere

L'arborescence de FlaskR tel qu'installé chez PythonAnywhere

Ouvrir un compte chez PythonAnywhere

La fin de notre article "Python + Flask + PythonAnywhere : Partie 5 - Présentation de PythonAnywhere" montrait comment ouvrir un compte débutant gratuit.

Cliquez ici pour accéder à PythonAnywhere et créer votre compte. Activez le depuis l'émail de confirmation.

Nous avons créé un compte gnomgnom uniquement utilisé pour la création de cet article.

Création d'un compte de test.

Les sources
Pour rappel, les source du projet FlaskR sont disponible dans l'archive blogr.zip mis à disposition sur le site de MCHobby.
Copiez les fichiers proposés dans l'archive dans le répertoire c:\python\blogr\

N'hésitez pas à consulter la partie 4 de cette série d'article pour vous mettre plus à l'aise.

Création d'un site Flask
Nous voici connecté sur l'interface d'administration de PythonAnywhere.
Le plus simple, c'est de demander à PythonAnywhere de créer notre site Flask.

Rendez-vous dans le volet "WEB" et cliquez sur le bouton "Add New App".

Ajouter une application Web sur PythonAnywhere

Cela nous affiche un petit message nous indiquant que l'application sera disponible sous le nom de domaine gnomgnom.pythonanywhere.com

Affichage du nom de domaine de notre application

Cliquez simplement sur le bouton [Next]
Nous avons ici le choix de l'application... nous allons sélectionner l'option Flask


Créer une WebApp de type Flask

Pressez ensuite le bouton [Next]
Cette fois, on nous demande de sélectionner la version de Python à utiliser.

Etant donné que nous avons testé FlaskR sur notre PC en Python 2.7, nous allons sélectionner un déploiement en Python 2.7

Deploiement de la WebApp en Python 2.7
(comme la version de développement)

Pressez [Next], PythonAnywhere nous affiche un message de confirmation.

Ce dernier nous indique que l'application Web sera stockée sur le serveur à l'emplacement suivant:

/home/gnomgnom/mysite/flask_app.py

Si nous inspectons la partie WEB de l'interface d'administration, nous pouvons y voir les détails de notre configuration.

Détails de la configuration de l'Application Web gnomgnom

Comme également visible sur cet écran, nous pouvons voir que le code source de l'application est localisé dans le répertoire:

/home/gnomgnom/mysite

Utilisons donc le navigateur de fichier (le volet "Files" pour allez fureter).
Cliquons d'abord sur "mysite" pour accéder aux fichiers du répertoire.

Nous pouvons clairement identifier le fichier flask_app.py créé pour nous.

Nous allons cliquer sur le liens d'édition pour voir le contenu du fichier.

Liste des fichiers de notre site.

Contenu du fichier flask_app.py

Juste pour le fun... prenons le temps de modifier le texte...
Nous obtenons alors le contenu suivant:

modification du code de l'application démo

Pressez alors sur les boutons:

[Save] - ce qui sauve vos modifications dans le fichier.
[Reload gnomgnom.pythonanywhere.com] - ce qui recharge le site

Note: cliquez sur liens "dashboard" (tableau de bord) en haut à droite pour sortir de l'écran d'édition.

Voyons donc ce que cela donne dans notre navigateur internet.
Ouvrez votre navigateur préféré et naviguer vers l'adresse de votre application web (gnomgnom.pythonanywhere.com dans notre cas).

Résultat de l'application Flask_app.py - application de démonstration

Installons FlaskR
Maintenant que nous avons fait joujou avec l'application web de démo, nous allons installer les fichiers de l'application FlaskR (voyez le début de l'article pour les références).

Nous allons nous rendre dans le volet "Files" puis cliquez sur le liens "mysite".
Dans "mysite", nous allons créer les trois répertoires suivant:

db
static
templates

Note: utilisez le zone d'encodage "Enter a new directory name" et le bouton [New]

Nous allons ensuite utiliser la fonctionnalité de téléchargement de fichiers (zone "upload a file") pour téléverser les différents fichiers du projets FlaskR dans les répertoires respectif.
C'est un peu ennuyant comme procédé... mais c'est aussi une restriction découlant de la gratuité

Au final, nous devons avoir une arborescence de fichiers similaire à ceci:

Notez la structure des répertoire et la présence de flaskr.py dans mysite

Le répertoire DB est chargé avec flaskr.db et le fichier sql

Il est important de noter ici que le chemin d'access complet de flaskr.db est

/home/gnomgnom/mysite/db/flaskr.db

Ajout de la feuille de style dans le répertoire statix

Il est important de noter ici que le chemin d'accès au fichier statiques (static) est

/home/gnomgnom/mysite/static/

Les templates Flask pour notre petit site.

Accéder à la DB
Le premier problème de flaskr.py va être de retrouver le fichier db sur le serveur de l'hébergeur. Nous ne sommes plus sur notre machine locale et le chemin d'accès au fichier DB est codé en dur dans le programme.

Nous allons donc naviguer jusque dans le répertoire mysite et cliquer sur l'icone permettant de modifier le contenu du fichier flaskr.py

Editer le fichier flaskr.py

Nous allons éditer le contenu du fichier flaskr.py pour remplacer la ligne suivante:

DATABASE = 'c:/python/blogr/db/flaskr.db'

avec le nouveau chemin d'accès à la DB

DATABASE = '/home/gnomgnom/mysite/db/flaskr.db'

Démarrer l'application Flaskr
Pour le moment, seul l'application flask_app.py demarre lorsque vous appeler http://gnomgnom.pythonanywhere.com

Mais Il faudrait démarrer l'application flaskr.py à la place.

Cela se règle dans le fichier xxx_wsgi.py de la configuration web.

Allez dans le volet "WEB", sur votre application Web et cliquer sur le lien correspondant à "WSGI configuration file:"... cela ouvre l'éditeur et vous permet de modifier le contenu du fichier.

Editer le fichier de configuration WSGI

Contenu du fichier xx_WSGI.py doit ressembler à ceci.

Contenu du fichier de configuration xxx_WSGI.py

Nous allons modifier la ligne:

from flask_app import app as application

par ceci:

from flaskr import app as application

Puis sauvez le fichier en cliquant sur le bouton [SAVE].

Revenez au volet "WEB" (truc & astuce: cliquez d'abord sur le liens "dashboard" en haut à droite pour revenir au tableau de bord)

Et cette fois, cliquer sur le bouton [Reload gnomgnom.pythonanywhere.com]

Recharger le site gnomgnom

Tester l'installation
Ouvrons un navigateur internet et voyons ce à quoi nous sommes arrivés.
Allons joyeusement naviguer jusqu'à l'adresse de notre application Web.

et Tadaa...

Résultat de l'installation

Nous pouvons néanmoins constater que la DB contient déjà des données.
Ce qui serait bien, c'est de la réinitialiser de la même façon que dans notre environnement de développement (en utilisant la fonction init_db(), voyez les parties précédentes de l'article).

Réinitialiser la DB
La DB sur que nous venons de publier sur le site est préinitialisée.
Nous voudrions en créer une nouvelle... flambant neuve.
Nous allons utiliser le même procédé que celui expliqué dans la partie 4 (dans le cadre de l'utilisation dans un environnement de développement) mais cette fois, nous l'appliquerons sur le serveur de PythonAnywhere

Cette fois, nous allons utiliser la console bash de PythonAnywhere

Revenez au "dashboard" (tableau de bord, lien en haut à droit de l'écran) et cliquez sur le volet "Consoles".
Cliquez ensuite sur le Bash pour démarrer une console Bash.

Ouverture d'une console Bash

Nous avons déjà identifié ci-dessus que le fichier DB est localisé à l'emplacement /home/gnomgnom/mysite/db/flaskr.db

Nous allons donc renommer ce fichier DB (plutôt que l'effacer) et en recréer un nouveau

Saisissons les commandes suivantes:

cd /home/gnomgnom/mysite/db
mv flaskr.db flaskr-db.bak
ls -l

Nous pouvons constater que notre db est bien renommé.

Il est préférable de nous déplacer dans le répertoire mysite car nous allons devoir faire un import flaskr en python interactif.

Saisissez la commande suivante:

cd /home/gnomgnom/mysite
ls -l

Le ls -l nous apprends que nous sommes bien dans le bon répertorie puisque nous pouvons voir le fichier flaskr.py

Démarrons maintenant une session python interactive. Saissisez simplement la commande

python

Le ">>>" nous indique que nous sommes bien en Python (version 2.7 d'ailleurs).

Se placer dans le répertoire de flaskr.py puis démarrer une session Python interactive

Tout comme dans la partie 4 de notre article, nous allons maintenant charger le fichier flaskr.py et appeler la fonction init_db().
Voyez la partie 4 pour plus de détail sur cet appel de init_db()

Voici donc les instructions à utiliser:

from flaskr import init_db
init_db()
exit()

Le dernier exit() permet de sortir du mode interactif de python.

Les commandes python permettant de recréer le fichier DB

Un petit ls /home/gnomgnom/mysite/db permet de s'assurer que le fichier est bien recréé.

Allons donc voir sur internet ce qu'il en est...

La DB est effectivement vide.

Voilà, nous pouvons constater que la DB est maintenant vide.
Tout comme dans la partie 4, les énormités en orthographes sont toujours là :-)

J'ai des erreurs, je n'arrive pas à m'en sortir
Voici quelques pistes pour vous aider.

PythonAnywhere fonctionne sous Linux. Cela signifie que les nom de fichiers sont case-sensitives (sensible à la case) alors que sous Windows cela à relativement peu d'importance.
Soyez très scrupuleux sur le nom des répertoires et des différents chemins utilisés sur PythonAnywere en suivant ce tutoriel. Il va de soit que toutes les occurrences de gnomgnom doivent être remplacés par votre propre nom d'utilisateur PythonAnywhere.
Avez-vous modifié le code source flaskr.py pour remplacer le chemin d'accès au fichier flaskr.db ? sinonvoyez plus haut dans cet article.
Consultez les fichiers de log de votre application WEB... ces derniers peuvent contenir des information très utiles (voyez la capture d'écran ci-dessous).

Accéder au logs de votre application Web

Convaincu alors aidez-nous
Cette série d'article et cette démo vous a convaincu?
Vous avez apprécié nos efforts de documentation?
Alors n'hésitez pas à le faire savoir après de PythonAnywhere en utilisant ce liens suivant pour créer votre compte.

Autres ressources
Voici quelques ressources utiles pour faire joujou sur PythonAnywhere