Concevez un site avec Flask

8 heures
Moyenne

Licence

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 25/10/2024

Déployez efficacement sur le cloud avec Heroku

Notre site est fin prêt à être mis en ligne ! Mais qu'est-ce que cela veut dire réellement ?

Actuellement, votre code est sur votre ordinateur. Personne, hormis vous, ne peut y accéder. C'est ce que nous appelons un environnement de développement car votre machine ne sert qu'à créer et modifier le code du programme.

Afin de rendre ce dernier populaire, vous voudrez certainement le mettre sur Internet et le rendre accessible à une adresse dont le monde entier se souviendra sur des générations. L'endroit où se trouveront votre code et vos données s'appelle un environnement de production.

Pourquoi les distinguer ? La configuration n'est-elle pas la même ?

Hé bien non, ma brave dame (ou mon brave damoiseau). Votre ordinateur possède des caractéristiques particulières : les logiciels que vous y avez installés, vos paramètres personnels, le système d'exploitation, la mémoire vive... sans parler de ce magnifique fond d'écran représentant votre chien quand il n'avait encore que quatre mois.

C'est pourquoi une mise en production se prépare : achat d'un nom de domaine, d'un espace serveur, configuration du projet... Nous passons tout cela en revue dans ce chapitre.

Préparez une mise en production

La mise en production représente le moment auquel vous migrez le code de développement en production. Concrètement, vous déplacez les fichiers vers un serveur relié à Internet.

Qu'est-ce qu'un serveur ?

Un serveur est, selon Wikipedia, un dispositif informatique matériel ou logiciel qui offre des services, tels que l'accès à Internet, à différents clients. De manière très sommaire, il s'agit d'un ordinateur avec lequel vous pouvez interagir via Internet et sur lequel vous pouvez installer différents logiciels.

Vous pouvez louer un espace serveur via des fournisseurs tels que Gandi ou OVH. De la même manière que si vous louiez un ordinateur, il vous faudrait le configurer pour y installer les logiciels nécessaires à votre projet : Python, serveur web, environnement virtuel, PIP... Cela peut être assez long et fastidieux mais a l'avantage de vous laisser libre de la configuration.

Il y a quelques années, des entreprises innovantes ont proposé une nouvelle offre : les platforms as a service (plateformes en tant que service). Leur objectif est de donner une plateforme de production clés en main. Il n'est alors plus nécessaire de configurer le serveur de production en détail : la plateforme s'en occupe.

Comment indiquer à la plateforme les éléments à installer sur le serveur ? Cela dépend des projets et des entreprises. Dans ce chapitre nous verrons comment utiliser Heroku, une des plateformes en tant que service les plus populaires et qui a également l'avantage d'offrir un plan gratuit.

Créez un nouveau projet sur Heroku

Si vous n'en avez pas déjà un, créez-vous un compte à cette adresse. Puis rendez-vous sur le tableau de bord.

Ce dernier affiche la liste de vos applications. Pour le moment vous n'en avez aucune mais, patience, bientôt vous verrez une nouvelle ligne apparaître.

Installez Heroku CLI (Command Line Interface), l'outil en ligne de commande qui vous permet d'interagir avec les serveurs d'Heroku directement dans votre console.

Surveillez le projet avec Git

Heroku utilise Git pour surveiller les fichiers. Si ce n'est pas déjà fait, initialisez un dépôt git :

$ git init

Créez un fichier .gitignore afin de ne pas envoyer les fichiers inutiles :

.gitignore

*.pyc
__pycache__
env/
app.db
fbapp/tests/*.db
geckodriver.log
.cache/

Vérifiez les fichiers actuellement surveillés :

$ git status

Puis ajoutez les fichiers au prochain envoi :

$ git add nomdufichier
$ git commit -m "launchingtoproduction"

Créez une application Heroku

Créer une application Heroku est très simple : tapez heroku create nomdevotreapplication.

$ heroku create flask-test-ultime
Creating ⬢ flask-test-ultime... done
https://flask-test-ultime.herokuapp.com/ | https://git.heroku.com/flask-test-ultime.git

Tapez de nouveau heroku apps --all. Vous voyez désormais votre application !

Configurez une nouvelle base de données de production

Vous souvenez-vous des différentes bases de données ? Notre projet utilise actuellement SQLite3, un système de gestion de bases de données parfait pour les projets qui n'ont pas besoin de faire beaucoup d'écriture ou pour développer.

Mais nous ne pourrons continuer à l'utiliser sur Heroku.

Ajoutez un service sur Heroku

Heroku propose, dans sa version gratuite, le SGBD PostgreSQL. Indiquez à Heroku que vous souhaitez l'utiliser en exécutant la commande suivante :

$ heroku addons:add heroku-postgresql:hobby-dev
Creating heroku-postgresql:hobby-dev on ⬢ flask-test-ultime... free
Database has been created and is available
 ! This database is empty. If upgrading, you can transfer
 ! data from another database with pg:copy
Created postgresql-round-63865 as DATABASE_URL
Use heroku addons:docs heroku-postgresql to view documentation

Une nouvelle base de données a été créée sur le serveur et Heroku vous en indique d'ailleurs le nom : postgresql-round-63865.

Modifiez le fichier `config.py`

Il vous faut désormais en indiquer le chemin dans le fichier config.py. Sans chemin, comment Flask trouvera-t-il la base de données ?

Rassurez-vous, il n'y a pas beaucoup de manipulations à faire. D'ailleurs, ce chemin peut paraître un peu magique : il est gardé précieusement dans une variable d'environnement.

Qu'est-ce qu'une variable d'environnement ?

Une variable d'environnement permet à l'utilisateur d'un programme de passer des variables à ce dernier sans en modifier le code.

Lorsque vous avez lancé le processus de création de base de données, Heroku a enregistré le chemin de cette dernière dans la variable d'environnement DATABASE_URL. Tapez heroku config dans votre console pour la voir :

heroku config
=== flask-test-ultime Config Vars
DATABASE_URL: postgres://ajmwflxktovfnn:pleindechiffresetdelettres@ec2-23-23-86-179.compute-1.amazonaws.com:5432/d7ki8hbemu00vg

Utilisez cette variable d'environnement dans le fichier de configuration. Plus précisément, indiquez à Flask d'utiliser un système de gestion de bases de données différent en développement et en production.

Comment ? En vérifiant si la variable d'environnement DATABASE_URL existe !

config.py

...
# Database initialization
if os.environ.get('DATABASE_URL') is None:
    basedir = os.path.abspath(os.path.dirname(__file__))
    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db')
else:
    SQLALCHEMY_DATABASE_URI = os.environ['DATABASE_URL']

Ajoutez une librairie

Afin d'utiliser PostgreSQL, installez la librairie psycopg2 via PIP :

$ pip install psycopg2

Envoyez l'application sur le serveur

La base de données est créée et le serveur de production est prêt : qu'attendons-nous ?

Actuellement, Heroku ne sait pas comment lancer l'application : quel langage utilise-t-elle ? Quelles librairies doit-il installer ? Quelle est la commande à lancer au démarrage ? Finissez la configuration en indiquant tout cela.

Heroku reconnaît automatiquement le langage utilisé par un projet donc vous n'avez pas à lui indiquer. Concernant le reste, comment fait-il ? Heroku cherche deux documents :

Procfile : donne les instructions à exécuter au démarrage de l'application.
requirements.txt : liste les librairies à installer.

Instructions à exécuter au démarrage

Créez un fichier Procfile et écrivez les instructions suivantes :

web: gunicorn fbapp:app
init: FLASK_APP=run.py flask init_db

La première ligne, web, demande à Heroku d'utiliser le serveur web gunicorn.

La deuxième exécute la commande de création de base de données si vous tapez heroku run init.

Afin d'utiliser Gunicorn, vous devez préalablement l'installer :

pip install gunicorn

Librairies à installer

Utilisez PIP pour lister toutes les librairies du projet en exécutant la commande suivante :

pip freeze > requirements.txt

Celle-ci crée le fichier passé en argument et y inscrit les librairies installées dans l'environnement virtuel activé.

Envoi sur Heroku

Enfin, quand tout est prêt, vous n'avez plus qu'à envoyer votre projet sur les serveurs d'Heroku !

Vous le savez désormais : Heroku s'appuie sur Git. Une mise en production est aussi simple qu'un push sur GitHub !

$ git add nomdufichier
$ git commit -m "pushing to production"
$ git push heroku master

Lorsque c'est fini, lancez la commande heroku run init pour ajouter du contenu dans la base de données.

Allez voir votre site : ça fonctionne !

Effectuez les derniers réglages sur Facebook

Le site fonctionne... presque ! Si vous cliquez sur "Continuer avec Facebook", vous remarquerez que le formulaire d'authentification ne s'affiche pas. Pourquoi ? Car votre site est désormais disponible via un nouveau nom de domaine qui n'est pas encore autorisé !

Revenez sur la plateforme pour développeurs de Facebook.

Cliquez sur "Paramètres > Général". Dans le champ "URL du site", indiquez l'URL complète de votre application. Par exemple : http://le-test-ultime.hello-birds.com.

Puis modifiez le fichier config.py pour qu'il contienne les identifiants Facebook. Copiez l'identifiant de votre application de production et collez-le comme suit :