Comment créer un site multilingue avec Webflow en configurant un reverse proxy ?

Disclaimer : avec la sortie de la feature de Localization de Webflow, créer un reverse proxy pour un projet multilingue ne présente plus autant d'avantages. Il reste néanmoins intéressant pour certains projets (par exemple quand vous avez plus de 10K items).

Qu’est-ce qu’un reverse proxy ?

Un proxy joue le rôle d’intermédiaire entre un serveur et votre navigateur (aussi appelé client). Il permet d’attribuer un droit de passage à une requête. Dans ce cas, le serveur proxy est situé devant le client et c’est ce dernier qui utilisera le serveur proxy.

Exemple : dans certaines entreprises, un proxy est mis en place pour filtrer l’accès à certains sites depuis les ordinateurs des employés.

Un reverse proxy joue le rôle inverse c'est-à-dire qu’il va permettre à une personne connectée à internet d’accéder à des serveurs. Ici, le reverse proxy est situé devant le serveur et c’est ce dernier qui utilisera le reverse proxy.

Pour des explications plus complètes et détaillées sur le reverse proxy, je vous invite à lire cet article de Kinsta.

‍

Pourquoi utiliser un reverse proxy avec Webflow ?

L’usage principal du reverse proxy se trouve dans le multilingue donc c’est le cas d’usage que je vais prendre. Néanmoins, le multilingue et Webflow fera l’objet d’un article spécifique présentant les différentes solutions avec les avantages et inconvénients.

Cas d’usage :

Vous avez un site en français sur Webflow. Vous souhaitez ajouter une langue à votre site avec le besoin de créer du contenu local sur un blog.

Vous avez besoin, non seulement, de dupliquer vos pages statiques, mais aussi d’une collection Blog FR pour le blog en Français et d’une collection Blog EN pour le blog en Anglais. On va prendre l’exemple de mon site personnel.

Dans un monde idéal, voilà ce qu’on aurait pour un site Webflow en multilingue.

‍

‍

Architecture idéale d’un projet multilingue sous Webflow

• Avoir à construire une seule fois les pages et dire en quelle langue on les souhaite
• Choisir la structure voulue (ici dossier)
• Pouvoir imbriquer des collections pour les faire apparaître dans leur dossier (ici blog)

‍

Contrer les limites de Webflow

‍

Parmi les limites de Webflow, on retrouve les 2 suivantes :

• L’impossibilité de mettre des collections au sein de dossiers
• La complexité d’avoir plusieurs langues sur un même projet

Ainsi, si vous êtes au sein d’un même projet, vous avez plutôt quelque chose qui ressemble à ça :

‍

‍

Comme on le voit, ce n’est pas consistant, car la collection article de blog se retrouve en dehors du dossier /en.

Ca créé de la confusion pour l’utilisateur mais surtout pour les moteurs de recherche. Votre SEO sera impacté.

C’est là que rentre en jeu le reverse proxy !

Vous allez pouvoir avoir 2 projets distincts en parallèle et avoir l’architecture idéale quand même ! Magique, non ?

Ci-dessous, ce sont bien 2 projets distincts avec 2 domaines différents connectés.

‍

‍

On va voir ensuite comment faire en sorte que tout ce qui est sur proxy.benoiteveillard.com apparaisse bien sur le domaine benoiteveillard.com

Et hop, vous résolvez les problèmes cités plus haut avec les avantages SEO de :

• Garder une structure d’URL claire et consistante entre les projets.
• Avoir des dossiers plutôt que des sous domaines
• Pouvoir avoir du contenu local dans chaque langue. Autrement dit, le contenu pourra être spécifique à chaque langue et il ne s’agira pas uniquement d’une traduction de contenus d’articles déjà existants.

‍

Comment mettre en place un reverse proxy avec Cloudflare ?

Pour simplifier, Cloudflare est un service qui permet de protéger et d'accélérer vos sites web. On va l’utiliser pour mettre en place nos règles de reverse proxy.

Chez Justa on l’utilise pour nos projets et on le recommande à nos clients, car il permet vraiment d’améliorer les perfs de votre site.

Il faudra que vous ayez votre domaine connecté à Cloudflare pour faire la manipulation. Ainsi, vous devez changer les serveurs de noms du côté de votre hébergeur de domaines pour faire pointer votre site sur Cloudflare.

Le reverse proxy va permettre de définir une règle parce qu'il agit en tant qu’intermédiaire entre le navigateur et le serveur.

Ainsi, dans Cloudflare la consigne qu’on donne est la suivante : “dès que tu as une requête du type benoiteveillard.com/en, tu vas chercher tout le contenu du site proxy.benoiteveillard.com”.

Concrètement, comment on fait ?

Sur votre projet secondaire (ici proxy.benoiteveillard.com)

• Connecter un sous-domaine sur Webflow et désactiver le SSL de Webflow

‍

‍

• Configurer les entrées DNS de votre projet dans Cloudflare
• Vous devriez avoir proxy.webflow.com et non plus proxy-ssl.webflow.com en tant que valeur pour le CNAME
• Bien mettre Proxied et non pas DNS only (vous devez avoir un nuage orange)

‍

‍

• Aller dans Custom Code et dans href prefix rentrez la valeur /en

‍

Sur votre projet principal (ici benoiteveillard.com), faire de même :

• Connecter un domaine sur Webflow et désactiver le SSL de Webflow
• Configurer les entrées DNS de votre projet dans Cloudflare
• Vous devriez avoir proxy.webflow.com et non plus proxy-ssl.webflow.com en tant que valeur pour le CNAME
• Bien mettre Proxied et non pas DNS only(vous devez avoir un nuage orange)

‍

Cloudflare va désormais générer le certificat SSL car vous l’avez désactivé du côté Webflow. Configurez-le en choisissant un mode de chiffrement complet.

‍

‍

‍

{{newsletter-blog}}

‍

‍

La suite se passe uniquement dans Cloudflare :

• Vous allez créer un “Workers” (un service qui exécute un fichier Javascript donné selon une règle définie)

‍

‍

• Cliquer sur Créer un service
• Donner un nom à ce service (mon-proxy par exemple)
• Choisissez le démarreur par défaut : “Introduction (gestionnaire HTTP)” et faites “créer un service”
• Ensuite, vous allez arriver sur votre page de paramétrage de votre Worker. Cliquez sur “Modification rapide”

‍

‍

• Ici vous allez supprimer le code qui est à gauche pour le remplacer par celui ci-dessous

‍

addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// new URL object to play with,
// based on the one being requested.
// e.g. https://domain.com/blog/page
var url = new URL(request.url)
// set hostname to the place we're proxying requests from
url.hostname = "proxy.benoiteveillard.com"

// remove the first occurence of /blog
// so it requests / of the proxy domain
url.pathname = url.pathname.replace('/en', '')
// pass the modified url back to the request,
let response = await fetch(url, request)
return response;
}

‍

Bien sûr, pensez à changer :

• En ligne 10, le domaine en fonction de celui connecté à Webflow (ici proxy.benoiteveillard.com)
• En ligne 14, le chemin que vous voulez avoir en ligne (ici /en)
• Le chemin en ligne 14 en fonction du sous-domaine

‍

Vous allez avoir ceci

‍

‍

• Vous pouvez faire enregistrer et déployer
• Vous avez fait 90% du chemin. Dès qu’une requête sera faite sur proxy.benoiteveillard.com elle sera redirigée avec un chemin en /en

‍

• Il faut maintenant lui dire sur quel domaine ce chemin doit s’appliquer. On va donc mettre un itinéraire.
• Retournez sur votre Workers dans “Déclencheurs” et faites ajouter un itinéraire. L’Itinéraire sera https://*.benoiteveillard.com/en* et pour la zone choisissez votre domaine

‍

‍

• Et voilà ! Votre reverse proxy est en place et fonctionnel ✅

Vous savez dorénavant pourquoi et comment mettre en place un reverse proxy sur Webflow en utilisant Cloudflare.

Néanmoins, si vous avez une équipe technique dans votre entreprise, allez les consulter pour déterminer quelle est la meilleure solution avec l’architecture déjà en place. En effet, des solutions plus techniques seront potentiellement privilégiées par les développeurs (nginx par exemple).

PS : on a pris un abonnement payant d'un mois pour l'exercice. Le site benoiteveillard.com/en n'est plus en ligne depuis le 18 Juillet 2022.