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.
Este tutorial forma parte de un tutorial de varias partes. Se supone que se han completado los pasos descritos en las partes anteriores.
Aprenda a:
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.
El diagrama anterior muestra este patrón de implementación común.
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:
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.
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.
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.
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í.
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.
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
.
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
.
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í.
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.
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.
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! 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.
Para obtener más información sobre los fragmentos de contenido y GraphQL, consulte los siguientes recursos: