Lanzar su storefront (escaparate)

Esta guía describe cómo lanzar un nuevo storefront de PWA Kit y cómo hacerlo accesible desde la dirección web oficial y pública. Tiene dos opciones para lanzar y enrutar el tráfico hacia su storefront de PWA Kit:

  1. Utilizar una CDN de terceros, como CloudFlare o Akamai.
  2. Utilizar la CDN proporcionada por Managed Runtime.

A lo largo de esta guía utilizamos un storefront de ejemplo con los siguientes atributos:

  • URL de producción: https://www.example.com
  • Código de identificación: example
  • Entornos: staging yproduction

En esta guía, la palabra “Mobify” aparece en varios lugares. Mobify es el nombre de la empresa que originalmente desarrolló la tecnología que se convirtió en PWA Kit y Managed Runtime. En 2020, Salesforce adquirió Mobify junto con toda su tecnología.

El proceso de reposicionamiento de la marca de Mobify a Salesforce sigue en marcha. La marca Mobify todavía aparece en el dominio mobify-storefront.com que se utiliza para albergar su storefront y el dominio cloud.mobify.com utilizado por la Managed Runtime API. Si bien los nuevos dominios de Salesforce acabarán reemplazando los de Mobify, el soporte para los dominios de Mobify continuará.

Managed Runtime admite el uso de una CDN de terceros frente a un storefront de PWA Kit. Comience por desplegar su entorno con la configuración predeterminada. A continuación, agregue su storefront, {{project}}-{{environment}}.mobify-storefront.com, como origen en su CDN de terceros. Asegúrese de que la CDN está configurada para enviar lo siguiente: el método de solicitud, la ruta (incluida la cadena de consulta), los encabezados y el cuerpo. Asegúrese también de que la CDN esté configurada para obedecer a los encabezados de almacenamiento en caché de HTTP.

Considere agregar un encabezado para reflejar las solicitudes de HTTP para verificar que la CDN esté correctamente configurada:

Considere también agregar un proxy con httpbin.org/anything para verificar que los encabezados pasados a proxy se envíen correctamente.

Cubrimos cómo “salir en vivo” en tres etapas: preparación, lanzamiento de un entorno de staging y lanzamiento del entorno de producción (production).

Antes de comenzar

Esta guía asume que usted tiene acceso a la aplicación web Runtime Admin y a la Managed Runtime API para realizar tareas administrativas. Para obtener acceso a estas herramientas, póngase en contacto con su administrador de Commerce Cloud y pídale que añada alguno de los siguientes roles a su cuenta a través del Account Manager: Usuario de Managed Runtime o Managed Runtime Admin.

Para realizar solicitudes a la Managed Runtime API, debe incluir una clave de API en el encabezado de la solicitud de HTTP Authorization con el valor, Bearer {{api_key}}. Para todas las solicitudes de ejemplo proporcionadas, no olvide sustituir {{api_key}} por su clave de API real.

Para encontrar su clave de API, inicie sesión en Runtime Admin y vaya a la página Configuración de la cuenta.

Importante: Trate su clave de API como una contraseña porque permite que los scripts realicen operaciones por usted.

Etapa 1: Preparación

Puede completar estos pasos en cualquier momento, pero le recomendamos que los inicie en cuanto comience a utilizar el PWA Kit.

1. Creación de un entorno de staging

Utilice la Managed Runtime API o la aplicación web de Runtime Admin para crear un entorno (también conocido como objetivo) llamado staging para practicar el lanzamiento del storefront.

Esta es una solicitud de ejemplo que utiliza el extremo target de la Managed Runtime API para crear un entorno. Reemplace example en la solicitud por su cadena de identificación de proyecto real y reemplace {{api_key}} por su clave de API real.

Para obtener instrucciones sobre cómo crear un entorno con Runtime Admin, consulte nuestra guía de Administración de Managed Runtime.

2. Cómo hacer que sus API estén disponibles públicamente

El código de su storefront debe poder acceder a su instancia de B2C Commerce, por lo que sus API deben estar disponibles públicamente.

Suponga que www.example.com se resuelve actualmente en una instancia de B2C Commerce. Después del lanzamiento, www.example.com se resolverá en el dominio mobify-storefront.com. El código de su storefront necesita una forma de dirigirse a las API asociadas con su instancia de B2C Commerce. Puede elegir que sus API estén disponibles en api.example.com y actualizar la configuración del proxy del entorno para utilizarlo. Para obtener más información, consulte nuestra guía de Solicitudes de conexión del proxy.

3. Cómo permitir a Salesforce emitir certificados de TLS

Para permitir que Salesforce emita un certificado TLS para su dominio, debe crear un registro de CNAME. Póngase en contacto con Soporte al cliente de Salesforce y pídales que le proporcionen los detalles necesarios para crear un registro CNAME para su storefront.

Cree el registro CNAME dentro de las 24 horas siguientes a la recepción de los detalles. Un registro CNAME tiene el siguiente aspecto:

Etapa 2: Lance un entorno de staging

Siempre pruebe el proceso de lanzamiento en un entorno de staging primero.

Imagine que quiere lanzar un storefront en staging.example.com, el código de identificación del proyecto en Managed Runtime es example y el paquete se implementa en un entorno llamado staging.

1. Reducir el tiempo de vida del DNS CNAME

Reduce el tiempo de vida (TTL) de staging.example.com a un minuto. Reducir el TTL acelera el proceso de corte de DNS y, si algo sale mal, permite deshacer los cambios rápidamente.

Puede verificar el TTL utilizando el comando dig:

2. Configuración del entorno

Configurar el entorno para recibir tráfico desde el host staging.example.com.

Actualice la configuración del entorno ssr_external_domain y ssr_external_hostname mediante la Managed Runtime API:

Importante: Luego de completar este paso, el entorno deja de ser accesible en el dominio mobify-storefront.com.

Verifique que la nueva configuración esté activa utilizando un comando cURL que haga una solicitud con DNS spoofing:

3. Cómo llevar a cabo un corte de DNS

El servicio de soporte de Salesforce le proporciona un dominio estable siguiendo la convención {{project}}-{{environment}}-cdn.mobify-storefront.com donde {{project}} es el código de identificación de su proyecto y {{environment}} es el código de identificación del entorno.

Actualice el registro DNS CNAME de staging.example.com a example-staging-cdn.mobify-storefront.com. Abra su navegador web y vaya a staging.example.com.

Felicidades, ¡ha completado la prueba de lanzamiento! 🥳

Etapa 3: Lanzamiento del entorno de producción

Una vez que esté listo para el lanzamiento, completa los mismos pasos que hizo para el lanzamiento de prueba, pero con el entorno y dominio production.

A partir de aquí, el grupo de Customer Success le ayudará a monitorear el tráfico del sitio para asegurarse de que el lanzamiento haya sido exitoso. El objetivo es garantizar que todo se desarrolle de la manera esperada durante el lanzamiento.

Después del lanzamiento, los clientes con un Plan Signature Success reciben un servicio de monitoreo proactivo del sitio. Para aprovechar este servicio de mayor monitoreo, debe marcar su entorno como de producción. Para obtener más información, consulte la sección sobre entornos en la Visión general de Managed Runtime.

  • La configuración del objetivo ssr_external_domain controla de qué host recibe tráfico el objetivo. Si el encabezado de HTTP Host de una solicitud no coincide con este valor, la solicitud falla.
  • Actualmente, Salesforce no admite URL de storefronts con un dominio básico como example.com (sin subdominio www). Para utilizar un dominio básico, debe configurar un servidor para redirigir las solicitudes del dominio básico a su CNAME.

Si necesita agregar una lógica condicional que altere la conducta de su sitio según el dominio utilizado, es más fácil probar esta lógica cuando el servidor de desarrollo local puede utilizar un dominio personalizado. ¿Por qué necesitaría agregar este tipo de lógica? Considere, por ejemplo, la necesidad de buscar una identificación de cliente de SLAS diferente según el dominio.

Para ejecutar su servidor de desarrollo local usando un dominio personalizado:

  1. Modifique el DNS de su computadora local para resolver su dominio personalizado para 127.0.0.1 (localhost).
  2. Edite ssr.js.
  3. En las options pasadas a runtime.createHandler, establezca el puerto como 80.
  4. Ejecute EXTERNAL_DOMAIN_NAME=www.example.com npm start y reemplace el valor de example.com con su dominio personalizado. La ejecución del servidor en el puerto 80 podría requerir privilegios administrativos.

¡Las solicitudes de su navegador al dominio personalizado ahora se resuelven y enrutan a su servidor de desarrollo local!

¡Feliz depuración! 😊