Astro avec sous-domaines linguistiques

En mode de service Sous-domaine, Universally sert chaque langue sur son propre sous-domaine, tel que fr.example.com, en récupérant la page de votre domaine principal et en la traduisant. Votre application Astro ne rend que la langue source. L'intégration s'exécute en mode proxy, où elle ajoute les liens hreflang et le sélecteur de langue à vos pages et rien d'autre.

Avant de commencer

• Le projet est en mode de service Sous-domaine. Choisissez Sous-domaine sous Comment les pages traduites doivent-elles être servies ? lors de sa création. Un projet en mode JavaScript peut migrer ici avec Passer aux sous-domaines linguistiques sur sa page Configuration. Le retour d'un projet Sous-domaine vers le SDK n'est pas encore disponible.
• Accès au DNS de votre domaine.
• Le rôle Propriétaire ou Administrateur pour créer le projet, et Propriétaire, Administrateur ou Éditeur pour ajouter des noms d'hôte et cliquer sur Vérifier à nouveau.

Installer en mode proxy

1. Installez le package et ajoutez UNIVERSALLY_API_KEY à .env, comme dans Installer l'intégration Astro.
2. Enregistrez l'intégration avec mode: 'proxy' :

import universally from '@universally-sdk/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  integrations: [universally({ mode: 'proxy' })]
});

3. Ajoutez la balise head une fois dans votre layout, à l'intérieur de <head> :

---
import { UniversallyHead } from '@universally-sdk/astro/components';
---

<head>
  <UniversallyHead />
</head>

Définir UNIVERSALLY_MODE=proxy dans l'environnement fait la même chose que l'option mode.

Ajouter un sous-domaine linguistique

Le tableau de bord est le même pour tous les types de projets et est entièrement couvert dans Sous-domaines linguistiques.

1. Ouvrez Toutes les langues. Dans la carte Langues, cliquez sur Ajouter un sous-domaine pour la langue.
2. Dans Ajouter la langue cible, choisissez Langue et Région, puis sélectionnez le format du Sous-domaine : Code de région, Code de langue ou Personnalisé. Le segment devient le sous-domaine, donc le français avec le Code de langue sur example.com devient fr.example.com. Un www initial est supprimé de votre domaine. L'hôte est créé pour vous.
3. Ajoutez les trois enregistrements DNS affichés avec leur Nom et leur Valeur, dans n'importe quel ordre :

Les enregistrements ne doivent pas être proxys. Sur Cloudflare, définissez Statut du proxy sur DNS uniquement : un enregistrement proxysé se résout en tant qu'enregistrement A, qui ne peut pas être validé.

4. Attendez les vérifications. Elles s'exécutent toutes les 5 minutes, et la vérification ainsi que le certificat prennent quelques minutes. Cliquez sur Vérifier à nouveau pour vérifier immédiatement.
5. Redémarrez ou reconstruisez votre site Astro une fois que le sous-domaine s'affiche comme En direct. Les noms d'hôte sont lus lorsque votre configuration s'exécute.

La pastille d'état indique Ajouter des enregistrements DNS, Vérification en cours, En ligne, DNS déplacé ou Échec. La chronologie passe par DNS ajouté, Domaine vérifié, SSL émis et En ligne. Un nom d'hôte est actif une fois que Cloudflare signale que le nom d'hôte et son certificat sont actifs. Pour les paramètres de langue en général, voir Ajouter des langues.

Ce que le mode proxy rend

Sur https://example.com/about, <UniversallyHead /> rend les liens source et x-default sur votre site, et chaque cible à son nom d'hôte avec le même chemin :

<link rel="alternate" hreflang="en-us" href="https://example.com/about" />
<link rel="alternate" hreflang="fr" href="https://fr.example.com/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />

Ces liens doivent se trouver dans votre HTML source, car le proxy ne sert jamais votre domaine principal. Voir balises hreflang. Le script de sélection suit, sauf si switcher: false est défini.

Le mode proxy ignore tout le reste :

• Pas de routes /fr/. Un chemin de langue sur votre propre serveur reste un 404, ce qui est correct.
• Pas de catalogue, de rapports ou de sondage. Votre serveur communique avec Universally une fois, lors de l'exécution de la configuration.
• /_universally/revalidate répond 404.
• t() et href() retournent leur argument, donc une mise en page écrite pour le mode SDK continue de fonctionner.

Vérifier que cela a fonctionné

• https://fr.example.com/about charge votre page en français.
• La source de https://example.com/about contient un lien vers https://fr.example.com/about.

Si cela ne fonctionne pas

• Une langue est manquante dans les liens : elle n'a pas encore de nom d'hôte actif. Le journal indique « ...n'a pas de nom d'hôte actif dans Universally, elle a donc été omise des liens hreflang ». Terminez ses enregistrements DNS, attendez En ligne, puis reconstruisez.
• Les enregistrements ne peuvent pas être validés : un enregistrement est proxyfié. Sur Cloudflare, changez-le en DNS uniquement.
• Les liens ne changent pas après la mise en ligne d'un sous-domaine : les noms d'hôtes sont lus lors de l'exécution de la configuration. Redémarrez ou reconstruisez.

Plus de cas se trouvent dans Dépannage de l'intégration Astro.