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 :
Tarifs
L'offre gratuite sera suffisante dans le cadre de cet article, mais de manière plus générale pour une utilisation personnelle.
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'entre-elles afin d'utiliser la configuration par défaut.
Et... c'est tout.
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".
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.
// 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.
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.
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
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.
Top comments (9)
Cool ton article 👍
T'as déjà mis en place un SSR pour une de tes apps avec now? Bien?
J'utilise principalement Firebase Hosting et je prerender mes apps, mais desfois j'me dis que ça serait pas si mal de passer à du SSR, du coup je serais pas contre un blog post à ce sujet 😉
Pas mis en place personnellement.
Mais j'avais pu lire des articles comme quoi les cloud fonctions de firebase te permettaient de faire du ssr.
J'imagine que c'est le mm principe pour Now.
Je dois dire j'ai jamais poussé plus loin avec Firebase, sûrement possible à travers des fonctions cloud ou genre. Il faudra que je mène l'enquête ;)
Un post en francais!!! 😄
C'est vrai que c'est assez rare :')
La raison : à part Grafikart et le SDZ les autres ressources quand j'ai commencé le dev m'étaient inaccessibles car l'anglais c'était pas vraiment ça...
Donc ça fait toujours un peu de contenu en plus pour les débutants ! :D
Rien à voir mais c'est un homonyme ou tu es bassiste dans ce groupe ? youtu.be/qUBqoFQ5O8A
LOL !!!
Je suis bien le bassiste de cette formation 😄
C'est peut etre indiscret (et mal formulé) mais comment tu connais ça?
Tout simple. J'ai cherché.
Dans ton profile j'ai vu que tu composais, après Google à fait le reste.
"C'est peut etre indiscret (et mal formulé)", vous dites dans votre texte que désormais vous ne lèverez plus le doigt pour vous exprimer. Pas besoin de t'inquiéter car tu poses une question ;)
Donc à mon tour de dire "Oh un groupe qui chante en français !!!" :)
Quel rapport avec Israël ?
Le triangle