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.clientlibs ma da un nuovo nome host che inizia con https://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.

Rinomina pipeline

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.

Pipeline di configurazione del codice Source

Creare una pipeline front-end

Per ONLY generare e distribuire le risorse front-end dal modulo ui.frontend, effettuare le seguenti operazioni:

  1. 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.

  2. 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

Creare configurazioni pipeline front-end

  1. 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.

Crea codice Source per pipeline front-end

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).

Sito WKND non formattato

WARNING
Dopo il completamento della pipeline FullStack WKND Distribuisci su Dev, si avrà un sito WKND non formattato, che potrebbe apparire danneggiato. Pianifica un’interruzione o esegui la distribuzione nelle ore dispari; si tratta di un’interruzione una tantum da pianificare durante il passaggio iniziale dall’utilizzo di una singola pipeline full stack alla pipeline front-end.
  • Infine, esegui la pipeline Distribuzione WKND FrontEnd su Dev per compilare solo il modulo ui.frontend e distribuire le risorse front-end direttamente nella rete CDN.
IMPORTANT
Il sito WKND unstyled è tornato alla normalità e questa volta l'esecuzione della pipeline FrontEnd è stata molto più veloce della pipeline full stack.

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.css e allo stesso modo il sito.js o qualsiasi altra risorsa statica a cui si fa riferimento nel file HtmlPageItemsConfig.

Sito WKND di nuovo stile

TIP
Il $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.

Correlazione valore hash

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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9