Mise en production

Ces dernières années, les plateformes de déploiement se sont multipliées.

Il existe aujourd’hui de nombreux services qui permettent de déployer des applications Node.js, PHP, statiques, etc. en production, et gratuitement pour les petits projets.

Parmis les plus populaires, on peut citer :

• Vercel
• Netlify
• Heroku
• AWS (Amazon Web Services)
• Google Cloud
• Azure (Microsoft)
• Github Pages (pour les sites statiques)

Déploiement sur Vercel

Personnellement, j’utilise Vercel pour déployer mes applications Node.js car je le trouve assez simple et il est gratuit pour les petits projets.

Pour déployer une application sur Vercel, il vous faudra :

1. Créer un compte sur Vercel
2. Installer Vercel CLI
3. Se connecter à Vercel depuis le terminal avec vercel login
4. Modifier le projet pour qu’il soit compatible avec Vercel
5. Configurer le projet pour Vercel
6. Tester le serveur local avec vercel dev
7. Déployer l’application avec vercel

Modification du projet pour Vercel

Pour déployer une application sur Vercel, il faut modifier légèrement le projet pour qu’il soit compatible.

Vercel oblige le projet à contenir un dossier api à la racine du projet, qui contiendra le serveur Node.js.

Pour cela, nous allons :

1. Créer un dossier api à la racine du projet
2. Renommer le fichier app.js en index.js et le copier dans le dossier api
3. Modifier les chemins dans le fichier index.js pour qu’ils correspondent au nouveau chemin, notamment pour charger les fichiers de routes et de vues :

api/index.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('../routes/index');
var usersRouter = require('../routes/users');
var scoresRouter = require('../routes/scores');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/scores', scoresRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

4. Modifier le fichier bin/www pour qu’il charge le fichier api/index.js :

bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../api/index');
var debug = require('debug')('03-express:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

Configuration de Vercel

Vercel utilise un fichier de configuration vercel.json pour configurer le projet.

1. Créez un fichier vercel.json à la racine de votre projet
2. Ajoutez le code suivant :

vercel.json

{
  "version": 2,
  "buildCommand": "",
  "rewrites": [{ "source": "(.*)", "destination": "/api" }]
}

Cette configuration permet de rediriger toutes les requêtes http vers le dossier api.

Tester le serveur local

Il est possible de répliquer l’environnement de production sur votre machine en utilisant Vercel CLI pour tester le serveur local avant de le déployer en production.

Pour cela, installons globalement Vercel CLI avec la commande suivante :

npm i -g vercel

Il faudra ensuite se connecter et s’identifier à votre compte Vercel en utilisant la commande :

vercel login

Enfin, pour lancer le serveur local, utilisez la commande :

vercel dev

Note

vercel dev va vous poser quelques questions pour configurer votre projet. Répondez simplement aux questions en appuyant sur Entrée.

Le serveur local est accessible à l’adresse http://localhost:3000.

Déploiement sur Vercel

Il existe plusieurs façons de déployer une application sur Vercel :

1. En utilisant Vercel CLI
2. En connectant votre compte Github à Vercel
3. En utilisant l’interface web de Vercel

Puisque nous avons déjà installé Vercel CLI, nous allons utiliser cette méthode.

Pour déployer votre application sur Vercel, utilisez la commande suivante :

vercel

Cette commande va transférer votre application sur Vercel et vous donnera un lien pour accéder à votre application en ligne !

Astuce

Rendez-vous sur Vercel pour voir et éditer votre application en ligne.

Exercice

1. Explorez le tableau de bord de Vercel pour voir les informations de votre application.
2. Testez votre application en ligne avec Postman et votre navigateur.

Conclusion

Félicitations ! Vous avez déployé votre application en production !

Si vous avez des questions ou des problèmes, n’hésitez pas à consulter la documentation de Vercel.

Comme on a pu le voir, Vercel est plutôt simple à utiliser et permet de déployer des applications Node.js rapidement.

Cela dit, les autres plateformes de déploiement sont également très bien et peuvent être plus adaptées à vos besoins.

Vous pouvez prendre un moment pour explorer ces plateformes et lire la documentation de mise en production pour votre application.

Dans les sections suivantes, nous allons faire évoluer notre application.