Lancer votre boutique en ligne

Ce guide décrit comment lancer une nouvelle boutique PWA Kit et la rendre accessible à partir de son adresse Web officielle publique. Deux possibilités s’offrent à vous pour lancer et diriger votre trafic vers votre boutique PWA Kit :

  1. Utiliser un CDN tiers comme CloudFlare ou Akamai.
  2. Utiliser le CDN fourni par Managed Runtime.

Dans ce guide, nous utilisons un exemple de boutique en ligne avec les attributs suivants :

  • URL de production : https://www.example.com
  • Identifiant du projet : example
  • Environnements : staging et production

Dans ce guide, le mot « Mobify » apparaît à quelques endroits. Mobify est le nom de la société qui a développé à l'origine la technologie qui est devenue PWA Kit et Managed Runtime. En 2020, Salesforce a acquis Mobify ainsi que l'ensemble de ses technologies.

Le processus de rebranding de Mobify vers Salesforce est toujours en cours. La marque Mobify apparaît encore dans le domaine mobify-storefront.com utilisé pour héberger votre boutique et le domaine cloud.mobify.com utilisé par l'API Managed Runtime. Même si de nouveaux domaines Salesforce remplaceront à terme ces domaines Mobify, la prise en charge des domaines Mobify sera maintenue.

Managed Runtime prend en charge l’utilisation d’un CDN tiers devant une boutique PWA Kit. Commencez par déployer votre environnement avec les paramètres par défaut. Ajoutez ensuite votre boutique en ligne, {{project}}-{{environment}}.mobify-storefront.com, comme origine dans votre CDN tiers. Assurez-vous que le CDN est configuré pour transmettre les éléments suivants : la méthode de requête, le chemin (chaîne de requête comprise), les en-têtes et le corps. Vérifiez également que le CDN est configuré de façon à obéir aux en-têtes de mise en cache HTTP.

Pensez à ajouter un gestionnaire pour refléter les requests HTTP afin de vérifier que le CDN est configuré correctement :

Pensez également à ajouter un proxy avec httpbin.org/anything pour vérifier que les en-têtes transmis aux proxys sont envoyés correctement.

Nous abordons cette mise en service en trois étapes : la préparation, le lancement d'un environnement staging et le lancement de l'environnement de production.

Ce guide suppose que vous avez accès à l'application Web Runtime Admin et à l'API Managed Runtime pour effectuer des tâches administratives. Pour accéder à ces outils, contactez votre administrateur Commerce Cloud et demandez-lui d'ajouter l'un des rôles suivants à votre compte dans Account Manager : Managed Runtime User ou Managed Runtime Admin.

Pour envoyer des requests à l'API Managed Runtime, vous devez inclure une clé d'API dans l'en-tête Authorization de la request HTTP avec la valeur, Bearer {{api_key}}. Pour tous les exemples de requests fournis, n'oubliez pas de remplacer {{api_key}} par votre propre clé API.

Pour trouver votre clé API, connectez-vous à Runtime Admin et accédez à la page Account Settings.

Important : Considérez votre clé API comme un mot de passe, car elle permet aux scripts d'effectuer des opérations en votre nom.

Vous pouvez suivre cette procédure à tout moment, mais nous vous recommandons de le faire dès que vous commencez à utiliser PWA Kit.

Utilisez l'API Managed Runtime ou l'application Web Runtime Admin pour créer un environnement (ou « cible ») appelé staging pour vous entraîner au lancement de votre boutique en ligne.

Voici un exemple de request qui utilise le point de terminaison target de l’API Managed Runtime pour créer un environnement. Remplacez example dans la request par votre propre chaîne d’identification de projet, et remplacez {{api_key}} par votre propre clé API.

Pour obtenir des instructions sur la création d'un environnement avec Runtime Admin, consultez notre guide Administration de Managed Runtime.

Le code de votre boutique doit pouvoir accéder à votre instance B2C Commerce. Vos API doivent donc être accessibles au public.

Imaginez que www.example.com dirige actuellement vers une instance B2C Commerce. Après le lancement, www.example.com dirigera vers le domaine mobify-storefront.com. Le code de votre boutique doit pouvoir communiquer avec les API associées à votre instance B2C Commerce. Vous pouvez choisir de rendre vos API disponibles sur api.example.com et mettre à jour les paramètres du proxy de votre environnement pour l'utiliser. Pour en savoir plus, consultez notre guide Requests via proxy.

Pour permettre à Salesforce d'émettre un certificat TLS pour votre domaine, vous devez créer un enregistrement CNAME. Contactez le Support client Salesforce et demandez-lui de vous fournir les informations nécessaires à la création d'un enregistrement CNAME pour votre boutique.

Créez l’enregistrement CNAME dans les 24 heures suivant la réception des informations. Un enregistrement CNAME ressemble à ceci :

Testez toujours d'abord le processus de lancement sur un environnement Staging.

Supposons que vous lancez une boutique sur staging.example.com, que votre identifiant de projet dans Managed Runtime est example, et que votre paquet est déployé dans un environnement appelé staging.

Réduisez la durée de vie (TTL) pour staging.example.com à une minute. Réduire la TTL accélère le processus de transfert du DNS et, en cas de problème, permet de revenir en arrière rapidement.

Vous pouvez vérifier la TTL à l'aide de la commande dig :

Configurez l'environnement pour recevoir le trafic à partir de l'hôte staging.example.com.

Mettez à jour les paramètres ssr_external_domain et ssr_external_hostname de l'environnement à l'aide de l'API Managed Runtime :

Important : Après cette étape, l'environnement n'est plus accessible à l'adresse de son domaine mobify-storefront.com.

Vérifiez que les nouveaux paramètres sont bien en vigueur en utilisant une commande cURL qui lance une request avec usurpation de DNS :

Le support Salesforce vous fournit un domaine stable suivant la convention {{project}}-{{environment}}-cdn.mobify-storefront.com où {{project}} correspond à l’identifiant de votre projet et {{environment}} à celui de votre environnement.

Changez l'enregistrement CNAME du DNS pour staging.example.com en example-staging-cdn.mobify-storefront.com. Ouvrez votre navigateur Web et accédez à staging.example.com.

Félicitations, vous avez terminé votre lancement test ! ᾗ

Lorsque vous êtes prêt pour le lancement, suivez la même procédure que pour le lancement de test, mais avec votre environnement et votre domaine de production.

À partir de là, le Customer Success Group vous aide à surveiller le trafic du site pour vous assurer que le lancement a bien réussi. L'objectif est de vérifier que tout se passe comme prévu lors du lancement !

Après le lancement, les clients abonnés à la formule Signature Success bénéficient d'un suivi proactif de leur site. Pour profiter de ce service de surveillance renforcée, vous devez indiquer que votre environnement est un environnement de production. Pour en savoir plus, consultez la section sur les environnements dans la Présentation de Managed Runtime.

  • Le paramètre de la cible ssr_external_domain contrôle l'hôte à partir duquel la cible reçoit le trafic. Si l’en-tête HTTP Host d’une request ne correspond pas à cette valeur, la request échoue.
  • Actuellement, Salesforce ne prend pas en charge les URL de boutique en ligne avec un domaine nu comme example.com (sans sous-domaine www). Pour utiliser un domaine nu, vous devez configurer un serveur pour rediriger les requests du domaine nu vers votre CNAME.

Si vous devez ajouter une logique conditionnelle qui modifie le comportement de votre site en fonction du domaine utilisé, il est plus facile de tester cette logique si votre serveur de développement local peut utiliser un domaine personnalisé. Pourquoi auriez-vous besoin d’ajouter ce genre de logique ? Considérons, par exemple, le besoin de rechercher un identifiant client SLAS différent selon le domaine.

Pour exécuter votre serveur de développement local en utilisant un domaine personnalisé :

  1. Modifiez le DNS de votre ordinateur local pour résoudre votre domaine personnalisé en 127.0.0.1 (localhost).
  2. Modifiez ssr.js.
  3. Dans les options transmises à runtime.createHandler, configurez le port sur 80.
  4. Exécutez EXTERNAL_DOMAIN_NAME=www.example.com npm start, en remplaçant la valeur de example.com par votre domaine personnalisé. L’exécution du serveur sur le port 80 peut nécessiter des privilèges administratifs.

Les requests envoyées par votre navigateur vers le domaine personnalisé sont maintenant résolues et routées vers votre serveur de développement local !

Joyeux débogage ! 😊