Installation Heroku CLI
Avant de commencer, vous devez installer heroku en ligne de commande. Pour cela, suivez les différentes étapes en suivant ce lien ci-dessous.
Créer votre application
Dans notre exemple, nous allons créer une API qui permet d'accéder à des films. Pour cela, rien de plus simple. Nous créons d'abord un dossier nommé movies-api et nous importons celui-ci dans VS Code. Nous ouvrons un terminal et nous tapons la commande ci-dessous suivi de la touche entrée (enter). Nous pouvons remarquer qu'un fichier package.json a été créé
npm init -y
Ajouter engines pour Heroku
Pour connaitre la version de Node installée sur notre système, tapez la commande ci-dessous dans votre terminal.
node -v
Nous connaissons maintenant la version de node ici 12.6.1
Nous allons maintenant ajouter cette version dans notre package.json
Ajouter engines pour Heroku
{
"name": "movies-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"engines": {
"node": "12.x"
}
}
Voici la nouvelle tête de notre fichier package.json
Elle est ajoutée au package.json afin de permettre à heroku de déterminer quelle version de Node il faut utiliser pour votre application. Pour information, j'ai mis volontairement 12.x pour éviter les erreurs possibles lors du déploiement. II se peut que votre version fasse planter le script de déploiement.
Ajouter les dépendances utiles au projet
{
"name": "movies-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"engines": {
"node": "12.x"
},
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-prettify": "^0.1.1",
"helmet": "^3.22.0",
"json-beautify": "^1.1.1",
"pg": "^8.0.3"
}
}
Voici la nouvelle tête de notre fichier package.json
Installer les dépendances
npm i
Nous pouvons voir que le fichier package.lock.json a été créé ainsi que le dossier node_modules.
Ajouter notre API
Nous allons créer un fichier index.js et y insérer le code suivant :
const express = require("express");
const pretty = require('express-prettify');
const cors = require('cors');
const helmet = require("helmet");
const app = express();
app.use(helmet());
app.use(pretty({ query: 'pretty' }));
app.use(cors());
app.get('/', function (req, res) {
res.send('Welcome in Movies API');
});
app.listen(5000, () => {
console.log('API Movies listen on port 5000');
})
Testons notre API
Nous allons tester notre script à l'aide de la commande ci-dessous
node index.js
Nous pouvons voir que le message "API Movies listen on port 5000" s'affiche et nous n'avons pas d'erreurs.
Testons notre API dans le navigateur
Nous allons tester notre API dans le navigateur. Pour cela, ouvrez un nouvel onglet et tapez l'url ci-dessous
On accède bien à la route présente dans notre fichier index.js
app.get('/', function (req, res) {
res.send('Welcome in Movies API');
});Pour stopper notre API dans le terminal, vous pouvez faire ctrl + C
Ajouter la commande start
Nous allons ajouter une commande dans notre projet ce qui évitera de taper la même commande sans arrêt.
Text
node index.js
Ajouter .gitignore
Nous allons créer un fichier qui se nomme .gitignore (attention à ne pas oublier le point)
à l'intérieur de ce fichier, nous allons simplement lister les fichiers qui nous souhaitons ignorer car inutiles de pousser sur le dépôt git les node_modules par exemple ou les clés d'API...
Se connecter à Heroku
A l'aide d'un terminal, vous devez taper la commande ci-dessous.
heroku login
Créer une application
A l'aide d'un terminal, vous devez taper la commande ci-dessous.
heroku create
L'application à bien été créée chez Heroku.
Test de notre application
Visualisation du projet
Nous avons bien accès à notre projet sur l'interface Heroku.
Création du fichier Procfile
Cette ligne permet au serveur heroku de déterminer la commande de lancement de votre application.
Créer un nouveau repository sur github
Donner un nom à votre repository par exemple movies-api
Suivez les instructions pas à pas
Le déroulé dans les écrans suivants...
echo "# movies-api" >> README.md
Cette commande permet de créer un fichier README.md utile ici pour faire la description technique de votre projet ou de laisser des indications sur comment l'installer. Vous pouvez aussi y joindre des images.
Initialiser le repository
git init
Voir le status des fichiers
git status
Les fichiers ne sont pas encore trackés par git d'ou la couleur rouge. Nous allons utiliser la commande git add pour ajouter les fichiers.
Ajouter un fichier
git add <nom du fichier>
Ici, nous avons juste le tracking sur le fichier README.md
Ajouter les fichiers
git add .
Petite différence avec l'écran précèdent, nous avons le tracking sur tous les fichiers sauf le dossier node_modules que nous avons ajouté dans le fichier gitignore.
Commit nos fichiers
git commit -m "<message>"
Voici ce que vous devez normalement voir dans votre terminal lorsque vous utiliser la commande git commit . Attention à rester le plus précis possible dans votre message de commit. En entreprise, vous avez des normes à respecter. Le but étant de décrire ce que vous faites (bug fix, feature etc...).
Le remote origin github
git remote add origin https://github.com/nicolashedoire/movies-api.git
Cette commande permet de faire le lien entre votre code local sur votre machine et le repository permettant de versionner votre code. Maintenant que le lien est fait, vous pouvez pousser tranquillement votre code grace à la dernière commande.
Poussez votre code sur les serveurs
git push -u origin master
Notre code est poussé sur la branche master de notre repository
Rendu de notre dépôt
Vous pouvez constater que les fichiers sont maintenant disponibles sur note dépôt github.
Ajouter le remote heroku
Il ne reste plus qu'à faire le lien avec heroku et github. Vous avez la commande disponible dans votre interface de projet Heroku.
heroku git:remote -a desolate-journey-34342
Deployer notre application
git add .
git commit m "make it better"
git push heroku master
Effectuer une modification sur votre projet, ajoutez les nouvelles modifications, faites un commit et faites un push en indiquant heroku au lieu de master.
Nous pouvons remarquer que le build s'est bien déroulé.
Tester notre application
On peut remarquer ici que notre application ne fonctionne pas et nous allons aller voir pourquoi grace à la commande indiquée sur la page.
Logs notre application
heroku logs --tail
Et maintenant ? Google est ton ami je dirais !
Chercher la solution
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
On tombe sur un premier lien que l'on peut aller voir et découvrir ce qu'il se dit et peut-être trouver la solution à notre problème.
Chercher la solution
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Nous allons donc effectuer une petite modification dans notre code afin de laisser Heroku assigner le port.
Update du code
const express = require("express");
const pretty = require('express-prettify');
const cors = require('cors');
const helmet = require("helmet");
const app = express();
app.use(helmet());
app.use(pretty({ query: 'pretty' }));
app.use(cors());
app.get('/', function (req, res) {
res.send('Welcome in Movies API');
});
app.listen(process.env.PORT || 5000, () => {
console.log(`API Movies listen on port ${process.env.PORT} || 5000`);
});
Nous allons maintenant redéployer notre application afin de voir si cette modification fonctionne.
Les logs après déploiement
On peut constater que notre API est écoute sur le port 18332 et qu'il n'y a plus d'erreurs. La page est bien servie avec un status 304
Tester notre application
heroku ps:scale web=1
Cette commande permet de s'assurer le l'état de santé de notre application.
Tester not application
heroku open
Nous sommes ravis de constater que notre API à correctement été déployée mais pour tout dire, elle ne sert pas de données pour le moment donc c'est un peu inutile...
Dans cette deuxième partie, nous allons voir comment créer une base de données avec Heroku.
Créer une base de données
heroku addons:create heroku-postgresql:hobby-dev
Pour créer une nouvelle base de données, rien de plus simple. Une seule commande permet de faire cela avec Heroku.
Ajouter la connection à la base de données
const dotenv = require('dotenv');
const { Pool } = require('pg');
dotenv.config();
let pool = null;
if(process.env.NODE_ENV === 'PRODUCTION'){
const dbProdConfig = {
connectionString: process.env.DATABASE_URL,
ssl: true
}
pool = new Pool(dbProdConfig);
}else{
const dbDevConfig = {
host: process.env.DB_HOST,
port: process.env.DB_PORT,
database: process.env.DB_NAME,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
};
pool = new Pool(dbDevConfig);
}
pool.connect((err, client) => {
if (err) {
console.log(err);
}
console.log(`connection à la base de données ok...`);
});Je crée un nouveau fichier nommé db.js dans mon projet API et je n'oublie pas de redéployer mon API avec le nouveau code. dans mon fichier index.js, j'importe mon fichier avec un require('./db');
Utilisation de la commande Heroku postgres
heroku pg:psql
Je souhaite me connecter à la base de données pour pouvoir l'initialiser.
Je constate qu'il y a un petit problème avec cette commande étant donné que je n'ai pas postgres installé sur ma machine. Mais comment est ce que je fais me direz vous ? J'utilise tout simplement un conteneur docker.
Solution BIS
heroku pg:credentials:url
Grace à cette commande je vais pourvoir me connecter à ma base via PG admin
Je pose mon regard sur connection info string et je remarque que j'ai le nom de la db, l'hôte, le port, le user et le password. Nous allons tester tout cela.
Connection via un client lourd
J'utilise PG admin 4 pour me connecter. Pour information PG admin 3 ne fonctionnera pas car trop ancien.
Connection via un client lourd
La client charge toutes les bases disponibles sur le serveur. Il ne reste plus qu'à trouver la mienne.
Astuce
Je souhaite uniquement charger ma base. Je me déconnecte du serveur et je vais éditer la configuration en ajoutant le nom de ma base dans DB restriction
Avoir des informations sur notre base
heroku pg:info
Copier notre base locale
pg_dump --file "/Users/linkvalue/Desktop/movies.tar" --host "localhost" --port "5432" --username "postgres" --no-password --verbose --role "postgres" --format=t --blobs --encoding "UTF8" "movies"
Pour effectuer un dump de notre base locale, vous pouvez utiliser cette commande ci-dessus. On indique d'abord le chemin vers lequel le fichier sera enregistré, ensuite les différents paramètres de votre serveur, le format d'encodage et le nom de votre base.
Maintenant que nous avons notre dump de la base locale, nous allons pouvoir l'importer sur heroku.
Copier notre base locale en CSV
psql" --command " "\\copy public.movies (id, allocine_id, genders, title, synopsis, creation_date, image, director, duration, created_at) TO '/Users/linkvalue/Desktop/movies.csv' DELIMITER ';' CSV ENCODING 'UTF8' QUOTE '\"' ESCAPE '''';""
Text
Text
Faire une restauration de la base sur heroku
pg_restore --host "ec2-54-146-91-153.compute-1.amazonaws.com" --port "5432" --username "qjxyagxnrkrcxg" --no-password --dbname "d37m29h7uoaurf" --verbose "/Users/linkvalue/Desktop/movies.tar"
Effectuer une creation de table sur heroku
Accéder au bash heroku
heroku run bash
