Activación de la canalización front-end enable-front-end-pipeline
Descubra cómo puede habilitar la canalización front-end para que los sitios existentes utilicen temas del sitio para personalizar el sitio más rápidamente.
Información general overview
La canalización front-end es un mecanismo que puede implementar rápidamente solo el código front-end de sus sitios web en función de temas del sitio y plantillas de sitio.
Esta canalización solo administra el código front-end, lo que hace que el proceso de implementación sea más rápido que las implementaciones de pila completa. Permite a los desarrolladores de front-end personalizar el sitio fácilmente sin necesidad de tener conocimientos de AEM.
Los sitios basados en plantillas de sitio pueden utilizar la canalización front-end de forma predeterminada. Este documento describe cómo puede adaptar los sitios existentes para aprovechar la canalización front-end.
AEM puede configurar el sitio para que cargue temas implementados con la canalización front-end, incluso si el sitio no se creó con plantillas de sitio y temas, colocándolos sobre las bibliotecas de cliente existentes.
Detalles técnicos technical-details
Al activar la canalización front-end para un sitio, AEM realiza los siguientes cambios en la estructura del sitio.
- Todas las páginas del sitio incluyen un archivo CSS y JS adicional, que se puede modificar mediante la implementación de actualizaciones a través de una canalización front-end de Cloud Manager dedicada.
- Los archivos CSS y JS añadidos inicialmente están vacíos. Sin embargo, puede descargar una carpeta "fuentes temáticas" para configurar la estructura de carpetas necesaria para implementar actualizaciones de código CSS y JS a través de la canalización.
- Solo un desarrollador puede deshacer el cambio eliminando los nodos
SiteConfigyHtmlPageItemsConfigque esta operación crea debajo de/conf/<site-name>/sling:configs.
Requisitos requirements
AEM puede adaptar automáticamente el sitio existente para utilizar la canalización front-end. Para poder realizar este flujo de trabajo, el sitio debe usar v2 o posterior del componente de página de los componentes principales.
Activación de la canalización front-end enabling
>Consulte Uso de la Lista de IP permitidas de Cloud Manager con la canalización front-end.
La activación del sitio se realiza desde la consola Sitios mediante el carril del sitio.
-
Inicie sesión en AEM y navegue hasta su sitio a través de Navegación global > Sitios.
-
Seleccione el sitio en la consola. Seleccione la raíz del sitio y no cualquier página secundaria.
-
Con el sitio seleccionado, abra el selector de carril a la izquierda y elija Sitio.
-
En el carril del sitio, haga clic en el botón Habilitar canalización front-end.
-
AEM le solicita que confirme con una descripción general de los cambios realizados. Confirme y su sitio estará adaptado.
Ahora, el sitio está listo para usar la canalización front-end. Para obtener más información sobre la canalización front-end y la administración del tema del sitio, consulte lo siguiente:
- Uso del carril del sitio para administrar el tema del sitio
- Recorrido de creación rápida de sitios: este recorrido de documentación le ofrece una visión general de principio a fin del proceso de implementación rápida de un sitio mediante la canalización front-end y la herramienta de creación rápida del sitio.
- Canalizaciones CI/CD: este documento describe la canalización front-end en el contexto de las canalizaciones full-stack y de nivel web.
Canalización front-end y dominios personalizados custom-domains
La canalización front-end se puede usar con la característica de dominios personalizados de Cloud Manager,, pero tenga en cuenta los siguientes requisitos al usar las dos características juntas.
Archivos front-end estáticos static-files
Los recursos front-end estáticos implementados mediante la canalización front-end se proporcionan, de forma predeterminada, desde el dominio estático predefinido de Adobe.
Si necesita un dominio personalizado para los recursos front-end, puede instalar un dominio personalizado en el nivel de publicación y configurar Dispatcher para que enrute rutas específicas (como /static/) a la ubicación de alojamiento estática de Adobe. Este método requiere la actualización de las reglas de Dispatcher para reenviar y almacenar en caché correctamente las solicitudes de los recursos estáticos.
Una vez configurados el dominio personalizado y el despachante, puede configurar AEM para que sirva los recursos front-end desde el dominio estático.
Configuración configuration
Como se describe en la sección Detalles técnicos, al activar la característica de canalización front-end para un sitio se crean SiteConfig y HtmlPageItemsConfig nodos por debajo de /conf/<site-name>/sling:configs.
Si desea utilizar la función de dominios personalizados de Cloud Manager para su sitio junto con la canalización front-end para los recursos de estado, se deben agregar propiedades adicionales a estos nodos.
-
Establezca la propiedad
customFrontendPrefixenSiteConfigpara el sitio.- Navegue hasta
/conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig. - Agregue o actualice la propiedad
customFrontendPrefix = "https://your-custom-domain.com/static/".
- Navegue hasta
-
Esto actualiza el valor
prefixPathdeHtmlPageItemsConfigcon el dominio personalizado.- Navegue hasta
/conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig. - Compruebe que
prefixPathrefleje su dominio personalizado comoprefixPath = "https://your-custom-domain.com/static/<hash>/...".
- Este valor también se puede sobrescribir manualmente según sea necesario.
- Navegue hasta
-
Compruebe la configuración.
- Después de la implementación, compruebe que las páginas hagan referencia correctamente a los artefactos de temas del dominio personalizado.
- Abra las herramientas para desarrolladores del explorador e inspeccione las rutas de archivo
theme.cssytheme.jspara confirmar que se han cargado desde el dominio correcto.
Las páginas del sitio hacen referencia a artefactos de temas de la dirección URL actualizada. A continuación, el despachante enruta las solicitudes de esos recursos al dominio estático.
Prácticas recomendadas para desarrolladores de front-end best-practices
Si necesita desarrollar y probar recursos front-end localmente antes de implementarlos a través de la canalización front-end, tenga en cuenta los siguientes enfoques:
- Use el Modo proxy del generador de temas del sitio para anular los artefactos de temas localmente y realizar pruebas.
- Proporcione manualmente los archivos de tema de un servidor de desarrollo local y actualice
prefixPathenHtmlPageItemsConfigpara que coincida con la dirección del servidor local. - Asegúrese de que el almacenamiento en caché del explorador esté deshabilitado durante la prueba para ver las actualizaciones en directo.
Para obtener más información sobre el desarrollo del front-end local, consulte la documentación del Generador de temas del sitio.