Implementación de producción con un servicio de AEM Publish

En este tutorial, debe configurar un entorno local para simular el contenido que se distribuye desde una instancia de autor a una instancia de publicación. También generará la compilación de producción de una aplicación React configurada para consumir contenido del entorno de AEM Publish mediante las API de GraphQL. A lo largo del camino, aprenderá a utilizar de forma eficaz las variables de entorno y a actualizar las configuraciones AEM CORS.

Requisitos previos

Este tutorial forma parte de un tutorial de varias partes. Se supone que se han completado los pasos descritos en las partes anteriores.

Objetivos

Aprenda a:

Comprenda la arquitectura de AEM Author y Publish.
Conozca las prácticas recomendadas para administrar variables de entorno.
Aprenda a configurar correctamente AEM para el uso compartido de recursos de origen cruzado (CORS).

Patrón de implementación de publicación de autor

Un entorno de AEM completo está formado por un Autor, una Publicación y un Dispatcher. El servicio Autor es donde los usuarios internos crean, administran y previsualizan contenido. El servicio de publicación se considera el entorno "activo" y es lo que los usuarios finales interactúan con él. El contenido, después de editarse y aprobarse en el servicio Autor, se distribuye al servicio Publicar .

El patrón de implementación más común con AEM aplicaciones sin periféricos es tener la versión de producción de la aplicación conectada a un servicio de AEM Publish.

Patrón de implementación de alto nivel

El diagrama anterior muestra este patrón de implementación común.

Un autor de contenido utiliza el servicio de creación de AEM para crear, editar y administrar contenido.
El Autor de contenido y otros usuarios internos pueden obtener una vista previa del contenido directamente en el servicio Autor. Se puede configurar una versión de Vista previa de la aplicación que se conecte al servicio Autor.
Una vez aprobado el contenido, puede publicarse en el servicio de AEM Publish.
Los usuarios finales interactúan con la versión de producción de la aplicación. La aplicación Producción se conecta al servicio Publicar y utiliza las API de GraphQL para solicitar y consumir contenido.

El tutorial simula la implementación anterior añadiendo una instancia de AEM Publish a la configuración actual. En capítulos anteriores, la aplicación React actuaba como una vista previa conectándose directamente a la instancia de Autor. Se implementará una compilación de producción de la aplicación React en un servidor Node.js estático que se conecte a la nueva instancia de Publish.

Al final, se ejecutarán tres servidores locales:

http://localhost:4502 - Instancia de autor
http://localhost:4503 - Publicar instancia
http://localhost:5000 - React App en modo de producción, conectándose a la instancia de publicación.

Instalación AEM SDK: modo de publicación

Actualmente tenemos una instancia en ejecución del SDK en modo Author. El SDK también se puede iniciar en modo Publish para simular un entorno de publicación de AEM.

Aquí🔗 puede encontrar una guía más detallada para configurar un entorno de desarrollo local .

En el sistema de archivos local, cree una carpeta dedicada para instalar la instancia de publicación, denominada ~/aem-sdk/publish.
Copie el archivo jar de inicio rápido utilizado para la instancia Autor en capítulos anteriores y péguelo en el directorio publish. Alternativamente, vaya al Portal de distribución de software, descargue el último SDK y extraiga el archivo jar de inicio rápido.
Cambie el nombre del archivo jar a aem-publish-p4503.jar.

La cadena publish especifica que el jar de inicio rápido se inicia en modo Publicar. El p4503 especifica que el servidor de inicio rápido se ejecuta en el puerto 4503.
Abra una nueva ventana de terminal y vaya a la carpeta que contiene el archivo jar. Instale e inicie la instancia de AEM:
```
$ cd ~/aem-sdk/publish
$ java -jar aem-publish-p4503.jar
```
Proporcione una contraseña de administrador como admin. Cualquier contraseña de administrador es aceptable, pero se recomienda utilizar el valor predeterminado para el desarrollo local para evitar configuraciones adicionales.
Cuando la instancia de AEM haya terminado de instalarse, se abrirá una nueva ventana del explorador en http://localhost:4503/content.html

Se espera que devuelva una página 404 no encontrada. Se trata de una instancia de AEM completamente nueva y no se ha instalado ningún contenido.

Instale contenido de muestra y extremos de GraphQL

Al igual que en la instancia de autor, la instancia de publicación debe tener habilitados los extremos de GraphQL y necesita contenido de muestra. A continuación, instale el sitio de referencia de WKND en la instancia de publicación.

Descargue el paquete de AEM más reciente compilado para WKND Site: aem-guides-wknd.all-x.x.x.zip.

NOTA

Asegúrese de descargar la versión estándar compatible con AEM como Cloud Service y no la versión classic.
Inicie sesión en la instancia de publicación navegando directamente a: http://localhost:4503/libs/granite/core/content/login.html con el nombre de usuario admin y la contraseña admin.
A continuación, vaya al Administrador de paquetes en http://localhost:4503/crx/packmgr/index.jsp.
Haga clic en Upload Package y seleccione el paquete WKND descargado en el paso anterior. Haga clic en Install para instalar el paquete.
Después de instalar el paquete, el sitio de referencia WKND ya está disponible en http://localhost:4503/content/wknd/us/en.html.
Para cerrar la sesión como usuario admin, haga clic en el botón "Cerrar sesión" de la barra de menús.

A diferencia de la instancia de autor de AEM, las instancias de publicación de AEM toman el acceso de solo lectura anónimo. Queremos simular la experiencia de un usuario anónimo al ejecutar la aplicación React.

Actualizar variables de entorno para que apunten a la instancia de publicación

A continuación, actualice las variables de entorno utilizadas por la aplicación React para que apunten a la instancia de Publish. La aplicación React debe solo conectarse a la instancia Publicar en modo de producción.

A continuación, añada un nuevo archivo .env.production.local para simular la experiencia de producción.

Abra la aplicación WKND GraphQL React en su IDE.
Debajo de aem-guides-wknd-graphql/react-app, agregue un archivo llamado .env.production.local.
Rellene .env.production.local con lo siguiente:
```
REACT_APP_HOST_URI=http://localhost:4503
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
```
El uso de variables de entorno facilita alternar el extremo de GraphQL entre un entorno de Author o Publish sin añadir lógica adicional dentro del código de la aplicación. Puede encontrar más información sobre variables de entorno personalizadas para React aquí.

NOTA

Tenga en cuenta que no se incluye información de autenticación, ya que los entornos de publicación proporcionan acceso anónimo al contenido de forma predeterminada.

Implementar un servidor de nodos estático

La aplicación React se puede iniciar usando el servidor de webpack, pero solo para desarrollo. A continuación, simule una implementación de producción utilizando serve para alojar una compilación de producción de la aplicación React mediante Node.js.

Abra una nueva ventana de terminal y vaya al directorio aem-guides-wknd-graphql/react-app
```
$ cd aem-guides-wknd-graphql/react-app
```
Instale serve con el siguiente comando:
```
$ npm install serve --save-dev
```
Abra el archivo package.json en react-app/package.json. Añada una secuencia de comandos con el nombre serve:
```
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
+   "serve": "npm run build && serve -s build"
},
```
La secuencia de comandos serve realiza dos acciones. En primer lugar, se genera una compilación de producción de la aplicación React. Segundo, el servidor Node.js se inicia y utiliza la compilación de producción.

Vuelva al terminal e introduzca el comando para iniciar el servidor estático:

$ npm run serve

┌────────────────────────────────────────────────────┐
│                                                    │
│   Serving!                                         │
│                                                    │
│   - Local:            http://localhost:5000        │
│   - On Your Network:  http://192.168.86.111:5000   │
│                                                    │
│   Copied local address to clipboard!               │
│                                                    │
└────────────────────────────────────────────────────┘

Abra un explorador nuevo y vaya a http://localhost:5000/. Debería ver la aplicación React que se está sirviendo.

Observe que la consulta GraphQL funciona en la página principal. Inspect solicita XHR con sus herramientas para desarrolladores. Observe que el POST de GraphQL se encuentra en la instancia Publicar en http://localhost:4503/content/graphql/global/endpoint.json.

Sin embargo, ¡todas las imágenes están rotas en la página de inicio!
Haga clic en una de las páginas Detalles de aventura .

Observe que se produce un error de GraphQL para adventureContributor. En los próximos ejercicios, se corrigen las imágenes rotas y los problemas adventureContributor .

Referencias de imagen absoluta

Las imágenes parecen rotas porque el atributo <img src está establecido en una ruta relativa y termina apuntando al servidor estático del nodo en http://localhost:5000/. En su lugar, estas imágenes deberían apuntar a la instancia de publicación de AEM. Hay varias soluciones posibles para esto. Al utilizar el servidor de desarrollo de webpack, el archivo react-app/src/setupProxy.js configura un proxy entre el servidor de webpack y la instancia de autor de AEM para cualquier solicitud a /content. Una configuración proxy se puede utilizar en un entorno de producción, pero debe configurarse en el nivel de servidor web. Por ejemplo, Módulo proxy de Apache.

La aplicación se puede actualizar para incluir una dirección URL absoluta mediante la variable de entorno REACT_APP_HOST_URI . En su lugar, vamos a usar una función de AEM API de GraphQL para solicitar una URL absoluta a la imagen.

Detenga el servidor Node.js.
Vuelva al IDE y abra el archivo Adventures.js en react-app/src/components/Adventures.js.

Agregue la propiedad _publishUrl a ImageRef dentro de allAdventuresQuery:

const allAdventuresQuery = `
{
    adventureList {
    items {
        _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
        ... on ImageRef {
            _path
+           _publishUrl
            mimeType
            width
            height
        }
        }
    }
    }
}
`;

_publishUrl y _authorUrl son valores integrados en el ImageRef objeto para facilitar la inclusión de direcciones url absolutas.

Repita los pasos anteriores para modificar la consulta utilizada en la función filterQuery(activity) para incluir la propiedad _publishUrl.

Modifique el componente AdventureItem en function AdventureItem(props) para hacer referencia a la _publishUrl en lugar de la propiedad _path al construir la etiqueta <img src=''>:

- <img className="adventure-item-image" src={props.adventurePrimaryImage._path} alt={props.adventureTitle}/>
+ <img className="adventure-item-image" src={props.adventurePrimaryImage._publishUrl} alt={props.adventureTitle}/>

Abra el archivo AdventureDetail.js en react-app/src/components/AdventureDetail.js.

Repita los mismos pasos para modificar la consulta de GraphQL y añadir la propiedad _publishUrl para la aventura

 adventureByPath (_path: "${_path}") {
    item {
        _path
        adventureTitle
        adventureActivity
        adventureType
        adventurePrice
        adventureTripLength
        adventureGroupSize
        adventureDifficulty
        adventurePrice
        adventurePrimaryImage {
            ... on ImageRef {
            _path
+           _publishUrl
            mimeType
            width
            height
            }
        }
        adventureDescription {
            html
        }
        adventureItinerary {
            html
        }
        adventureContributor {
            fullName
            occupation
            pictureReference {
                ...on ImageRef {
                    _path
+                   _publishUrl
                }
            }
        }
    }
    }
}

Modifique las dos etiquetas <img> para la imagen principal de la aventura y la referencia de la imagen del colaborador en AdventureDetail.js:

/* AdventureDetail.js */
...
<img className="adventure-detail-primaryimage"
-       src={adventureData.adventurePrimaryImage._path} 
+       src={adventureData.adventurePrimaryImage._publishUrl} 
        alt={adventureData.adventureTitle}/>
...
pictureReference =  <img className="contributor-image" 
-                        src={props.pictureReference._path}
+                        src={props.pictureReference._publishUrl} 
                         alt={props.fullName} />

Vuelva al terminal e inicie el servidor estático:
```
$ npm run serve
```
Vaya a http://localhost:5000/ y observe que aparecen las imágenes y que el atributo <img src''> apunta a http://localhost:4503.

Simular la publicación de contenido

Recuerde que se produce un error de GraphQL para adventureContributor cuando se solicita una página Detalles de aventura. El modelo de fragmento de contenido de Contributor aún no existe en la instancia de publicación. Las actualizaciones realizadas en el Modelo de fragmento de contenido Aventura tampoco están disponibles en la instancia de publicación. Estos cambios se realizaron directamente en la instancia de Autor y deben distribuirse en la instancia de Publicación.

Esto es algo a tener en cuenta al implementar nuevas actualizaciones en una aplicación que se base en actualizaciones de un fragmento de contenido o un modelo de fragmento de contenido.

A continuación, permite simular la publicación de contenido entre las instancias locales Author y Publish .

Inicie la instancia de autor (si no está iniciada) y vaya al Administrador de paquetes en http://localhost:4502/crx/packmgr/index.jsp
Descargue el paquete EnableReplicationAgent.zip e instálelo mediante el Administrador de paquetes.

Este paquete instala una configuración que permite que la instancia de autor publique contenido en la instancia de publicación. Los pasos manuales para esta configuración se pueden encontrar aquí.

NOTA

En un entorno AEM como Cloud Service, el nivel Autor se configura automáticamente para distribuir contenido al nivel Publicar .
En el menú Inicio de AEM, vaya a Herramientas > Recursos > Modelos de fragmento de contenido.
Haga clic en la carpeta WKND Site.
Seleccione los tres modelos y haga clic en Publicar:

Aparece un cuadro de diálogo de confirmación, haga clic en Publicar.
Vaya al fragmento de contenido del campamento de surf de Bali en http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp.
Haga clic en el botón Publish en la barra de menú superior.
El asistente Publicar muestra los recursos dependientes que se deben publicar. En este caso, se muestra el fragmento al que se hace referencia stacey-roswells y también se hace referencia a varias imágenes. Los recursos a los que se hace referencia se publican junto con el fragmento .

Vuelva a hacer clic en el botón Publicar para publicar el fragmento de contenido y los recursos dependientes.
Vuelva a la aplicación React que se ejecuta en http://localhost:5000/. Ahora puede hacer clic en el Bali Surf Camp para ver los detalles de la aventura.
Vuelva a la instancia de Autor de AEM en http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp y actualice el Título del fragmento. Guarde y cierre el fragmento. A continuación, publique el fragmento.
Vuelva a http://localhost:5000/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp y observe los cambios publicados.

Actualizar la configuración de COR

AEM es seguro de forma predeterminada y no permite que las propiedades web que no sean AEM realicen llamadas del lado del cliente. AEM configuración de Cross-Origin Resource Sharing (CORS) puede permitir que dominios específicos realicen llamadas a AEM.

A continuación, experimente con la configuración CORS de la instancia de AEM Publish.

Vuelva a la ventana de terminal donde la aplicación React se está ejecutando con el comando npm run serve:

┌────────────────────────────────────────────────────┐
│                                                    │
│   Serving!                                         │
│                                                    │
│   - Local:            http://localhost:5000        │
│   - On Your Network:  http://192.168.86.205:5000   │
│                                                    │
│   Copied local address to clipboard!               │
│                                                    │
└────────────────────────────────────────────────────┘

Observe que se proporcionan dos direcciones URL. Uno que utiliza localhost y otro que utiliza la dirección IP de red local.

Vaya a la dirección que comienza por http://192.168.86.XXX:5000. La dirección será ligeramente diferente para cada equipo local. Observe que hay un error CORS al recuperar los datos. Esto se debe a que la configuración actual de CORS solo permite solicitudes de localhost.

A continuación, actualice la configuración de AEM Publish CORS para permitir solicitudes de la dirección IP de red.
Vaya a http://localhost:4503/content/wknd/us/en/errors/sign-in.html e inicie sesión con el nombre de usuario admin y la contraseña admin.
Vaya a http://localhost:4503/system/console/configMgr y busque la configuración de WKND GraphQL en com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.
Actualice el campo Orígenes permitidos para incluir la dirección IP de red:

También es posible incluir una expresión regular para permitir todas las solicitudes de un subdominio específico. Guarde los cambios.
Busque Apache Sling Referrer Filter y revise la configuración. La configuración Allow Empty también es necesaria para habilitar las solicitudes de GraphQL desde un dominio externo.

Se han configurado como parte del sitio de referencia WKND. Puede ver el conjunto completo de configuraciones de OSGi a través del repositorio de GitHub.

NOTA

Las configuraciones de OSGi se administran en un proyecto AEM comprometido con el control de código fuente. Un proyecto AEM se puede implementar en AEM como entornos de Cloud Service mediante Cloud Manager. El AEM tipo de archivo del proyecto puede ayudar a generar un proyecto para una implementación específica.
Vuelva a la aplicación React con http://192.168.86.XXX:5000 y observe que la aplicación ya no genera un error CORS.

Felicitaciones!

Felicitaciones! Ahora ha simulado una implementación de producción completa mediante un entorno de AEM Publish. También ha aprendido a utilizar la configuración CORS en AEM.

Otros recursos

Para obtener más información sobre los fragmentos de contenido y GraphQL, consulte los siguientes recursos:

Implementación de producción con un servicio de AEM Publish

Requisitos previos

Objetivos

Patrón de implementación de publicación de autor

Instalación AEM SDK: modo de publicación

Instale contenido de muestra y extremos de GraphQL

Actualizar variables de entorno para que apunten a la instancia de publicación

Implementar un servidor de nodos estático

Referencias de imagen absoluta

Simular la publicación de contenido

Actualizar la configuración de COR

Felicitaciones!

Otros recursos

Recursos en adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Soporte técnico

Recursos

Cuenta de Adobe

Adobe