L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Rendu côté serveur à l'aide d'Adobe IO
De nombreuses applications Web sont écrites à l'aide de frameworks d'applications à page unique (SPA) côté client, tels que ReactJS et Angular. Cela présente de nombreux avantages, cependant, cela évite un léger défi aux moteurs de recherche comme Google pour indexer efficacement le contenu des pages et les rendre disponibles pour une recherche Google. Il existe une solution courante à ce problème appelée rendu côté serveur. « Le rendu côté serveur (SSR) est une technique populaire pour le rendu des SPA côté client sur le serveur, puis l'envoi d'une page entièrement rendue au client. Cela permet aux composants dynamiques d'être servis en tant que balisage HTML statique. Avec toutes les demandes provenant de l'environnement d'exécution AEM, les équipes ont besoin de savoir où envoyer les demandes côté client pour qu'elles soient rendues côté serveur. La recommandation d'Adobe est d'acheminer ces demandes vers Adobe IO Runtime. Cet article de blog décrira la conception technique de l'exécution du SSR dans votre environnement AEM.
Tout d'abord, Adobe IO Runtime (Qu'est-ce que c'est ?)
Pour exécuter dans cet environnement sans serveur, vous devez enregistrer un nouveau projet avec la console IO. Cette opération est dans la console : https://console.adobe.io/
Pour ce projet, vous devrez activer IO Runtime et demander des espaces de noms pour chacun de nos espaces de travail afin que nous puissions l'exécuter. . Lors de la création du projet, vous devez vous assurer de sélectionner le modèle Project Firefly.
La capture d'écran suivante illustre le projet SSR que nous avons configuré :
Namespaces (Project Firefly)
Il existe un espace de noms pour chaque espace de travail.
Ces espaces de noms sont requis pour déployer vos applications. Chaque application se déploiera sur ces espaces de noms uniques. Vous ne voulez pas avoir plusieurs espaces de noms par environnement.
Déploiement de votre application sur IO
UI.Module frontal
Scripts : processeur AEM
Une fois votre application prête, vous devrez créer une interface utilisateur module .serverside dans votre base de code. Une fois le module créé (veuillez consulter l'exemple de référence dans le cadre de la base de code SSR-Adobe-COE), vous devrez mettre à jour votre module ui.frontend pour créer votre application afin qu'elle s'exécute côté serveur. Heureusement, Adobe nous fournit un utilitaire pour créer l'application en utilisant un script appelé AEM Processor :
L'aem-processor.js est responsable de la compilation de votre ui.frontend dans une application ui.serverside que nous pouvons déployer sur Adobe IO Runtime. Ce n'est rien de plus que votre bibliothèque frontale consolidée en un point d'entrée unique ou une action appelée SSR.
UI.Serverside Module
Dans le package.json de votre module ui.serverside, vous devez nommer votre application côté serveur et fournir avec une version.
Veuillez noter : vous devez conserver le numéro de version de votre application côté serveur que vous déployez. Cela se fait manuellement dans le cadre du fichier package.json dans votre application ReactJS.
{
"nom": "RJS-react-package",
"version": "1.0.0-SNAPSHOT" ,
.ENV
Pour qu'Adobe Runtime sache où déployer, vous devez mettre à jour le fichier .env dans votre module ui.serverside :
[19659002]Configurations de l'environnement Adobe IO :
Déploiement local
Lors du déploiement à partir de votre ordinateur local, exécutez les commandes suivantes :
Une fois terminé, cela ressemblera à ceci :
Où… • https://24244-ssrapp-stage.adobeioruntime.net = espace de noms • RJS-react-package-1.0.0-SNAPSHOT = application-name-version de package.json • ssr = action
Déploiement via le pipeline TDP (CI/CD)
Vous avez plusieurs choix lorsque vous considérez comment cela affecte le pipeline CI/CD. Vous pouvez effectuer le déploiement pendant le processus de compilation, ou vous pouvez l'effectuer après la compilation.
Processus de compilation (à l'aide de Jenkins) :
Personnalisez l'exécution de la commande maven du pipeline pour ajouter des étapes supplémentaires module ui.serverside. Cela donne la possibilité de ne pas valider le fichier app.js dans la base de code, mais d'utiliser simplement le fichier généré lors de la compilation pour le déployer sur AIO Runtime. ajoutez une étape personnalisée supplémentaire pour exécuter la commande « aio app deploy » en vérifiant le référentiel et en plongeant dans le module ui.serverside. La dépendance de cette approche consiste à valider le fichier app.js dans le référentiel.
Remarque : Il est également recommandé de supprimer les anciennes versions de vos applications en purgeant votre fichier app.js.
Routage de votre demande vers SSR
Paramètres de configuration d'usine AEM
Pour acheminer votre demande SSR vers Adobe IO, vous devez d'abord créer une configuration d'exécution pour stocker le chemin racine, le chemin du serveur React et si vous le souhaitez pour envoyer le code à traiter côté serveur. Veuillez consulter la capture d'écran ci-dessous.
Pour tester les performances du SSR, vous le faites dans le contexte des pages qui sont rendues dans le cadre du SSR. Vous voudrez également écrire des scripts de test de charge (nous avons utilisé des scripts Flood IO) pour tester l'exécution de pages à partir d'un navigateur via le CDN, via le répartiteur, via l'éditeur, vers Adobe IO.
Pour que ce test soit pris en compte réussi, le script flood IO doit vider le cache CDN et le cache du répartiteur toutes les 5 requêtes afin de s'assurer que la charge appropriée est testée sur Adobe IO.
Le rendu côté serveur est requis pour prendre en charge l'optimisation des moteurs de recherche. Adobe recommande l'utilisation d'Adobe IO Runtime pour exécuter le ServerSide Rendering (SSR). stimuler l'efficacité organisationnelle et augmenter les revenus en utilisant des stratégies éprouvées de marketing numérique / commerce électronique. Robert est spécialisé dans les industries manufacturière et automobile.