AEM Headless SPA部署

Last update: Wed Oct 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

中级
开发人员

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

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

托管SPA

SPA由本机Web资源的集合组成：HTML、CSS和JavaScript。这些资源在生成过程中生成（例如，npm run build），并部署到主机以供最终用户使用。

根据您组织的要求，有各种托管选项：

云提供商，如 Azure 或 AWS。
在公司 数据中心内托管 内部部署
前端托管平台，如 AWS Amplify、Azure App Service、Netlify、Heroku、Vercel 等。

部署配置

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

共享域

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

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

由于AEM和SPA都可从同一域访问，因此Web浏览器允许SPA无需CORS即可对AEM Headless端点执行XHR操作，并且允许共享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/
通过https://wknd-app.site/访问SPA

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

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