DocumentaciónAEMTutoriales de AEMTutoriales de WKND de AEM Sites

Implementación mediante la canalización front-end

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 basado en /etc.clientlibs.

Objetivos objectives

  • Cree y ejecute una canalización front-end.
  • Compruebe 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

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

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 desarrollador yendo 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 con solo mirar su nombre.

Cambiar nombre de canalización

También en la ficha Código Source, 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 Source

Creación de una canalización front-end

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

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

  2. En el cuadro de diálogo Agregar 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 Implementación de WKND de FrontEnd en Desarrollo y haga clic en Continuar

Crear configuraciones de canalización front-end

  1. Como parte de los pasos de Código Source, seleccione la opción Código front-end y elija el entorno entre Entornos de implementación aptos. En la sección Código Source, 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 para el campo Ubicación del código el valor es /ui.frontend y, finalmente, haz clic en Guardar.

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

Secuencia de implementación

  • AEM Ejecute primero la canalización FullStack WKND Deploy to Dev, cuyo nombre se acaba de cambiar, para quitar los archivos clientlib de WKND del repositorio de. AEM Y lo más importante, prepare el contrato de canalización de front-end para la preparación de la agregando archivos de configuración de Sling (SiteConfig, HtmlPageItemsConfig).

Sitio WKND sin estilo

WARNING
Una vez finalizada la canalización FullStack WKND Deploy to Dev, 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 FrontEnd WKND Deploy to Dev 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 FrontEnd 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 rojo y los archivos de recursos front-end (CSS, JS) se entregan desde la red de distribución de contenido (CDN). El nombre de host de solicitud de recursos comienza con https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css, así como el 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 FrontEnd WKND Deploy to Dev. AEM Se le notifica la dirección 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 valor hash

Enhorabuena. congratulations

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

Pasos siguientes 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