Comment déployer une application NodeJS sur Heroku à partir de Github (sans installer Heroku sur votre machine)

En tant que développeur Web, rien n'est plus satisfaisant que de pouvoir montrer (et montrer) votre travail au mot. Non seulement à travers les images ou les vidéos sur Twitter, mais en les laissant interagir avec elles, surtout si vous travaillez sur des projets secondaires sympas ou si vous postulez pour un poste.

Et heureusement, maintenant avec tous les fournisseurs de cloud, le partage de votre travail est un must et constitue une étape fondamentale de votre voyage.

Dans cette démo, nous verrons comment déployer votre superbe application NodeJS sur Heroku. À la fin de cette démo, nous aurons une application Hello World de base fonctionnant sur un domaine public accessible à tous.

Pour cette démo, je suppose que vous avez installé Node sur votre machine. Sinon, vous pouvez télécharger à partir du site Web Nodejs.org. Les étapes sont simples et peuvent être trouvées facilement en ligne.

Vous aurez également besoin d'un compte GitHub pour héberger notre code en ligne. Si vous n'avez pas de compte, vous pouvez en créer un gratuitement sur Github.com. Avec un compte gratuit, vous pouvez créer des référentiels publics illimités. Nous utiliserons le système de contrôle de version Git pour appliquer nos modifications à Github

ÉTAPE 1: Créez cette application cool

Créons maintenant cette application Cool Node à laquelle vous avez pensé.

Créez un dossier sur votre machine locale et donnez-lui un nom (de votre choix), dites MyCoolApp.

Ajoutez un fichier avec le nom package.json et collez le contenu ci-dessous. Ce fichier est l'information de base de notre package. (Cela peut également être créé en tapant la commande npm init et en acceptant tous les paramètres par défaut.)

{ "name": "coolnodeapp", "version": "1.0.0", "description": "node app ", "main": "app.js", "scripts": { "start": "node app.js" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "homepage": "" }

Un changement très important à noter est cette ligne:

"start": "node app.js"

Après le déploiement, Heroku exécutera cette commande pour démarrer votre application.

Ajoutez un fichier, app.js, et collez le code ci-dessous. Ce sera le point de départ de notre application.

const http = require('http'); const port = process.env.PORT || 3000 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('

Hello World

'); }); server.listen(port,() => { console.log(`Server running at port `+port); });

Ce code ouvre essentiellement un port sur le serveur local et sert du HTML.

Veuillez noter le bloc de code le plus important ici:

const port = process.env.PORT || 3000

Ceci est extrêmement important lorsque vous souhaitez déployer votre application dans le cloud. Le serveur d'applications est démarré sur un port aléatoire sur le cloud. Si vous codez en dur un numéro de port, comme dans tous les guides de mise en route, et déployez sur le cloud, le numéro de port spécifique peut ne pas être disponible. L'application ne démarrera jamais. Il est donc préférable d'obtenir le numéro de port attribué par l'instance cloud et de démarrer le serveur HTTP.

Enregistrez le fichier et exécutez la commande ci-dessous dans la fenêtre d'invite de commande (qui est ouverte dans le dossier):

node app.js

Avec cela, Node démarrera le serveur et affichera le message ci-dessous:

Maintenant, si nous ouvrons // localhost: 3000 / dans le navigateur, nous verrons ceci:

Cool! Nous venons de créer une application NodeJs de base.

ÉTAPE 2: pousser vers GitHub

Je veux maintenant télécharger notre code sur GitHub. De cette façon, nous pourrons modifier notre code de n'importe où et déployer instantanément les modifications validées dans le cloud.

Créons un référentiel sur GitHub en cliquant sur Nouveau référentiel.

Donnez-lui un nom, une description et cliquez sur Créer un référentiel:

GitHub créera un référentiel et vous donnera quelques commandes que vous pouvez exécuter localement afin que vous puissiez cloner votre dossier local avec votre référentiel GitHub.

Dans l'invite de commande, exécutez les commandes ci-dessous dans cette séquence.

  1. Initialisez le référentiel Git au niveau racine:
git init

2. Ajoutez tous les fichiers à votre Git local (staging). Remarquez le dernier point:

git add . 

3. Validez vos modifications sur votre Git local:

git commit -m “first commit”

4. Créez un lien vers votre référentiel GitHub. (Veuillez modifier l'URL pour qu'elle pointe vers votre référentiel.)

git remote add origin //github.com/rramname/MyCoolNodeApp.git

5. Et poussez votre changement:

git push — set-upstream origin master

Vous devriez voir des messages comme ci-dessous à l'invite de commande.

Maintenant, si vous ouvrez GitHub et actualisez le référentiel, vous devriez pouvoir voir le code.

ÉTAPE 3: déployer sur Heroku

Maintenant vient le plaisir, la raison pour laquelle vous avez survécu à tout cela: le déploiement.

Si vous n'avez pas de compte avec Heroku, vous pouvez en ouvrir un gratuitement en remplissant ce simple formulaire. (Et ici, vous n'avez pas besoin de fournir les informations de carte de crédit :))

Une fois votre compte prêt, connectez-vous avec vos informations d'identification.

Cliquez sur Nouveau dans le coin supérieur droit et sélectionnez «Créer une nouvelle application».

Donnez un nom à votre application (celui-ci sera inclus dans l'URL publique de votre application) et cliquez sur Créer une application.

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

Here, you can search for your GitHub repository and click connect:

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

Select nodejs from the options and click Save changes.

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

And that’s it!

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

We just created our own web application that can be accessed over the internet.

Great!

Please go ahead and share with others!

Happy Hosting :)