Héberger votre application laravel sur heroku(gratuitement)

Héberger votre application laravel sur heroku(gratuitement)

Déployer gratuitement votre application web sur heroku

Hello! Bienvenue a toi cher dev.

Dans cette série sur les déploiements des sites et applications web en lignes, nous avons précédemment parler de comment héberger un site web sur github et en lisant le titre de l'article actuel vous vous êtes probablement demandé pourquoi encore utiliser heroku alors qu'il y a déjà github et c'est gratuit aussi ? Ne vous en allez allés pas tout de suite, nous répondons à cette question dès la première section de cet article.

introduction

Heroku: pourquoi pas github ?

Eh bien github permet d'héberger des sites web oui mais à condition que ça soit un site web statique c.a.d un site dont l'affichage ne varie pas en fonction des caractéristiques de la demande(heure, adresse IP de l'ordinateur du demandeur, formulaire rempli par le demandeur, etc.), il n'est donc pas possible d'y héberger un site conçu par exemple en PHP où tout autre langage permettant de développer des sites web dynamique et application web qui peuvent recourir à des bases des données.

Alors C'est quoi heroku ?

Heroku est un PaaS (Platform as a Service) destinée au développement dans le Cloud. Autrement heroku offre une plateforme permettant de développer et déployer des applications. il est à noter aussi que la plateforme heroku supporte les bases de données relationnelles et No Sql, ce qui couvre une grande masse des applications développées.

Dans les prochaines lignes nous allons donc voir comment déployer notre application sur la plateforme heroku.

Configuration

Dans la suite je considère que vous avez déjà un projet prêt à être déployé et que vous êtes à l'aise avec git, pas besoin d'être un expert, les commandes de base suffiront. Noter aussi que je prends comme cas pratique une application développer en laravelselon votre langage ou framework les configurations pourront changer mais le schéma reste globalement le même.

L'inscription

Pour commencer nous allons tout d'abord devoir se créer un compte, rendez-vous donc sur heroku. je ne vous ferai pas ici l'offense de vous expliquer comment créer un compte sur un site web. Après avoir créé votre compte rendez-vous sur le dashboard, celui-ci affiche la liste de vos projets(vous n'en avez aucun si vous venez de créer votre compte mais ça ne va pas tarder) et vous permet de faire plusieurs configurations.

La CLI heroku

Après avoir créer le compte nous allons avoir besoin de la CLI heroku, c'est l'outil en ligne de commande (un peu comme git que vous connaissez déjà) qui nous permet d'interagir avec les serveurs d'Heroku dans notre console(terminal, cmd, etc.).

Pour cela rendez-vous sur la documentation officielle pour l'installation. La documentation est assez claire sur le sujet mais je me permets de vous faire le tour pour les 3 principaux systèmes d'exploitation:

  1. MacOS: sur mac ouvrez un terminal et taper la commande suivante:
brew tap heroku/brew && brew install heroku
  1. Windows: sur Windows il vous suffit de télécharger la version de l'exécutable correspondant à votre système sur cette page et de l'installer.

  2. Linux: Sur Linux c'est un peu plus délicat vu le nombre des distributions disponible, vous trouverez la méthode la plus adaptée au vôtre sur la documentation d'heroku. Mais globalement taper cette ligne dans votre terminal devrait faire l'affaire quelque votre distribution:

curl https://cli-assets.heroku.com/install.sh | sh

Vérifier que tout s'est passé en tapant cette commande:

heroku --version

Vous devriez avoir quelque chose ressemblant à cette image. Screenshot_select-area_20220302155450.png

Comme indiquer dans la documentation, il est nécessaire d'avoir git d'installer avant d'installer heroku CLI.

Connexion au serveur heroku et création d'un projet

À présent nous allons créer notre projet sur heroku en utilisant la ligne de commande que nous venons d'installer. sur votre terminal tapez et validez:

heroku login

Screenshot_select-area_20220302160107.png

il vous sera demandé d'appuyer sur une touche pour ouvrir votre navigateur par défaut ou q pour annuler, taper q e dans votre navigateur et sur la page afficher appuyer sur le bouton login.

Screenshot_select-area_20220302160342.png

Revenez à votre terminal et si tout s'est bien passé vous devriez avoir un message similaire à celui sur l'image juste en dessous.

Screenshot_select-area_20220302160713.png

Nous sommes connecter au serveur heroku avec notre compte précédemment créer, nous pouvons donc maintenant créer notre projet. Pour ce faire il suffit de taper cette commande(remplacer "livescorefoot" par le nom de votre projet):

heroku create livescorefoot

project-creation.jpg

vous pouvez maintenant taper cette commande pour voir la liste de vos applications(moi j'en ai plusieurs):

heroku apps --all

all-apps.png

Si vous avez été attentif au retour de la commande create vous avez surement remarqué une adresse sous la forme: https://[nom-du-projet].herokuapp.com . c'est l'adresse de votre application, vous pouvez déjà le visiter pour en avoir le coeur net. Il est normal que vous soyez tombé sur une page d'heroku plutôt que votre réelle application, nous n'avons que créer le projet et non envoyer votre code a heroku. Faisons ça immédiatement dans la partie suivante.

welcome-page.png

Publication du code

Avant de déployer notre code laravel il est important de générer une "App key", sans laquelle laravel ne pourra tout simplement pas lancer correctement notre application. Pour ce faire taper la commande suivante pour générer et afficher une clé:

php artisan key:generate --show

key-generate.png

Assurez-vous dans votre terminal d'être à la racine de votre projet laravel local avant d'exécuter cette commande et toutes celles d'après.

Pour maintenant définir "l'app key" dans notre projet en ligne tapez la commande suivante en rajoutant la clé générée par la commande précédente:

heroku config:set APP_KEY=[coller-ici-la-clé]

config-key.png

Il peut arriver que la commande génère une erreur et vous demande de specifier une application, dans ce cas comme moi ajouter l'option-" suivie du nom du projet sur heroku comme suis: heroku config:set APP_KEY=[coller-ici-la-clé] --api nom-projet-sur-heroku

Profitons-en aussi pour configurer l'affichage des erreurs laravel pour nous permettre de debugger notre app en cas d'erreur, pour ça tapait la commande:

heroku config:set APP_DEBUG=true

Heroku ne sait pas encore comment lancer l'application : quelle langue utilise-t-elle ? Quelles librairies doit-il installer ? Quelle est la commande à lancer au démarrage ? Nous allons terminer la configuration en indiquant tout ceci.

Héroku reconnaît automatiquement le langage utilisé par un projet afin que vous n'ayez pas à le dire. Concernant le reste, comment fait-il ? Heroku recherche 2 documents :

  • Procfile : donne les instructions à exécuter au démarrage de l'application. oui c'est un fichier sans extension.

  • requirements.txt : liste les librairies à installer. si vous avez des librairies specifique hors du composer.json.

Nous allons donc créer un fichier Procfile à la racine de notre projet local et y ajouter le bout de code suivant:

web: vendor/bin/heroku-php-apache2 public/

procfile-content.png

Ce bout de code permet d'indexer l'application et d'indiquer le dossier public comme étant le point d'entrée de l'application(comme sur tous projets laravel). ici nous disons à Heroku d'utiliser le serveur web apache2 enfin de lancer notre appli depuis le dossier public.

Nous allons faire un "commit" de toutes nos modifications et de finalement envoyer("push") notre code sur Heroku:

git add .
git commit -m "configuration heroku effectuer"

nous configurons le remote

heroku git:remote -a livescorefoot

Remplacez "livescorefoot" par le nom de votre projet sur heroku

git-commit-remote.png

et enfin le push

git push heroku main

git-push-one.png

Heroku s'appuie sur le contenu de la branche main. nous nous assurons donc de pusher celle branche-la vers heroku.

Il y a des logs de build après le push. Heroku conteneurise l'application. il va voir le fichier composer.json et savoir que c'est un projet PHP. il va installer toutes les dépendances et déployer l'application.

git-push-two.png

Maintenant rendez-vous de nouveau sur votre application, la mienne est sur livescorefoot.herokuapp.com, et si tout s'est bien passé vous devriez voir votre application.

Si vous avez eu des erreurs, vous pouvez entrer cette commande pour les visualiser:

heroku logs -remote -tail

Et si j'ai une base des données ?! Continue à la section suivante.

La base des données

Avec le forfait Hobby, Heroku met à disposition de façon gratuite une base de données PostgreSQL avec une limite de 10 000 enregistrements, ce qui devrait être largement suffisant pour couvrir les besoins d'une application en développement.

Pour créer une base des données, exécuter la commande suivante:

heroku addons:create heroku-postgresql:hobby-dev

Il faut ensuite renseigner les informations de connexion générer à notre application sous cette forme:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Heroku génère toutes ces informations à l'exécution de la commande précédente, pour les afficher taper la commande suivante:

heroku config

db-creation.jpg

Pour nos besoins actuels seules la ligne DATABASE_URL nous intéressent, copiez-la donc et voyons les informations qu'elles renferment.

Voici comment sont découpées les informations dans cette ligne:

postgres://DB_USERNAME:DB_PASSWORD@DB_HOST:DB_PORT/DB_DATABASE

Ce qu'on remplacerait donc dans notre fichier .env par :

DB_HOST=ec2-34-238-37-113.compute-1.amazonaws.com
DB_PORT=5432
DB_DATABASE=dbpin8odghftul
DB_USERNAME=bswauqluaowqyu
DB_PASSWORD=82fd1835f505eb4dd54596f.......8d9f854174eb5fcd9cd4b94f67aa35

Ces informations sont différentes chez vous puisqu'on n'a pas la même base des données, prenez donc soin de récupérer vos propres informations et pas celles-ci parce que je les ai tronquées stratégiquement.

Maintenant que vous avez toutes les informations de connexion sous les yeux, mettons à jour les variables de configuration de notre application sur Heroku.

Tapez ces commandes l'une après l'autre en vous assurant encore une fois de prendre vos informations a vous et pas les miennes:

heroku config:set DB_CONNECTION=pgsql
heroku config:set DB_HOST=ec2-34-238-37-113.compute-1.amazonaws.com
heroku config:set DB_PORT=5432
heroku config:set DB_DATABASE=dbpin8odghftul
heroku config:set DB_USERNAME=bswauqluaowqyu
heroku config:set DB_PASSWORD=82fd1835f505eb4dd54596f.......8d9f854174eb5fcd9cd4b94f67aa35

Screenshot_select-area_20220321154709.png

Et maintenant Nous pouvons migrer nos tables avec cette commande:

heroku run php artisan migrate

Screenshot_select-area_20220321154839.png

Pour exécuter une commande laravel sur Heroku, il faut mettre Heroku run avant ladite commande.

Après ça, si tout s'est bien passé vous pouvez maintenant utiliser votre application et partager son lien si nécessaire.

N'hésitez à laisser un j'aime si vous avez aimé l'article, partager avec vos amis et communautés s'il vous a été utile et laisser un commentaire en dessous.

Si vous voulez booster votre carrière de développeur vous pouvez intégrer notre canal telegram via ce lien... nous sommes plus de 115 à l'heure de l'écriture de cet article.

Allez, a plus.