AEM Headless SPA部署

上次更新: 2024-01-26
  • 主题:
  • GraphQL API
    查看有关此主题的更多信息
  • 创建对象:
  • Intermediate
    Developer

AEM Headless单页应用程序(SPA)部署涉及使用框架(如React或Vue)构建的基于JavaScript的应用程序,这些框架以Headless方式使用AEM中的内容并与之交互。

部署可与AEM以Headless方式交互的SPA时,需要托管SPA并使其可通过Web浏览器访问。

托管SPA

SPA由一系列本机Web资源组成: HTML、CSS和JavaScript. 这些资源是在以下期间生成的 生成 流程(例如, npm run build),并部署到主机以供最终用户使用。

有各式各样的 托管 选项取决于贵组织的要求:

  1. 云提供商 例如 AzureAWS.

  2. 内部部署 在公司中托管 数据中心

  3. 前端托管平台 例如 AWS放大Azure App ServiceNetlify赫罗库韦尔塞尔,等等。

部署配置

在托管与AEM Headless交互的SPA时,主要考虑是通过AEM域(或主机)访问SPA,还是将其放在其他域中。 原因是SPA是在Web浏览器中运行的Web应用程序,因此受Web浏览器安全策略的约束。

共享域

当SPA和AEM均由来自同一域的最终用户访问时,它们会共享域。 例如:

  • 通过以下方式访问AEM: https://wknd.site/
  • 通过以下方式访问SPA https://wknd.site/spa

由于AEM和SPA都可从同一域访问,因此Web浏览器允许SPA对AEM Headless端点执行XHR而不需要CORS,并允许共享HTTP Cookie(例如AEM) login-token Cookie)。

SPA和AEM流量在共享域中的路由方式取决于您:具有多个源的CDN、具有反向代理的HTTP服务器、直接在AEM中托管SPA等等。

以下是SPA生产部署所需的部署配置,在与AEM相同的域中托管。

SPA连接到 AEM Author AEM 发布 AEM预览
Dispatcher过滤器
跨源资源共享(CORS)
AEM主机

不同域

当来自不同域的最终用户访问SPA和AEM时,这两个域各不相同。 例如:

  • 通过以下方式访问AEM: https://wknd.site/
  • 通过以下方式访问SPA https://wknd-app.site/

由于AEM和SPA可从不同的域访问,因此Web浏览器会强制实施安全策略,例如 跨源资源共享(CORS),并阻止共享HTTP Cookie(如AEM) login-token Cookie)。

以下是SPA生产部署所需的部署配置(当托管在不同于AEM的域上时)。

SPA连接到 AEM Author AEM 发布 AEM预览
Dispatcher过滤器
跨源资源共享(CORS)
AEM主机

不同域上的SPA部署示例

在此示例中,SPA部署到Netlify域(https://main--sparkly-marzipan-b20bf8.netlify.app/),而SPA会使用AEM发布域中的AEM GraphQL API(https://publish-p65804-e666805.adobeaemcloud.com)。 以下屏幕截图突出显示CORS要求。

  1. SPA来自Netlify域,但会向其他域上的AEM GraphQL API发起XHR调用。 此跨站点请求需要 CORS AEM ,以允许来自Netlify域的请求访问其内容。

    从SPA和AEM主机提供的SPA请求

  2. 检查对AEM GraphQL API的XHR请求, Access-Control-Allow-Origin 存在,向Web浏览器表示AEM允许来自此Netlify域的请求访问其内容。

    如果AEM CORS 缺少或不包含Netlify域,则Web浏览器会导致XHR请求失败,并报告CORS错误。

    CORS响应标头AEM GraphQL API

单页应用程序示例

Adobe提供了一个在React中编码的示例单页应用程序。

React应用程序

以React编写的示例单页应用程序,它使用AEM Headless GraphQL API中的内容。

查看示例

Next.js应用程序

以Next.js编写的示例单页应用程序,它使用AEM Headless GraphQL API中的内容。

查看示例

在此页面上