DocumentazioneAEMTutorial su AEMTutorial WKND di AEM Sites

Implementazione mediante la pipeline front-end

Last update: Fri Oct 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Intermedio
  • Sviluppatore
  • Amministratore

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 implementa nel CDN incorporato in AEM as a Cloud Service. In questo modo si esce dall'implementazione delle risorse front-end basata su /etc.clientlibs.

Obiettivi objectives

  • Creare ed eseguire una pipeline front-end.
  • Verifica 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

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

Prerequisiti prerequisites

Questo è un tutorial in più parti e si presume che i passaggi descritti in Aggiornare il progetto AEM standard siano stati completati.

Assicurati di disporre di privilegi per la creazione e l'implementazione di pipeline in Cloud Manager e di accesso a un ambiente AEM as a Cloud Service.

Rinominare la pipeline esistente

Rinomina la pipeline esistente da Implementa in ambiente di sviluppo a Implementazione WKND FullStack in ambiente di sviluppo 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.

Rinominare la pipeline

Inoltre, nella scheda Codice origine, 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.

Pipeline di configurazione del codice origine

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 di Configurazione, seleziona l'opzione Pipeline di distribuzione, assegna il nome Implementazione WKND FrontEnd in ambiente di sviluppo, quindi fai clic su Continua

Creare configurazioni pipeline front-end

  1. Come parte dei passaggi per Codice origine, seleziona l'opzione Codice front-end e scegli l'ambiente da Ambienti di implementazione idonei. Nella sezione Codice origine 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.

Creare codice origine per pipeline front-end

Sequenza di distribuzione

  • Esegui prima la pipeline Implementazione WKND FullStack in ambiente di sviluppo rinominata per rimuovere i file clientlib WKND dall'archivio AEM. E soprattutto prepara AEM per il contratto della pipeline front-end aggiungendo i file di configurazione Sling (SiteConfig, HtmlPageItemsConfig).

Sito WKND non formattato

WARNING
Dopo il completamento della pipeline Implementazione WKND FullStack in ambiente di sviluppo, avrai un sito WKND non formattato, che potrebbe apparire danneggiato. Pianifica un'interruzione o esegui l'implementazione 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 Implementazione WKND FrontEnd in ambiente di sviluppo per compilare solo il modulo ui.frontend e implementare le risorse front-end direttamente nella rete CDN.
IMPORTANT
Il sito WKND non formattato è 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 implementazione

  • Apri la pagina qualsiasi del sito WKND, potrai vedere il colore del testo Adobe Red e i file delle risorse front-end (CSS, JS) vengono implementati 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 site.js o qualsiasi altra risorsa statica a cui si fa riferimento nel file HtmlPageItemsConfig.

Sito WKND formattato

TIP
Il $HASH_VALUE$ è lo stesso visualizzato nel campo HASH CONTENUTO della pipeline Implementazione WKND FrontEnd in ambiente di sviluppo. 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 implementa 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