Jamstack Architecture attire une attention croissante et fournit une méthode efficace pour créer un site Web.

L'un des principaux principes de Jamstack est le pré-rendu. Cela signifie générer une série de ressources statiques à l'avance pour permettre le service des visiteurs des CDN ou d'autres environnements d'hébergement statique optimisés à la vitesse la plus rapide et aux frais généraux les plus basses.

Mais si nous étions à l'avance de pré-générer des sites Web, comment pourrions-nous les rendre plus dynamiques? Comment créer un site Web qui a besoin de changements fréquents? Comment gérer le contenu généré par l'utilisateur?

En fait, il s'agit du scénario d'application idéal pour les fonctions sans serveur. JamStack et Serverless sont les meilleurs partenaires, ils se complètent parfaitement.

Cet article explorera un modèle: dans un site Web qui se compose presque entièrement de contenu généré par l'utilisateur, en utilisant des fonctions sans serveur comme une solution de sauvegarde pour les pages pré-générées. Nous adopterons une technique de routage d'URL optimiste où la page 404 est une fonction sans serveur pour ajouter dynamiquement le rendu sans serveur.

Cela semble compliqué? Peut être. Mais ?a marche? Absolument efficace!

Vous pouvez essayer le site Web de démonstration pour en savoir plus sur ce cas d'utilisation. Cependant, essayez-le après avoir lu cet article.

Vous êtes de retour? Super, plongeons-y.

La philosophie de cet exemple de site Web est la suivante: Laissez-vous créer un message chaleureux et un message d'encouragement virtuel à envoyer à des amis. Vous pouvez écrire un message, personnaliser la sucette (ou popsicle, pour mes amis américains) et obtenir une URL à partager avec vos destinataires. Voilà, vous avez illuminé leur journée. Quoi de mieux que ?a?

Traditionnellement, nous utiliserions certains scripts c?té serveur pour traiter les soumissions de formulaires, ajouter de nouvelles sucettes (notre contenu généré par l'utilisateur) à la base de données et générer une URL unique. Nous utilisons ensuite plus de logique c?té serveur pour analyser les demandes de ces pages, interroger la base de données pour obtenir les données nécessaires pour remplir la vue de la page, rendre avec le modèle approprié et le renvoyer à l'utilisateur.

Cela semble raisonnable.

Mais combien cela co?te-t-il de se développer?

Les architectes techniques et les superviseurs techniques rencontrent souvent ce problème lors de l'évaluation de la portée d'un projet. Ils doivent planifier, payer et allouer suffisamment de ressources pour faire face à des situations réussies.

Ce site Web virtuel de la sucette n'est pas une décoration ordinaire. Puisque nous voulons tous nous envoyer des messages positifs, ce site fera de moi un milliardaire! Au fur et à mesure que la nouvelle se propage, les niveaux de circulation vont monter. Je ferais mieux d'avoir une bonne stratégie pour garantir que le serveur peut gérer des charges lourdes. Je pourrais ajouter des niveaux de cache, des équilibreurs de charge et je concevais mes serveurs de base de données et de base de données afin que je puisse partager la charge sans être submergée par la nécessité de créer et de fournir toutes ces sucettes.

Mais… je ne sais pas comment faire ces choses.

Et je ne sais pas combien il en co?te pour ajouter ces infrastructures et les faire fonctionner. C'est compliqué.

C'est pourquoi j'aime simplifier mon hébergement autant que possible avec le pré-rendu.

La fourniture de pages statiques est beaucoup plus simple et moins co?teuse que la fourniture de pages dynamiquement à partir d'un serveur Web qui nécessite une logique pour générer des vues pour chaque visiteur à la demande.

étant donné que nous travaillons sur beaucoup de contenu généré par les utilisateurs, il est toujours logique d'utiliser la base de données, mais je ne le gérerai pas moi-même. Au lieu de cela, je choisirai l'une des nombreuses options de base de données qui peuvent être utilisées comme service. Je vais interagir avec lui via son API.

Je pourrais choisir Firebase, MongoDB ou tout autre nombre de bases de données. Chris a compilé certaines de ces ressources sur un excellent site Web sur des ressources sans serveur, ce qui vaut la peine d'être exploré.

Dans ce cas, je choisis la faune comme mon de données. La faune fournit une excellente API pour stocker et interroger les données. Il s'agit d'un magasin de données de style non-SQL, et c'est exactement ce dont j'ai besoin.

Surtout, Fauna a fait une entreprise complète de fournir des services de base de données. Ils ont une connaissance approfondie du domaine que je n'aurai jamais. En utilisant un fournisseur de base de données en tant que service comme celui-ci, j'ai hérité d'une équipe de services de données experte pour mon projet , notamment une infrastructure à haute disponibilité, une sécurité de capacité et de conformité, des ingénieurs de support qualifiés et une documentation approfondie.

Plut?t que de le faire vous-même, utilisez un tel service tiers, qui est ses forces.

Architecture TL; DR

En faisant face à une preuve de concept, je me retrouve souvent à graffiti certains flux logiques. Voici le doodle que j'ai fait pour ce site Web:

Et quelques explications:

1. Les utilisateurs créent une nouvelle sucette en remplissant un formulaire HTML normal.
2. Le nouveau contenu est enregistré dans la base de données, et sa soumission déclenche la génération et le déploiement de nouveaux sites.
3. Une fois le site déployé, la nouvelle sucette sera accessible via une URL unique. Ce sera une page statique qui est rapidement servie à partir du CDN sans s'appuyer sur des requêtes de base de données ou des serveurs.
4. Aucune nouvelle sucette ne sera accessible en tant que page statique jusqu'à ce que la génération de site soit terminée. Une demande infructueuse à la page Lollipop retombera à une page qui génère dynamiquement la page Lollipop via l'API de la base de données Dynamic Query.

Cette approche assume d'abord des ressources statiques / pré-générées, puis reprend le rendu dynamique lorsque la vue statique n'est pas disponible, ce qui est appelé "statique d'abord", comme décrit par Markus Schork d'Unilever, que j'aime la déclaration.

Description plus détaillée

Vous pouvez creuser directement dans le code du site Web (c'est open source et vous pouvez explorer autant que vous le souhaitez), ou nous pouvons en discuter davantage.

Voulez-vous creuser plus profondément et explorer la mise en ?uvre de cet exemple? Ok, je vais expliquer plus en détail:

• Obtenez des données de la base de données pour générer chaque page
• Publier des données sur l'API de la base de données à l'aide de fonctions sans serveur
• Déclencher une régénération complète du site
• Rendre à la demande lorsque les pages n'ont pas été générées

Générer des pages à partir de la base de données

Plus tard, nous discuterons de la fa?on de publier des données dans la base de données, mais supposons d'abord qu'il y a déjà des entrées dans la base de données. Nous allons générer un site Web qui contient les pages pour chaque entrée.

Les générateurs de sites Web statiques sont très bons dans ce domaine. Ils traitent les données, les appliquent au modèle et sortent les fichiers HTML prêts à servir. Nous pouvons utiliser n'importe quel générateur pour cet exemple. J'ai choisi Eleventy car il est relativement simple et la génération de sites est rapide.

Pour fournir à Eleventy avec certaines données, nous avons de nombreuses options. Une fa?on consiste à fournir un javascript qui renvoie des données structurées. C'est idéal pour interroger les API de la base de données.

Notre fichier de données Eleventy ressemblera à ceci:

 <code>// 設(shè)置與Fauna 數(shù)據(jù)庫的連接。 // 使用環(huán)境變量進(jìn)行身份驗證// 并訪問數(shù)據(jù)庫。 const faunadb = require('faunadb'); const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); module.exports = () => { return new Promise((resolve, reject) => { // 獲取最新的100,000 個條目（為了我們的示例） client.query( q.Paginate(q.Match(q.Ref("indexes/all_lollies")),{size:100000}) ).then((response) => { // 獲取每個條目的所有數(shù)據(jù)const lollies = response.data; const getAllDataQuery = lollies.map((ref) => { return q.Get(ref); }); return client.query(getAllDataQuery).then((ret) => { // 將數(shù)據(jù)發(fā)送回Eleventy 以用于站點構(gòu)建resolve(ret); }); }).catch((error) => { console.log("error", error); reject(error); }); }) }</code>

J'ai nommé ce fichier lollies.js et il mettra toutes les données qu'il renvoie à disposition pour Eleventy dans une collection nommée Lollies.

Nous pouvons maintenant utiliser ces données dans nos modèles. Si vous souhaitez afficher le code qui prend ces données et génère une page pour chaque projet, vous pouvez les afficher dans le référentiel de code.

Soumettre et stocker des données sans serveur

Lorsque nous créons une nouvelle page de sucette, nous devons capturer le contenu utilisateur dans la base de données afin que nous puissions l'utiliser pour remplir la page de l'URL donnée à l'avenir. Pour ce faire, nous utilisons des formulaires HTML traditionnels pour publier des données sur le gestionnaire de formulaire approprié.

Le formulaire ressemble à ceci (ou voir le code complet dans le référentiel):

<code></code>

Les destinataires disent quelque chose de bien que l'expéditeur n'a pas de serveur Web dans notre schéma d'hébergement, nous devons donc concevoir un endroit pour gérer les demandes de publication HTTP soumises à partir de ce formulaire. Il s'agit du cas d'utilisation parfait pour les fonctions sans serveur. J'utilise des fonctions Netlify pour cela. Vous pouvez utiliser des fonctions AWS Lambda, Google Cloud ou Azure si vous préférez, mais j'aime la simplicité du flux de travail des fonctions NetLify, et le fait qu'il conserve mon API sans serveur et mon interface utilisateur dans le même référentiel de code.

C'est une bonne habitude d'éviter de fuir les détails de l'implémentation du backend au frontend. Une séparation claire aide à rendre les choses plus faciles à transplanter et à ranger. Découvrez les propriétés d'action de l'élément de formulaire ci-dessus. Il publie les données sur un chemin appelé / nouveau sur mon site Web, ce qui ne fait pas vraiment allusion au service avec lequel il communiquera.

Nous pouvons l'achever vers n'importe quel service que nous aimons utiliser les redirections. Je l'envoie à la fonction sans serveur que je configurerai dans ce projet, mais il peut être facilement personnalisé pour envoyer des données ailleurs si nous le souhaitons. Netlify nous fournit un moteur de redirection simple et hautement optimisé qui dirige notre trafic au niveau CDN afin que les utilisateurs puissent se rendre très rapidement vers le bon emplacement.

La règle de redirection suivante (située dans le fichier neflify.toml de mon projet) indique la demande / nouveau dans une fonction sans serveur appelée newlolly.js hébergée par les fonctions Netlify.

 <code># 將“new”URL 解析為函數(shù)[[redirects]] from = "/new" to = "/.netlify/functions/newLolly" status = 200</code>

Regardons cette fonction sans serveur:

• Stocker de nouvelles données dans la base de données,
• Créer une nouvelle URL pour la nouvelle page et
• Redirigez les utilisateurs vers la page nouvellement créée afin qu'ils puissent voir les résultats.

Tout d'abord, nous aurons besoin de divers utilitaires pour analyser les données de formulaire, nous connecter à la base de données de la faune et créer un ID court et facile à lire pour la nouvelle sucette.

 <code>const faunadb = require('faunadb'); // 用于訪問FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 幫助我們解析表單數(shù)據(jù)// 首先，我們使用我們的數(shù)據(jù)庫設(shè)置一個新的連接。 // 環(huán)境變量幫助我們安全地連接// 到正確的數(shù)據(jù)庫。 const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET })</code>

Maintenant, nous allons ajouter du code à la demande pour gérer les fonctions sans serveur. La fonction de gestionnaire analyse la demande pour obtenir les données requises de la soumission de formulaire, puis générera un ID unique pour la nouvelle sucette, puis la créera dans la base de données en tant que nouvel enregistrement.

 <code>// 處理對無服務(wù)器函數(shù)的請求exports.handler = (event, context, callback) => { // 獲取表單數(shù)據(jù)const data = querystring.parse(event.body); // 添加一個唯一的路徑ID。并記下它- 我們稍后會將用戶發(fā)送到它const uniquePath = shortid.generate(); data.lollyPath = uniquePath; // 組裝準(zhǔn)備發(fā)送到數(shù)據(jù)庫的數(shù)據(jù)const lolly = { data: data }; // 在fauna db 中創(chuàng)建棒棒糖條目client.query(q.Create(q.Ref('classes/lollies'), lolly)) .then((response) => { // 成功！將用戶重定向到此新棒棒糖頁面的唯一URL return callback(null, { statusCode: 302, headers: { Location: `/lolly/${uniquePath}`, } }); }).catch((error) => { console.log('error', error); // 錯誤！返回帶有statusCode 400 的錯誤return callback(null, { statusCode: 400, body: JSON.stringify(error) }); }); }</code>

Vérifions nos progrès. Nous avons un moyen de créer de nouvelles pages de sucettes dans la base de données. Nous avons également une version automatique qui génère une page pour chacun de nos sucettes.

Pour s'assurer qu'il existe un ensemble complet de pages pré-générées pour chaque sucette, nous devons déclencher la reconstruction chaque fois qu'une nouvelle entrée est ajoutée avec succès à la base de données. C'est très facile à faire. Grace à notre générateur de sites Web statique, notre version a été automatisée. Nous n'avons besoin que d'une seule fa?on de le déclencher. Avec Netlify, nous pouvons définir n'importe quel nombre de crochets de construction. Ce sont des webhooks et s'ils re?oivent des demandes de post HTTP, ils reconstruisent et déploieront notre site. Ceci que j'ai créé dans la console de gestion de sites de Netlify:

Pour régénérer le site, y compris les pages de chaque sucette enregistrées dans la base de données, nous pouvons émettre une demande HTTP Post à ce crochet de construction immédiatement après avoir enregistré les nouvelles données dans la base de données.

Voici le code qui fait ceci:

 <code>const axios = require('axios'); // 簡化發(fā)出HTTP POST 請求// 觸發(fā)新的構(gòu)建以永久凍結(jié)此棒棒糖axios.post('https://api.netlify.com/build_hooks/5d46fa20da4a1b70XXXXXXXXX') .then(function (response) { // 在無服務(wù)器函數(shù)的日志中報告console.log(response); }) .catch(function (error) { // 描述無服務(wù)器函數(shù)日志中的任何錯誤console.log(error); });</code>

Vous pouvez le voir dans le code complet, qui a été ajouté au gestionnaire réussi pour l'insertion de la base de données.

Tout cela est bon si nous sommes prêts à attendre que la construction et le déploiement se terminent avant de partager l'URL de la nouvelle sucette avec le destinataire. Mais nous ne sommes pas patients et nous voulons immédiatement le partager lorsque nous obtenons une nouvelle URL pour la sucette que nous venons de créer.

Malheureusement, si nous accédons à l'URL avant que le site ne termine la régénération pour inclure la nouvelle page, nous obtiendrons un 404. Mais c'est un plaisir de profiter de ce 404.

Scénarios de routage d'URL optimistes et de sauvegarde sans serveur

à l'aide d'un routage 404 personnalisé, nous avons la possibilité d'envoyer chaque demande échouée à la page Lollipop sur une page qui peut rechercher directement les données Lollipop dans la base de données. Nous pouvons le faire dans Client JavaScript si nous le voulons, mais une meilleure fa?on consiste à générer dynamiquement une page prête à afficher à partir de la fonction sans serveur.

La méthode est la suivante:

Tout d'abord, nous devons dire toutes les demandes qui souhaitent accéder à la page de sucette (ces demandes renvoient vides) pour aller à notre fonction sans serveur. Nous le faisons en ajoutant une autre règle à la configuration de redirection Netlify:

 <code># 未找到的棒棒糖應(yīng)該直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302</code>

Cette règle n'est appliquée que si la demande de page de sucette ne trouve pas de page statique prête à servir. Il crée une redirection temporaire (HTTP 302) vers notre fonction sans serveur, qui ressemble à ceci:

 <code>const faunadb = require('faunadb'); // 用于訪問FaunaDB const pageTemplate = require('./lollyTemplate.js'); // JS 模板文字// 設(shè)置和授權(quán)Fauna DB 客戶端const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); exports.handler = (event, context, callback) => { // 從請求中獲取棒棒糖ID const path = event.queryStringParameters.id.replace("/", ""); // 在DB 中查找棒棒糖數(shù)據(jù)client.query( q.Get(q.Match(q.Index("lolly_by_path"), path)) ).then((response) => { // 如果找到，則返回視圖return callback(null, { statusCode: 200, body: pageTemplate(response.data) }); }).catch((error) => { // 未找到或發(fā)生錯誤，將悲傷的用戶發(fā)送到通用錯誤頁面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

Si une demande pour une autre page (pas à l'intérieur du / le chemin du site / le chemin du site) renvoie un 404, nous n'enverrons pas cette demande à notre fonction sans serveur pour vérifier les sucettes. Nous pouvons envoyer des utilisateurs directement à la page 404. Notre configuration Netlify.toml nous permet de définir n'importe quel nombre de niveaux de routage 404 en ajoutant plus de règles de secours au fichier. La première correspondance réussie dans le fichier sera adoptée.

 <code># 未找到的棒棒糖應(yīng)該直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302 # 真正的404 可以直接轉(zhuǎn)到這里： [[redirects]] from = "/*" to = "/melted/index.html" status = 404</code>

Nous avons fini! Nous avons maintenant un site "Static First" qui essaiera de rendre le contenu dynamiquement à l'aide de fonctions sans serveur si l'URL n'a pas été générée avec un fichier statique.

Très vite!

Prend en charge une plus grande échelle

La technique de déclenchement d'une construction pour régénérer les pages de sucettes à chaque fois qu'une nouvelle entrée est créée n'est pas toujours la meilleure. Bien que l'automatisation des builds signifie le redéploiement des sites est très simple, nous voulons peut-être commencer à limiter et à optimiser les choses lorsque nous commen?ons à devenir très populaires. (C'est juste une question de temps, non?)

Cela n'a pas d'importance. Voici quelques éléments à considérer lorsque nous créons beaucoup de pages et en ajoutant du contenu plus fréquemment dans la base de données:

• Au lieu de déclencher une reconstruction pour chaque nouvelle entrée, nous pouvons reconstruire le site dans un travail prévu. Peut-être que cela peut se produire toutes les heures ou une fois par jour.
• Si vous êtes construit une fois par jour, nous pouvons décider de générer des pages uniquement pour les nouvelles sucettes soumises au cours du dernier jour et mettre en cache les pages générées chaque jour pour une utilisation future. Cette logique dans la construction nous aidera à soutenir un grand nombre de pages de sucettes sans rendre la construction trop longue. Mais je ne parlerai pas de cache in-batiment ici. Si vous êtes curieux, vous pouvez demander au Forum de la communauté Netlify.

En combinant des ressources pré-générées statiques avec des solutions de sauvegarde sans serveur qui fournissent un rendu dynamique, nous pouvons répondre à une gamme de cas d'utilisation étonnamment large - tout en évitant la nécessité de configurer et de maintenir un grand nombre d'infrastructures dynamiques.

Quels autres cas d'utilisation pouvez-vous utiliser cette approche "d'abord statique" pour se réunir?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!