Distribuire utilizzando la pipeline front-end
In questo capitolo viene creata ed eseguita una pipeline front-end in Adobe Cloud Manager. Crea i file solo dal modulo ui.frontend e li distribuisce nel CDN incorporato in AEM as a Cloud Service. In questo modo si esce dalla consegna delle risorse front-end basata su /etc.clientlibs.
Obiettivi objectives
- Crea ed esegui una pipeline front-end.
- Verificare che le risorse front-end NON vengano recapitate da
/etc.clientlibsma da un nuovo nome host che inizia conhttps://static-
Utilizzo della pipeline front-end
Prerequisiti prerequisites
Questo è un tutorial in più parti e si presume che i passaggi descritti in Aggiorna progetto standard AEM siano stati completati.
Assicurati di disporre di privilegi per la creazione e la distribuzione di pipeline in Cloud Manager e di accesso a un ambiente AEM as a Cloud Service.
Rinomina pipeline esistente
Rinomina la pipeline esistente da Distribuisci in Dev a Distribuzione WKND fullStack in Dev andando al campo Nome pipeline non di produzione della scheda Configurazione. Questo per rendere esplicito se una pipeline è full stack o front-end semplicemente osservandone il nome.
Inoltre, nella scheda Codice Source, accertati che i valori dei campi Archivio e Ramo Git siano corretti e che il ramo presenti le modifiche al contratto della pipeline front-end.
Creare una pipeline front-end
Per ONLY generare e distribuire le risorse front-end dal modulo ui.frontend, effettuare le seguenti operazioni:
-
Nell'interfaccia utente di Cloud Manager, dalla sezione Pipeline, fai clic sul pulsante Aggiungi, quindi seleziona Aggiungi pipeline non di produzione (o Aggiungi pipeline di produzione) in base all'ambiente AEM as a Cloud Service in cui desideri eseguire la distribuzione.
-
Nella finestra di dialogo Aggiungi pipeline non di produzione, come parte dei passaggi Configurazione, seleziona l'opzione Pipeline di distribuzione, assegna a essa il nome Distribuzione WKND FrontEnd a Dev, quindi fai clic su Continua
- Come parte dei passaggi per Codice Source, seleziona l'opzione Codice front-end e scegli l'ambiente da Ambienti di distribuzione idonei. Nella sezione Codice Source verifica che i valori dei campi Archivio e Ramo Git siano corretti e che il ramo presenti le modifiche al contratto della pipeline front-end.
E soprattutto per il campo Posizione codice il valore è/ui.frontend. Infine, fai clic su Salva.
Sequenza di distribuzione
- Eseguire prima la pipeline FullStack WKND Deploy in Dev rinominata per rimuovere i file clientlib WKND dall'archivio AEM. E soprattutto preparare l'AEM per il contratto della pipeline front-end aggiungendo file di configurazione Sling (
SiteConfig,HtmlPageItemsConfig).
- Infine, esegui la pipeline Distribuzione WKND FrontEnd su Dev per compilare solo il modulo
ui.frontende distribuire le risorse front-end direttamente nella rete CDN.
Verificare le modifiche di stile e il nuovo paradigma di consegna
- Apri la pagina qualsiasi del sito WKND e potrai vedere il colore del testo rosso Adobe e i file delle risorse front-end (CSS, JS) vengono consegnati dalla rete CDN. Il nome host della richiesta di risorsa inizia con
https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.csse allo stesso modo il sito.js o qualsiasi altra risorsa statica a cui si fa riferimento nel fileHtmlPageItemsConfig.
$HASH_VALUE$ qui è lo stesso visualizzato nel campo HASH CONTENUTO della pipeline Distribuzione WKND FrontEnd per sviluppo. L'AEM riceve una notifica dell'URL CDN della risorsa front-end. Il valore viene archiviato in /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content nella proprietà prefixPath.
Congratulazioni. congratulations
Congratulazioni, hai creato, eseguito e verificato la pipeline front-end che crea e distribuisce solo il modulo 'ui.frontend' del progetto WKND Sites. Ora il team front-end può eseguire rapidamente l’iterazione sulla progettazione e sul comportamento front-end del sito, al di fuori dell’intero ciclo di vita del progetto AEM.
Passaggi successivi next-steps
Nel prossimo capitolo, Considerazioni, verrà esaminato l'impatto sul processo di sviluppo front-end e back-end.