Ça part en prod maintenant

On va parler de Now, c’est pour cela que “Ça part en prod maintenant”. ⇒ :rire:

Now est une plateforme d’hébergement proposée par Zeit. Les créateurs de Socket.io, Next.js, du terminal Hyper et de beaucoup d’autres. À cette solution d’hébergement, vient s’ajouter un outil en ligne de commande pour déployer son application super facilement.

À titre personnel c’est la solution que j’ai choisie pour héberger mon site. Les concepts que je présente sont ceux que j’utilise et qui j’espère, vous seront utiles.

Le code utilisé dans cet article est disponible ici :

github jean-smaug/demo-now-deployment no-readme

Tarifs

L’offre gratuite sera suffisante dans le cadre de cet article, mais de manière plus générale pour une utilisation personnelle.

zeit-princing

N’ayant pas essayé les offres payantes, je me garderai de faire des commentaires.

Configuration

Pour commencer, il faut créer un compte. Il est possible de s’inscrire via Github, Gitlab, Bitbucket ou par Email.

Ensuite, on installe de CLI Now.

yarn global add now
# OU
npm install -g now

Enfin, il faut aussi se connecter via le CLI

now login adressemail@smaug.fr

Un mail te sera envoyé à l’adresse saisie, il faudra juste cliquer sur le lien afin d’être authentifié. Petite digression, ce mode de connexion est dit “passwordless”.

Tout est en place, on peut déployer un site.

Création d’un site basique

Dans un premier temps, nous allons voir comment déployer un site statique.

<!-- index.html -->

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Démo now</title>
    <style>
      body {
        background: whitesmoke;
      }

      main {
        display: flex;
        justify-content: center;
        margin-top: 1em;
        font-size: 2em;
        height: 100vh;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      Avant j'étais moche dans la tess,<br />
      aujourd'hui je plais à Eva Mendes
    </main>
  </body>
</html>

En prenant le html ci-dessus, il suffit de se placer dans le répertoire correspondant et de lancer la commande now. 5 questions vous seront posées afin de configurer le nom du projet, son propriétaire, le dossier à uploader… Appuyez sur ”⏎” pour chacune d’entres-elles afin d’utiliser la configuration par défaut. Et… c’est tout.

now-cli-deployment

La console nous indique que notre site a été déployé sur la production, accessible depuis https://demo-now-deployment.now.sh dans mon cas. À l’avenir, il faudra lancer la commande now --prod pour déployer de nouveau en production. La commande now déploiera sur un espace de “preview”.

deployment-result

On a pu déployer notre site statique en 30 secondes, maintenant on va voir que Now propose aussi de faire du backend

API JSON avec les Serverless Functions

Déjà, le serverless c’est quoi ? Malgré son nom, il n’est pas question de supprimer les serveurs, mais de ne plus s’occuper de leur gestion. Cette gestion est déléguée aux acteurs du cloud, AWS, GCP… et Now.

Dans la pratique, nous allons créer un dossier api dans lequel nous allons venir placer notre code serveur. Dans l’exemple ci-dessous le fichier api/kitchens.js ira lire le contenu du dossier images afin de renvoyer l’url permettant d’accéder aux photos de cuisines.

tree-now-serverless

// api/kitchens.js

const fs = require("fs");

// Récupération de la liste des fichiers du dossier images
const files = fs.readdirSync(__dirname + "/../images");

/* Votre code doit respecter un certain formalisme afin d'être compris
par Now. Dans le cadre du Javascript vous devez exporter une fonction.
Cette fonction à un paramètre requête et un paramètre réponse.
NB : la fonction doit nécessairement renvoyer des données. */
module.exports = (req, res) => {
  const data = files.map(fileName => ({
    name: fileName,
    url: `https://${req.headers.host}/images/${fileName}`,
  }));

  // On retourne les données au format json
  res.json(data);
};

Pour déployer, même principe que tout à l’heure : now --prod. Nos fonctions serverless peuvent être appelé via URL_PROJET/api/NOM_FICHIER. Dans notre cas https://demo-now-deployment.now.sh/api/kitchens.

result-api

Rendu HTML avec les Serverless Functions

Maintenant que notre API nous retourne les bonnes données, on pourrait l’appeler en Javascript avec fetch pour ensuite ajouter des éléments au DOM. Cependant, afin de faciliter le travail des moteurs de recherche, il est judicieux de retourner du HTML.

Notre arborescence de fichiers ressemblera à cela. Le fichier index.html est devenu templates/index.art et un fichier now.json est apparu.

tree-now-serverless-markup

art-template est un moteur de template Javascript, au même titre que Handlebars, Pug, EJS…

<!-- templates/index.art -->

<!DOCTYPE html>
<html lang="fr">
  <head>
    ...
  </head>
  <body>
    <main>
      <ul class="List">
        <!-- On boucle sur chacune des cuisines
        afin d'en afficher le contenu -->
        {{each kitchens}}
        <li class="Item">
          <span>{{ $value.name }}</span>
          <img width="350" height="200" src="{{ $value.url }}" />
        </li>
        {{/each}}
      </ul>
    </main>
  </body>
</html>

const fs = require("fs");
const artTemplate = require("art-template");

const files = fs.readdirSync(__dirname + "/../images");
const template = fs.readFileSync(`${__dirname}/../templates/index.art`, "utf8");
// Pré-compiler le template permet de gagner en performances
const render = artTemplate.compile(template);

module.exports = (req, res) => {
  const data = files.map(fileName => ({
    name: fileName,
    url: `https://${req.headers.host}/images/${fileName}`,
  }));

  // Obtention du markup final
  const markup = render({ kitchens: data });

  // res.json est devenu res.send
  res.send(markup);
};

Enfin, le fichier now.json va nous permettre d’ajuster le comportement de notre serveur. Pour un utilisateur, il serait bizarre d’avoir une URL contenant /api. Ainsi, la configuration permet de rediriger la racine de notre site vers notre cloud function.

{
  "routes": [{ "src": "/", "dest": "/api/kitchens.js" }]
}

On re-déploie avec now --prod

server-rendered-markup

Et on à accès à nos photos de cuisines !

Conclusion

Now c’est quand même vachement bien. Actuellement en V2, je regrette juste le fait de ne plus pouvoir déployer de conteneurs Docker.

Une chose que je peux affirmer, est que pour un projet personnel, vous pouvez déployer votre application en 30 secondes sans prise de tête. Que votre application soit constituée de fichiers statiques, d’une API JSON ou de pages dynamiques.

Dans la présentation que j’ai faite, je n’ai pas utilisé de frameworks. Si tel est votre souhait, sachez que Now se chargera de builder votre application pour vous. Que vous utilisiez React, Vue, Angular (ou leur dérivés Gatsby, Gridsom…). Plus d’info par ici.

À travers cette présentation nous avons pu voir certains cas d’utilisations. Bien entendu, je vous invite à expérimenter par vous-même afin de voir l’étendu complète des possibilités de cet outil !

Cimer au valeureux Captain Tatane pour la relecture.

Merci de m’avoir lu.

Liens