Distribuire utilizzando la pipeline front-end
In questo capitolo viene creata ed eseguita una pipeline front-end in Adobe Cloud Manager. Crea solo i file da ui.frontend e li distribuisce nella rete CDN integrata in AEM as a Cloud Service. In questo modo ci si allontana dalla /etc.clientlibs distribuzione di risorse front-end basata su.
Obiettivi objectives
- Crea ed esegui una pipeline front-end.
- Verificare che le risorse front-end NON vengano consegnate da
/etc.clientlibsma da un nuovo nome host che inizia conhttps://static-
Utilizzo della pipeline front-end
Prerequisiti prerequisites
Si tratta di un tutorial in più parti in cui si presume che i passaggi descritti in Aggiorna progetto AEM standard sono state completate.
Assicurati di avere privilegi per creare e distribuire pipeline in Cloud Manager e accesso a un ambiente as a Cloud Service AEM.
Rinomina pipeline esistente
Rinomina la pipeline esistente da Implementa in Dev a Distribuzione FullStack WKND in Dev passando al Configurazione della scheda Nome pipeline non di produzione campo. Questo per rendere esplicito se una pipeline è full stack o front-end semplicemente osservandone il nome.
Anche nel Codice sorgente , accertati che i valori dei campi Repository e Ramo Git siano corretti e che il ramo presenti le modifiche al contratto della pipeline front-end.
Creare una pipeline front-end
A SOLO generare e distribuire le risorse front-end da ui.frontend eseguire i passaggi seguenti:
-
Nell’interfaccia utente di Cloud Manager, da Pipeline , fare clic su Aggiungi , quindi seleziona Aggiungi pipeline non di produzione (o Aggiungi pipeline di produzione) in base all’ambiente as a Cloud Service AEM in cui desideri eseguire l’implementazione.
-
In Aggiungi pipeline non di produzione , come parte del Configurazione passaggi, seleziona la Pipeline di implementazione opzione, denominala come Distribuzione WKND FrontEnd in Dev e fai clic su Continua
- Nell'ambito del Codice sorgente passaggi, seleziona la Codice front-end e scegliere l'ambiente da Ambienti di implementazione idonei. In Codice sorgente sezione verificare che i valori dei campi Archivio e Ramo Git siano corretti e che il ramo presenti modifiche al contratto della pipeline front-end.
E più importante per Posizione codice campo il valore è/ui.frontende infine, fai clic su Salva.
Sequenza di distribuzione
- Esegui prima la nuova versione rinominata Distribuzione FullStack WKND in Dev per rimuovere i file clientlib WKND dall’archivio AEM. E soprattutto preparare l’AEM per il contratto di pipeline front-end aggiungendo Configurazione Sling file (
SiteConfig,HtmlPageItemsConfig).
- Infine, esegui il Distribuzione WKND FrontEnd in Dev pipeline da compilare
ui.frontende distribuire le risorse front-end direttamente nella rete CDN.
Verificare le modifiche di stile e il nuovo paradigma di consegna
- Apri il sito WKND qualsiasi pagina e potrai vedere il colore del testo. Rosso Adobe e i file delle risorse front-end (CSS, JS) vengono consegnati dalla 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 site.js o qualsiasi altra risorsa statica a cui si fa riferimento nelHtmlPageItemsConfigfile.
$HASH_VALUE$ qui è uguale a quello che si vede nel Distribuzione WKND FrontEnd in Dev della pipeline HASH CONTENUTO campo. L’AEM riceve una notifica dell’URL CDN della risorsa front-end, il valore viene memorizzato in /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content in prefixPath proprietà.
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, rivedrai l’impatto sul processo di sviluppo front-end e back-end.