DocumentaciónAEMTutoriales de AEMTutoriales de WKND para desarrollar con AEM Sites

Implementación mediante la canalización front-end

Last update: Sat Oct 18 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Se aplica a:
  • Experience Manager as a Cloud Service

Creado para:

  • Intermedio
  • Desarrollador
  • Administrador

En este capítulo, creamos y ejecutamos una canalización front-end en Adobe Cloud Manager. Solo genera los archivos del módulo ui.frontend y los implementa en la CDN integrada en AEM as a Cloud Service. Por lo tanto, se aleja de la entrega de recursos del front-end que se basa en /etc.clientlibs.

Objetivos objectives

  • Cree y ejecute una canalización front-end.
  • Comprobar que los recursos front-end NO se entreguen desde /etc.clientlibs sino desde un nuevo nombre de host que comience por https://static-

Uso de la canalización front-end

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

Requisitos previos prerequisites

Este es un tutorial de varias partes y se da por hecho que los pasos descritos en Actualizar proyecto estándar de AEM se han completado.

Asegúrese de que tiene privilegios para crear e implementar canalizaciones en Cloud Manager y acceso a un entorno de AEM as a Cloud Service.

Cambiar nombre de canalización existente

Cambie el nombre de la canalización existente de Implementar en desarrollador a Implementar WKND de pila completa en desarrollo. Para ello, vaya al campo Nombre de canalización que no es de producción de la pestaña Configuración. Esto sirve para hacer explícito si una canalización es de pila completa o front-end simplemente con ver su nombre.

Cambiar nombre de canalización

También en la pestaña Código de fiente, asegúrese de que los valores de los campos Repositorio y Rama de Git sean correctos y de que la rama tenga los cambios de contrato de canalización front-end.

Canalización de configuración de código fuente

Crear una canalización front-end

Para generar e implementar SOLAMENTE los recursos front-end desde el módulo ui.frontend, realice los pasos siguientes:

  1. En la interfaz de usuario de Cloud Manager, en la sección Canalizaciones, haga clic en el botón Añadir y, a continuación, seleccione Añadir canalización que no sea de producción (o Añadir canalización de producción) según el entorno de AEM as a Cloud Service en el que desee realizar la implementación.

  2. En el cuadro de diálogo Añadir canalización que no sea de producción, como parte de los pasos de Configuración, seleccione la opción Canalización de implementación, asígnele el nombre Implementar WKND de front-end en desarrollo y haga clic en Continuar

Crear configuraciones de canalización front-end

  1. Como parte de los pasos de Código fuente, seleccione la opción Código front-end y elija el entorno en Entornos de implementación aptos. En la sección Código fuente, asegúrese de que los valores de los campos Repositorio y Rama de Git sean correctos y de que la rama tenga los cambios de contrato de canalización front-end.
    Y, lo más importante, que el valor del campo Ubicación del código sea /ui.frontend. Por último, haga clic en Guardar.

Crear código fuente de canalización front-end

Secuencia de implementación

  • Ejecute primero la canalización Implementar WKND de pila completa en desarrollo, cuyo nombre se acaba de cambiar, para quitar los archivos clientlib de WKND del repositorio de AEM. Y lo más importante, prepare AEM para el contrato de canalización front-end añadiendo archivos de configuración de Sling (SiteConfig, HtmlPageItemsConfig).

Sitio WKND sin estilo

WARNING
Una vez finalizada la canalización Implementar WKND de pila completa en desarrollo, tendrá un sitio WKND sin estilo que podría parecer dañado. Planee una interrupción o implemente durante las horas impares. Se trata de una interrupción única que debe planificar durante el cambio inicial desde el uso de una canalización de pila completa única hasta la canalización front-end.
  • Finalmente, ejecute la canalización Implementar WKND de front-end en desarrollo para generar solo el módulo ui.frontend e implementar los recursos front-end directamente en la CDN.
IMPORTANT
Observará que el sitio WKND sin estilo ha vuelto a la normalidad y esta vez la ejecución de la canalización front-end fue mucho más rápida que la canalización de pila completa.

Verificar cambios de estilo y nuevo paradigma de entrega

  • Abra cualquier página del sitio WKND y podrá ver el color del texto con Adobe Red y los archivos de recursos front-end (CSS, JS) se entregan desde la CDN. El nombre de host de solicitud de recursos comienza con https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css, al igual que el archivo site.js o cualquier otro recurso estático al que haga referencia en el archivo HtmlPageItemsConfig.

Sitio WKND de nuevo estilo

TIP
El $HASH_VALUE$ aquí es el mismo que se ve en el campo HASH DE CONTENIDO de la canalización Implementar WKND de front-end en desarrollo. Se notifica a AEM de la URL de CDN del recurso front-end. El valor se almacena en /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content en la propiedad prefixPath.

Correlación de valores hash

Enhorabuena. congratulations

Enhorabuena. Ha creado, ejecutado y verificado la canalización front-end que solo genera e implementa el módulo “ui.frontend” del proyecto de sitios WKND. Ahora, el equipo front-end puede iterar rápidamente en el diseño y el comportamiento de front-end del sitio, fuera del ciclo de vida completo del proyecto de AEM.

Próximos pasos next-steps

En el capítulo siguiente, Consideraciones, revisará el impacto en el proceso de desarrollo del front-end y del back-end.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9