AEM Configuración rápida sin encabezado para AEM as a Cloud Service

AEM AEM SPA AEM La configuración rápida sin encabezado le permite ponerse en contacto con el contenido sin encabezado mediante el contenido del proyecto de muestra del sitio WKND y una aplicación React de muestra (una aplicación de react) que consume el contenido a través de las API de GraphQL sin encabezado, lo que le ayuda a utilizar el contenido sin encabezado.

Requisitos previos

Se requiere lo siguiente para seguir esta configuración rápida:

  • Entorno de zona protegida de AEM as a Cloud Service (preferiblemente Desarrollo)

  • Acceso a AEM as a Cloud Service y Cloud Manager

    • AEM Acceso de administrador de a AEM as a Cloud Service
    • Cloud Manager - Administrador de implementación acceso a Cloud Manager
  • Las siguientes herramientas deben instalarse localmente:

1. Crear un repositorio de Git de Cloud Manager

En primer lugar, cree un repositorio Git de Cloud Manager que se utilice para implementar el sitio WKND. AEM El sitio WKND es un ejemplo de proyecto de sitio web que contiene contenido (fragmentos de contenido) y un punto final de GraphQL AEM que utiliza la aplicación React de configuración rápida.

Screencast de pasos

  1. Vaya a https://my.cloudmanager.adobe.com

  2. Seleccione el programa de Cloud Manager que contiene el entorno de AEM as a Cloud Service que se utilizará para esta configuración rápida

  3. Cree un repositorio Git para el proyecto del sitio WKND

    1. Seleccione Repositorios en la barra de navegación superior
    2. Seleccione Agregar repositorio en la barra de acciones superior
    3. Asigne un nombre al nuevo repositorio Git: aem-headless-quick-setup-wknd
      • Los nombres de los repositorios de Git deben ser únicos para cada organización de Adobe,
    4. Seleccione Guardar y espere a que se inicialice el repositorio Git

2. Insertar el proyecto del sitio WKND de muestra en el repositorio Git de Cloud Manager

Con el repositorio Git de Cloud Manager creado, clone el código fuente del proyecto del sitio WKND desde GitHub y lo inserta en el repositorio Git de Cloud Manager. Ahora, Cloud Manager permite acceder al proyecto del sitio WKND e implementarlo en el entorno de AEM as a Cloud Service.

Screencast de pasos

  1. Desde la línea de comandos, clone el código fuente del proyecto WKND de muestra desde GitHub

    code language-shell
    $ mkdir -p ~/Code
    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  2. Añadir el repositorio Git de Cloud Manager como remoto

    1. Seleccione Repositorios en la barra de navegación superior

    2. Seleccione Acceder a la info del repositorio en la barra de acciones superior

    3. Se encontró el comando Execute en Agregue un remoto a su repositorio Git desde la línea de comandos

      code language-shell
      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
      
  3. Inserte el código fuente del proyecto de ejemplo desde el repositorio Git local al repositorio Git de Cloud Manager

    code language-shell
    $ git push adobe main:main
    

    Cuando se le soliciten credenciales, proporcione Nombre de usuario y Contraseña del modal Información del repositorio de Cloud Manager.

3. Implementar el sitio WKND en AEM as a Cloud Service

Con el proyecto del sitio WKND insertado en el repositorio de Git de Cloud Manager, no se puede implementar en AEM as a Cloud Service mediante canalizaciones de Cloud Manager.

AEM Tenga en cuenta que el proyecto del sitio WKND proporciona contenido de muestra que la aplicación React consume a través de las API de GraphQL sin encabezado de la red de distribución de contenido.

Screencast de pasos

  1. Adjunte una canalización de implementación que no sea de producción al nuevo repositorio Git

    1. Seleccione Canalizaciones en la navegación superior

    2. Seleccione Agregar canalización en la barra de acciones superior

    3. En la ficha Configuración

      1. Seleccionar la opción Canalización de implementación
      2. Establecer nombre de canalización que no sea de producción en Dev Deployment pipeline
      3. Seleccione Déclencheur de implementación > En cambios de Git
      4. Seleccione Comportamiento de errores de métricas importantes > Continuar inmediatamente
      5. Seleccionar Continuar
    4. En la ficha Código Source

      1. Seleccione la opción Código de pila completa
      2. Seleccione el entorno de desarrollo de AEM as a Cloud Service del cuadro de diálogo Entornos de implementación aptos
      3. Seleccione aem-headless-quick-setup-wknd en el cuadro de selección Repositorio
      4. Seleccione main del cuadro de selección Rama de Git
      5. Seleccionar Guardar
  2. Ejecutar la canalización de implementación de desarrolladores

    1. Seleccione Información general en la barra de navegación superior
    2. Busque la canalización de implementación de desarrolladores recién creada en la sección Canalizaciones
    3. Seleccione a la derecha de la entrada de la canalización
    4. Seleccione Ejecutar y confirme en el modal
    5. Seleccione a la derecha de la canalización en ejecución
    6. Seleccionar Ver detalles
  3. Desde los detalles de ejecución de la canalización, monitorice el progreso hasta que se complete correctamente. La ejecución de la canalización debe tardar entre 30 y 40 minutos.

4. Descargue y ejecute la aplicación WKND React

Con AEM as a Cloud Service AEM arrancado con el contenido del proyecto del sitio WKND, descargue e inicie la aplicación React de WKND de ejemplo que consume el contenido del sitio WKND a través de las API de GraphQL sin encabezado

Screencast de pasos

  1. Desde la línea de comandos, clone el código fuente de la aplicación React desde GitHub.

    code language-shell
    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Abra la carpeta ~/Code/aem-guides-wknd-graphql/react-app en su IDE.

  3. En el IDE, abra el archivo .env.development.

  4. Elija el URI de host del servicio AEM as a Cloud Service Publish desde la propiedad REACT_APP_HOST_URI.

    code language-plain
    REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
    ...
    

    Para encontrar el URI de host del servicio AEM as a Cloud Service Publish:

    1. En Cloud Manager, seleccione Entornos en la barra de navegación superior
    2. Seleccione el entorno Development
    3. Busque la tabla Servicio de Publish AEM (y Dispatcher) vínculo Segmentos de entorno
    4. Copie la dirección del vínculo y utilícela como URI del servicio AEM as a Cloud Service Publish
  5. En el IDE, guarde los cambios en .env.development

  6. Desde la línea de comandos, ejecute la aplicación React

    code language-shell
    $ cd ~/Code/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  7. La aplicación React, que se ejecuta localmente, comienza en http://localhost:3000 y muestra un listado de aventuras, que provienen de AEM as a Cloud Service AEM usando API de GraphQL de sin encabezado.

AEM 5. Editar contenido en la

AEM Con la aplicación React de WKND de ejemplo que se conecta a las API de GraphQL AEM sin encabezado y consume contenido de ellas, cree contenido en el servicio de autor de y vea cómo se actualiza de forma conjunta la experiencia de la aplicación React.

Screencast de pasos

  1. Iniciar sesión en el servicio de AEM as a Cloud Service Author

  2. Vaya a Assets > Archivos > WKND Compartido > Inglés > Aventuras

  3. Abrir la carpeta Ciclismo en el sur de Utah

  4. Seleccione el fragmento de contenido Ciclismo en el sur de Utah y seleccione Editar en la barra de acciones superior

  5. Actualice algunos de los campos del fragmento de contenido, por ejemplo:

    • Título: Cycling Utah's National Parks
    • Duración del viaje: 6 Days
    • Dificultad: Intermediate
    • Precio: 3500
    • Imagen principal: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
  6. Seleccione Guardar en la barra de acciones superior

  7. Seleccione Quick Publish de la barra de acciones superior

  8. Actualice la aplicación React que se ejecuta en http://localhost:3000.

  9. En la aplicación React, seleccione la aventura de ciclismo ahora actualizada y verifique los cambios de contenido realizados en el fragmento de contenido.

  10. AEM Con el mismo enfoque, en el servicio de autor de:

    1. Cancele la publicación de un fragmento de contenido de aventura existente y compruebe que se ha eliminado de la experiencia de la aplicación React
    2. Cree y publique un nuevo fragmento de contenido de aventura y verifique que aparece en la experiencia de la aplicación React
    note tip
    TIP
    Si no está familiarizado con la creación y publicación de fragmentos de contenido nuevos o con la cancelación de la publicación de fragmentos de contenido existentes, vea la proyección de pantalla anterior.

Enhorabuena.

Enhorabuena. AEM ¡Ha utilizado con éxito la tecnología sin encabezado para alimentar una aplicación de React!

Para comprender en detalle cómo la aplicación React consume contenido de AEM as a Cloud Service AEM, consulte el tutorial sin encabezado. AEM El tutorial explora cómo se crean los fragmentos de contenido en los y cómo esta aplicación de React consume su contenido como JSON.

Siguientes pasos

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4