Ça part en prod maintenant
Tags: now, cloud, webdev, showdev
Published: 2020-03-11 18:07:48

---
title: Ça part en prod maintenant
published: true
description: Déployer un site statique, une API ou des pages dynamiques avec Now
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/nn3bwe0k17ovcxdez2jo.jpg
canonical_url: https://maximeblanc.fr/blog/ca-part-en-prod-maintenant
tags: now, cloud, webdev, showdev
---

On va parler de [Now](https://github.com/zeit/now), c'est pour cela que "Ça part en prod **maintenant**".
&rArr; :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](https://zeit.co/oss). À 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](https://maximeblanc.fr). 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](https://dev-to-uploads.s3.amazonaws.com/i/ohrit674fbwlefyzmho6.png)

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

## Configuration

Pour commencer, il faut [créer un compte](https://zeit.co/signup). Il est possible de s'inscrire via Github, Gitlab, Bitbucket ou par Email.

Ensuite, on installe de CLI Now.

```bash
yarn global add now
# OU
npm install -g now
```

Enfin, il faut aussi se connecter via le CLI

```bash
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"](https://www.okta.com/security-blog/2019/08/what-is-passwordless-authentication/).

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.

```html
<!-- 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'entre-elles afin d'utiliser la configuration par défaut.
Et... c'est tout.

![now-cli-deployment](https://dev-to-uploads.s3.amazonaws.com/i/k89f5xj3iyyxzmis5vt7.png)

La console nous indique que notre site a été déployé sur la production, accessible depuis **[https://demo-now-deployment.now.sh](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](https://dev-to-uploads.s3.amazonaws.com/i/hs2fewhr6i0q0m2njf27.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/z4ojhwas0ecf0n0bvlc7.png)

```js
// 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](https://demo-now-deployment.now.sh/api/kitchens)**.

![result-api](https://dev-to-uploads.s3.amazonaws.com/i/x3ej6m1pdbo8kusfmtfg.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/0azys7az4vf4c3brc0jo.png)

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

```html
<!-- 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>
```

```js
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.

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

On re-déploie avec `now --prod`

![server-rendered-markup](https://dev-to-uploads.s3.amazonaws.com/i/zoxs53bsk0akt72dbevp.png)

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](https://zeit.co/docs/v2/build-step#optimized-frameworks).

À 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

- [Image en banière](https://www.letelegramme.fr/cotes-darmor/saint-brieuc/saint-brieuc-deux-rafale-en-exercice-a-l-aeroport-02-09-2019-12372916.php)