Redirections avec Netlify et Content Hub ONE / Blogs / Perficient

Aujourd’hui, je vais vous montrer un moyen d’implémenter des redirections en utilisant la fonctionnalité de redirection de Netlify et Content Hub ONE comme référentiel sous-jacent pour gérer les redirections. Cette technique peut être implémentée avec n’importe quel CMS sans tête (par exemple XM Cloud), mais j’ai décidé d’utiliser Content Hub ONE en raison de sa simplicité. De plus, étant donné que Content Hub ONE est encore un tout nouveau CMS sans tête, au moment d’écrire ces lignes, il ne dispose pas de webhooks prêts à l’emploi. Je vais vous montrer une solution de contournement pour obtenir des redirections mises à jour publiées sur Netlify.

Modèle de contenu de redirection

Dans Content Hub ONE, j’ai créé un modèle très simple pour représenter une redirection avec un « chemin de départ » et un « chemin vers » – il peut facilement être complété avec plus de champs tels que le code d’état (301, 302, etc.). Netlify prend en charge la redirection vers d’autres chemins sur le même domaine ou d’autres domaines pleinement qualifiés.

Le GraphQL et le résultat sont très simples et seront faciles à récupérer et à mettre dans notre format de redirection Netlify :

Redirections Netlify

Nous devons ensuite comprendre comment fonctionnent les redirections sur Netlify afin de pouvoir obtenir les bonnes données de Content Hub ONE vers Netlify dans le format attendu. Netlify utilise un fichier plat à la racine appelé _redirects avec des délimiteurs d’espace ou de tabulation entre les valeurs to et from sur chaque ligne :

Note: vous ne pouvez pas accéder directement _redirects sous forme de fichier texte brut via l’URL de votre navigateur. Netlify envoie une erreur au navigateur. La meilleure façon de tester les redirections est donc de les tester individuellement ou d’écrire un autre fichier .txt physique sur le système de fichiers avec le même contenu.

Générer un script Node.js de redirection

Le référentiel complet de un exemple de code est disponible sur GitHub.

Écrivons maintenant un script Node.js pour interroger les redirections dans Content Hub ONE. Puisque ce script s’exécute côté serveur, j’ai décidé d’utiliser Axios pour faire les demandes :

Parce que je fais cette démo avec Next.js, tous les actifs publics doivent être placés dans le public\ dossier. Si vous utilisez cette solution alors que cela n’est pas requis, assurez-vous de mettre à jour votre script.

Notez également le script (node ./scripts/generate-redirects.mjs) est ajouté comme postbuild script dans package.json donc il s’exécute automatiquement après build

Construction Netlify

Créer un nouveau site et construire sur Netlify est ez-pz. Cela vous prendra probablement environ une minute. Puisqu’il s’agit d’une application Next.js, elle a automatiquement effectué la plupart du travail de configuration pour moi :

Assurez-vous également d’ajouter vos variables d’environnement pour API_ENDPOINT et API_KEY qui sont utilisés dans le code :

Encore une fois, à la manière de Netlify, vous pouvez facilement les coller dans Netlify pour les charger :

Construction planifiée pour publier de nouvelles redirections

Nous avons maintenant besoin d’un moyen de créer et de déployer l’application avec de nouvelles redirections au fil du temps afin de maintenir les redirections à jour en fonction du contenu publié. Une fois que Content Hub ONE a introduit les webhooks, nous pouvons utiliser un webhook de publication de contenu pour déclencher une Crochet de construction Netlify pour créer l’application. Étant donné que les webhooks n’existent pas encore dans Content Hub ONE, une solution de contournement consiste à planifier un webhook POST à ​​l’aide de Rêve chimérique. 🙌Merci à Et Solovay pour cette idée de son discours SUGCON NA.

Dans Pipedream, j’ai créé un déclencheur planifié qui s’exécute toutes les heures. Vous pouvez le configurer pour qu’il s’exécute toutes les 5 minutes si vous le souhaitez vraiment, ou à tout intervalle qui vous convient :

Ensuite, j’ai ajouté une étape après le déclencheur du POST à ​​mon hook de build Netlify qui reconstruira l’application et ainsi demandera de nouvelles redirections et reconstruira le _redirects déposer.

Où pouvons-nous aller à partir d’ici

Le but ici est de vous montrer comment exploiter la capacité de redirection de Netlify avec le fichier plat pour exécuter des redirections en périphérie. Vous pouvez utiliser n’importe quel CMS sans tête que vous souhaitez stocker et gérer les redirections. La valeur ajoutée de l’utilisation de Content Hub ONE ici était de montrer comment contourner l’absence de wehbook sur la publication de contenu. L’utilisation d’une tâche planifiée avec une plate-forme d’intégration comme Pipedream peut vous permettre de planifier des builds au fil du temps pour garder le contenu à jour.

Voici quelques idées pour améliorer cette solution :

• Versions Netlify séparées – trouvez un moyen d’exécuter uniquement le script `postbuild` dans une version Netlify. Cela nous permettra d’avoir un hook de construction uniquement pour régénérer les redirections et non pour l’ensemble de l’application. Si vous savez comment faire cela dans Netlify, veuillez commenter ci-dessous !
• Webhooks – la meilleure solution serait d’utiliser un webbook géré par CMS pour la publication de contenu. Une fois que Content Hub ONE les aura introduits, je mettrai à jour et simplifierai la solution.