Abilitazione della pipeline front-end enable-front-end-pipeline
Scopri come abilitare la pipeline front-end per i siti esistenti per utilizzare i temi del sito per personalizzarlo più rapidamente.
Panoramica overview
La pipeline front-end è un meccanismo che può distribuire rapidamente solo il codice front-end dei siti Web basato su temi del sito e modelli del sito.
Questa pipeline gestisce solo il codice front-end, rendendo il processo di distribuzione più rapido rispetto alle distribuzioni full-stack. Consente agli sviluppatori front-end di personalizzare facilmente il sito senza dover conoscere AEM.
Per impostazione predefinita, i siti basati sui modelli di sito possono sfruttare la pipeline front-end. Questo documento descrive come adattare i siti esistenti per sfruttare la pipeline front-end.
AEM può configurare il sito per caricare i temi distribuiti con la pipeline front-end, anche se il sito non è stato creato utilizzando modelli e temi del sito, sovrapponendoli a librerie client esistenti.
Dettagli tecnici technical-details
Quando attivi la pipeline front-end per un sito, AEM apporta le seguenti modifiche alla struttura del sito.
- Tutte le pagine del sito includono un file CSS e JS aggiuntivo, che può essere modificato distribuendo aggiornamenti tramite una pipeline front-end di Cloud Manager dedicata.
- I file CSS e JS aggiunti sono inizialmente vuoti. Tuttavia, puoi scaricare una cartella "sorgenti del tema" per impostare la struttura di cartelle necessaria per distribuire gli aggiornamenti del codice CSS e JS tramite la pipeline.
- Solo uno sviluppatore può annullare la modifica eliminando i nodi
SiteConfigeHtmlPageItemsConfigcreati dall'operazione sotto/conf/<site-name>/sling:configs.
Requisiti requirements
AEM puà adattare automaticamente il sito esistente per utilizzare la pipeline front-end. Per poter eseguire questo flusso di lavoro, il sito deve utilizzare v2 o versione successiva del componente Pagina dei Componenti Core.
Abilitazione della pipeline front-end enabling
Consulta Utilizzo dell’Elenco consentiti IP di Cloud Manager con la pipeline front-end.
L'abilitazione del sito viene eseguita dalla console Sites utilizzando la barra Sito.
-
Accedi ad AEM e naviga sul tuo sito tramite la Navigazione globale > Sites.
-
Seleziona il sito nella console. Seleziona la directory principale del sito e non le pagine figlie.
-
Con il sito selezionato, apri il selettore della barra a sinistra e scegli Sito.
-
Nella barra del Sito, fai clic sul pulsante Abilita pipeline front-end.
-
AEM richiede di confermare una panoramica delle modifiche apportate. Una volta confermato, il tuo sito viene adattato.
Ora il tuo sito è pronto per utilizzare la pipeline front-end. Per ulteriori informazioni sulla pipeline front-end e sulla gestione del tema del sito, consulta:
- Utilizzo della barra Sito per gestire il tema del sito
- Percorso di Creazione Rapida dei Siti: questo percorso di documentazione offre una panoramica del processo di distribuzione di un sito tramite la pipeline front-end e lo strumento di Creazione Rapida dei Siti.
- Pipeline CI/CD: questo documento descrive la pipeline front-end nel contesto dei livelli pipeline full-stack e web.
Pipeline front-end e domini personalizzati custom-domains
La pipeline front-end può essere utilizzata con funzionalità domini personalizzati di Cloud Manager, ma tieni presente i seguenti requisiti quando utilizzi le due funzionalità insieme.
File front-end statici static-files
Le risorse front-end statiche distribuite tramite la pipeline front-end verranno servite, per impostazione predefinita, dal dominio statico predefinito di Adobe.
Se hai bisogno di un dominio personalizzato per le risorse front-end, puoi installare un dominio personalizzato sul livello di pubblicazione e configurare Dispatcher per instradare percorsi specifici (ad esempio /static/) alla posizione di hosting statica di Adobe. Questo metodo richiede l'aggiornamento delle regole Dispatcher per inoltrare e memorizzare in cache correttamente le richieste di risorse statiche.
Dopo aver configurato il dominio personalizzato e Dispatcher, puoi configurare AEM per distribuire le risorse front-end dal dominio statico.
Configurazione configuration
Come descritto nella sezione Dettagli tecnici, l'attivazione della funzione Pipeline front-end per un sito crea un nodo SiteConfig e HtmlPageItemsConfig sotto /conf/<site-name>/sling:configs.
Se desideri utilizzare la funzione domini personalizzati di Cloud Manager per il sito insieme alla pipeline front-end per le risorse di stato, è necessario aggiungere proprietà aggiuntive a questi nodi.
-
Impostare la proprietà
customFrontendPrefixinSiteConfigper il sito.- Accedi a
/conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig. - Aggiungere o aggiornare la proprietà
customFrontendPrefix = "https://your-custom-domain.com/static/".
- Accedi a
-
Il valore
prefixPathdiHtmlPageItemsConfigviene aggiornato con il dominio personalizzato.-
Accedi a
/conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig. -
Verificare che
prefixPathrifletta il dominio personalizzato, ad esempioprefixPath = "https://your-custom-domain.com/static/<hash>/...".
- Se necessario, è anche possibile sovrascrivere manualmente questo valore.
-
-
Verifica la configurazione.
- Dopo la distribuzione, verifica che le pagine facciano riferimento correttamente agli artefatti del tema del dominio personalizzato.
- Apri gli strumenti per sviluppatori del browser e controlla i percorsi dei file
theme.cssetheme.jsper verificare che siano caricati dal dominio corretto.
Le pagine del sito fanno quindi riferimento agli artefatti del tema da tale URL aggiornato. Il dispatcher indirizza quindi le richieste di tali risorse al dominio statico.
Best practice per gli sviluppatori front-end best-practices
Se devi sviluppare e testare le risorse front-end localmente prima di distribuirle tramite la pipeline front-end, considera i seguenti approcci:
- Utilizza la modalità proxy di Site Theme Builder per ignorare gli artefatti del tema a livello locale per il test.
- Distribuisci manualmente i file dei temi da un server di sviluppo locale e aggiorna
prefixPathinHtmlPageItemsConfigin modo che corrispondano all'indirizzo del server locale. - Assicurati che la memorizzazione nella cache del browser sia disabilitata durante il test per visualizzare gli aggiornamenti live.
Per ulteriori dettagli sullo sviluppo front-end locale, consulta la documentazione di Site Theme Builder.