gulp server - Héberger notre site Web via Gulp

L'objectif ici est de voir le code nécessaire afin de fournir via Gulp un petit serveur Web afin d'h"berger notre site Web le temps du développement.

Pour ce faire, nous allons utiliser le plugin gulp-connect. 

Configuration de base

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');

gulp.task('server:connect', function () {
    gutil.log('You will access to the server to the following link:');
    gutil.log('https://localhost:3000/app/index.html');

    connect.server({
        'host': 'localhost',
        'https': true, // We can pass certificats with a JSON  { key, cert, ca }
        'root': './',
        'port': 3000
    });
});

L'exemple précédent nous met en place un serveur Web:

• Sur le port 3000
• Qui prend le répertoire courant comme répertoire de base à exposer
• Sera accessible sur le localhost
• Et en plus nous activons HTTPS

Pour HTTPS, nous ne sommes évidemment pas obligé de l'utiliser. Mais c'est bien pratique pour s'assurer que nous n'aurons pas de soucis quand nous déploirons notre application sur un serveur HTTPS. De plus, cette option autorise de fournir directement des certificats SSLs.

Proxy forward

Voyons un cas que nous pouvons avoir besoin: celui de faire du proxy-forward. C'est le cas où nous voulons taper sur un serveur qui a une API REST, et qui devra héberger notre application Web. Mais pour l'instant, en mode développement, nous n'y avons pas accès. A moins d'activer le CORS, mais j'avoue que j'ai toujours peur après de le laisser en mode production.

Nous pouvons alors utiliser http-proxy-middleware pour nous aider:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');

gulp.task('server:connect', function () {
    gutil.log('You will access to the server to the following link:');
    gutil.log('https://localhost:3000/app/index.html');

    connect.server({
        'host': 'localhost',
        'https': true, // We can pass certificats with a JSON  { key, cert, ca }
        'root': './',
        'port': 3000,
        'middleware': function(/*connect, opt*/) {
            // https://github.com/AveVlad/gulp-connect/issues/27
            return [
                proxy('/api', {
                    'target': 'https://localhost:8080',
                    // So, we will call https://localhost:8080/api/* ...
                    'secure': false,
                    // True to verify the SSL Certs
                    'changeOrigin':true
                })
            ]
        }
    });
});

Ici, nous allons nous rediriger vers le lien http://localhost:8080/api à chaque fois qu'une requête se fera sur http://localhost:3000/api

Proxy forward et WebSocket

Si en plus nous avons à notre disposition un serveur WebSocket, nous pouvons indiquer à http-proxy-middleware de faire la redirection:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');

gulp.task('server:connect', function () {
    gutil.log('You will access to the server to the following link:');
    gutil.log('https://localhost:3000/app/index.html');

    connect.server({
        'host': 'localhost',
        'https': true, // We can pass certificats with a JSON  { key, cert, ca }
        'root': './',
        'port': 3000,
        'middleware': function(/*connect, opt*/) {
            // https://github.com/AveVlad/gulp-connect/issues/27
            return [
                proxy('/api', {
                    'target': 'https://localhost:8080',
                    // So, we will call https://localhost:8080/api/* ...
                    'secure': false,
                    // True to verify the SSL Certs
                    'changeOrigin':true,
                    'ws': true
                    // Set it to 'true' to proxy WebSockets
                })
            ]
        }
    });
});

Il se peut, toutefois, que la redirection pour les WebSocket, se fassent sur l'URL absolue. Mais vous ne voulez pas tout à rediriger (car vous aurez des ressources statiques JavaScript, CSS, ...).

Il existe une manière détourné d'activer "l'upgrade WebSocket". En effet, le module http-proxy-middleware fournit une méthode "upgrade" pour ça. Et vous pourrez alors configurer le tout en se basant sur le code suivant:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');

gulp.task('server:connect', function () {
    gutil.log('You will access to the server to the following link:');
    gutil.log('https://localhost:3000/app/index.html');

    connect.server({
        'host': 'localhost',
        'https': true,
        'root': './',
        'port': 3000,
        'middleware': function(/*connect, opt*/) {
            var wsProxy = proxy('/', {
                   'target': 'wss://localhost:8080',
                   'ws': false
                }),
                upgradeDone = false;
            
            return [
             function(req, resp, next) {
                 if (!upgradeDone) {
                     upgradeDone = true;
                     
                     gutil.log('Enable the WebSocket proxifying');
                     req.connection.server.on('upgrade', wsProxy.upgrade);
                 }
                 
                 next();
             },
                proxy('/api', {
                    'target': 'https://localhost:8080',
                    'secure': false,
                    'changeOrigin':true,
                    'ws': false
                })
            ]
        }
    });
});

Enjoy !