Mettre son site Flask en ligne

Pour mettre notre site programmé en Flask, en ligne sur le web, gratuitement, nous allons utiliser render. 

Sur cette page tu trouveras :

PrƩparer son projet pour le dƩploiement

Pour que ton projet Python (comme une app Flask) soit compris, installƩ et lancƩ correctement sur un serveur ou une plateforme comme Render, nous allons avoir besoin de fichiers de configuration, Ơ la racine de notre projet.

CrĆ©ation d’un fichier requirements.txt

  • CrĆ©e un fichier requirements.txt Ć  la racine de ton projet
    • Ce fichier dit Ć  l’hĆ©bergeur : « Voici tout ce dont mon projet a besoin pour fonctionner.Ā Ā»
  • Il doit contenir toutes les bibliothĆØques que tu as installĆ©es via la commande « pip installĀ Ā» et les librairies que tu utilises comme requests, jinja2, etc..
  • Tu dois ajouter gunicorn qui nous aidera Ć  exĆ©cuter l’app Ć  distance
  • Voici, Ć  droite, un exemple de configuration minimale pour ce fichier

CrĆ©ation d’un fichier Procfile (sans extension)

  • CrĆ©e un fichier Procfile Ć  la racine de ton projet (avec un P majuscule et sans extension).
    • Ce fichier indique Ć  Render comment lancer ton appli
  •  Il contient une seule ligne de code :
    • web: gunicorn main:app

Cette igne signifie : ā€œdĆ©marre un serveur web avec gunicorn, et lance l’objet app qui est dans le fichier main.py.ā€

Pour bien écrire ton code, tu dois comprendre ce que représente « main » et « app ». 

  • Mon fichier s’appelle main.py, c’est mon fichier permettant d’exĆ©cuter mon appli web.Ā 
  • app est le nom de mon appli web.Ā 

Si ton fichier, ou le nom de ton appli est diffƩrent, tu dois le modifier par rapport Ơ ce code exemple.

Attention : Fichier sensible !Ā 

Dernier point : ce fichier doit ĆŖtre scrupuleusement bien Ć©crit. Il ne dois pas y avoir d’espace derriĆØre ton code, ou de saut de ligne. Fais bien attention Ć  cela, sinon render te mettra un Ć©chec a l’exĆ©cution.

Mettre son projet sur githubĀ 

La maniĆØre la plus simple de dĆ©ployer ton site, va ĆŖtre de l’hĆ©berger sur ton github. Si tu as dĆ©jĆ  ton projet sur github, tu peux passer Ć  l’Ć©tape suivante !

Si tu ne l’as pas encore fait, et ne l’utilises pas pendant tes ateliers, tuĀ n’es pas obligĆ© de maitriser « tout github via vscodeĀ Ā».Ā Tu peux trĆØs bien crĆ©er ton repo dans github manuellement, en crĆ©ant le projet sur github, et en uplodant tes fichiers depuis ton ordinateur.Ā 

Voici une mĆ©thode rapide : 

CrĆ©e ton compte sur github.com (si ce n’est pas dĆ©jĆ  fait)

Puis clique sur le bouton vert « new » pour créer un nouveau repo (repo = projet)

Donne un nom Ć  ton repo (ca servira d’url)

Mets le en public (pour que render ait accĆØs)

Et ajoute un Readme (mĆŖme si tu ne t’en sers pas, ca permet une bonne ossature et Ć©vite souvent des problĆØmes ultĆ©rieurs)

Puis clique en bas sur « create repository »

Cela t’ouvre la page de ton projet. Tu vois que tu es sur la branche main, et tu peux cliquer sur Add file et choisir Upload files.Ā 

Il te suffit maintenant d’uploader tes fichiers Ć  la racine !Ā 

Important : n’uploade pas un dossier entier contenant ton projet. Tu dois ouvrir ton dossier de projet sur ton ordi et sĆ©lectionner uniquement son contenu :Ā main.py, templates/, static/, requirements.txt, Procfile, etc.

Une fois tous tes fichiers et dossiers bien tĆ©lĆ©chargĆ©s sur github, n’oublie pas d’aller en bas de cette page et de cliquer sur « Commit changesĀ Ā» pour sauvegarder ton upload !

Ā 

Ā 

Tout est prĆŖt pour mettre ton site en ligne !

DƩployer un site en ligne

CrƩer un compte sur render (liƩ Ơ ton github)

Tout d’abord rendez-vous sur render.com et directement la touche « Sign InĀ Ā» !

Tout d’abord rendez-vous sur render.com et directement la touche « Sign InĀ Ā» !

Configurer sa mise en ligne

Sur votre tableau de bord, choisissez le bouton « New » et « Web service »

Ca te demande de donner le lien de votre repo github.

Clique sur « Public Git RepositoryĀ Ā» et donne l’url de ton repo

  • Name : Donne un nom Ć  ton projet
  • Langage : Python 3
  • Branch : main
  • Build Command :
    • pip install -r requirements.txt
  • Start Command :
    • gunicorn main:app
  • Et sĆ©lectionner FREEĀ 
  • Bien sĆ»r cela donne des restrictions, mais c’est suffisant pour hĆ©berger en ligne)

Debug et restrictions

Debug possible :Ā 

Si lors de la configuration render pour déployer ton site, tu vois une erreur en console. (par exemple, tu as fait une coquille dans une commande sur Procfile, ou oublié une bibliothèque à déclarer dans ton fichier requirements.txt) :

Tu peux Ʃditer ton fichier et le modifier (directement via github si tu le souhaites, et pense Ơ commit pour sauvegarder le changement).

Puis relance render en cliquant sur « Manual Deploy« , puis « Deploy latest commit« 

Restrictions de la version gratuite

Sur le plan gratuit de Render, tu peux effectuer des dƩploiements illimitƩs, mais tu es soumis Ơ certaines limites mensuelles :

Déploiements : 

  • Aucun nombre maximal de dĆ©ploiements.
  • Tu peux dĆ©ployer autant de fois que tu le souhaites, manuellement ou via GitHub.
Ā 

Heures d’instance gratuites :Ā 

  • Tu disposes deĀ 750 heures d’instance gratuites par mois
  • Chaque service web actif (donc projet en ligne) consomme ces heures
    • Par exemple, si tu as deux services actifs en permanence, tu atteindras la limite en environ 15 jours
  • Si tu dĆ©passes cette limite, tous tes services gratuits sont suspendus jusqu’au dĆ©but du mois
Ā 
Mise en veille des services :
  • Les services gratuits sont mis en veille aprĆØs 15 minutes d’inactivitĆ©.
  • Lorsqu’un service est mis en veille, il ne consomme pas d’heures d’instance.
  • Lorsqu’il est rĆ©veillĆ© par une nouvelle requĆŖte, il peut y avoir un dĆ©lai de dĆ©marrage pouvant aller jusqu’Ć  une minute
    • En gros, quand on clique sur le site, on voit un dĆ©marrage render, et la page se met en route
Retour en haut