WebPerf, sécurité et
hébergement avec la JAMStack
Par Sébastien Rodriguez
@sebtiz13
Who I am
Petit état des lieux
Serveur
- Apache / Nginx
- Mysql
- PHP
Outils
Pléthore de CMS
(Wordpress, Drupal, Joomla)
La stack classique
Workflow de création
Comment les CMS gère une visite ?
Une visite classique
Visite avec du cache
Si on simplifiait tout ça ?
Serveur
Apache / Nginx ou Serverless
Outils
- Gestion du contenu
CMS classique ou CMS headless - Générateur de site
(Gatsby, Nuxt, Jekyl, Hugo)
La JAMStack
Workflow de création
Comment est géré une visite statique ?
Visite avec la JAMStack
Comment on fait pour le contenu dynamique ?
les sites Web devraient survivre à leurs CMS
<?php $MyCMS->get_post(12); ?>
<h1>
<?php echo post_title(); ?>
</h1>
<?php echo post_contents(); ?>Comparaisons
[
{
id: 12,
title: "Exemple title",
authorName: "Sebtiz13",
dateCreated: "2019-02-13 20:30:00",
postContent: "<p>Exemple content</p>"
}
]Les avantages
- Hébergement CDN rapide
- Scalabilité plus simple et moins coûteuse
- Gestion du versionnement simplifié
- Pas de problème de réplication
- Moins de faille de sécurité exposé
- Moins dépendance à des technologies propriétaires
Bonnes pratiques
- Hébergement sur un CDN
- TOUT est versionné avec git
- Outils de construction modernes
- Builds automatiques
- Déployement atomiques
- Invalidation du cache instantannée
Les compagnons
Mise en pratique
Javascript
Vue.js
Api
Markup
Template
<template>
<section>
<h1>Les derniers articles</h1>
<l-article
v-for="post in posts"
:key="post.id"
:post="post"
/>
</section>
</template>
<script>
export default {
async asyncData () {
// Récupère les articles
const posts = await this.$axios.get('/posts').then(({ data }) => data.map(post => {
// Fait quelque chose
return post
}))
// Retourne les posts
return { posts }
}
}
</script>Résultat
<div data-server-rendered="true" id="__nuxt">
<!---->
<div id="__layout">
<section>
<h1>Les derniers articles</h1>
<article>
<img src="http://cdn.sebtiz13.fr/example.jpg" alt="example">
<main>content</main>
<a href="/articles/example">Lire la suite</a>
</article>
</section>
</div>
</div>
<script>
window.__NUXT__ = (function (a, b, c) {
return {
layout: "default",
data: [{ posts: [{ ... }] }],
error: null,
serverRendered: true
}
}("...", "...", "..."));
</script>C'est prêt quand ?
- Début de la tendance : 2015
- Monté en popularité 2017 (Smashing Magazine)
- 2018 les outils et services arrivent à maturité
Tendance de recherche :
Lien utiles
Merci !
WebPerf, sécurité et hébergement avec la JAMStack
By sebtiz13
WebPerf, sécurité et hébergement avec la JAMStack
On a pratiquement tous l'habitude d'utiliser un CMS comme Worpress, Drupal ou Joomla pour gérer du contenu qui est finalement plutôt statique. Ces solutions demandent souvent pas mal de ressources aux serveurs et ont une forte dépendance à la base de données, sans parler des failles de sécurité qu'il faut surveiller. Ce qui engendre souvent du stress et des gros coûts d'hébergement. Mais Sébastien Rodriguez (Développeur web à Laëtis) va vous présenter comment économiser et dormir tranquille tout en rendant votre site beaucoup plus rapide grâce aux générateurs de site statique sans trop d'effort. Un atelier de mise en pratique sera proposé après la présentation.
