AEM Headless SPA部署

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

主題：

建立對象：

中繼
開發人員

AEM Headless單頁應用程式(SPA)部署涉及使用React或Vue等架構建立的JavaScript型應用程式，這些架構會以Headless方式使用並與AEM中的內容互動。

部署以Headless方式與AEM互動的SPA時，需要託管SPA並使其可透過網頁瀏覽器存取。

託管SPA

SPA由原生網頁資源的集合所組成： HTML、CSS和JavaScript。這些資源會在組建程式（例如npm run build）期間產生，並部署至主機，以供一般使用者使用。

根據您組織的需求，有各種託管選項：

雲端提供者，例如 Azure 或 AWS。
在公司 資料中心 內部部署 主控
前端主控平台，例如 AWS Amplify、Azure應用程式服務、Netlify、Heroku、Vercel 等。

部署設定

託管與AEM Headless互動的SPA時，主要考量事項為透過AEM網域（或主機）存取SPA，或是在其他網域上存取。原因是SPA是在網頁瀏覽器中執行的網頁應用程式，因此受網頁瀏覽器安全性原則的約束。

共用網域

SPA和AEM會共用網域，當兩者都是由來自相同網域的一般使用者存取時。例如：

AEM存取： https://wknd.site/
已透過https://wknd.site/spa存取SPA

由於AEM和SPA都可從相同網域存取，網頁瀏覽器可讓SPA以不需要CORS的方式對AEM Headless端點執行XHR，並允許共用HTTP Cookie (例如AEM login-token Cookie)。

SPA和AEM流量在共用網域上的路由方式取決於您：具有多種來源的CDN、具有反向Proxy的HTTP伺服器、直接在AEM中託管SPA等等。

以下是SPA生產部署所需的部署設定(在與AEM相同的網域上託管)。

SPA連線到→

AEM 作者

AEM 發佈

AEM預覽

Dispatcher篩選器

✘

✔

跨原始資源共用(CORS)

✘

AEM主機

✘

不同網域

當來自不同網域的一般使用者存取SPA和AEM時，這兩個網域會有所不同。例如：

AEM存取： https://wknd.site/
已透過https://wknd-app.site/存取SPA

由於AEM和SPA可從不同的網域存取，網頁瀏覽器會強制實行安全性原則(例如跨原始資源共用(CORS))，並防止共用HTTP Cookie (例如AEM的login-token Cookie)。

以下是SPA生產部署所需的部署設定(當託管在不同於AEM的網域時)。