分阶段无头部署

Storefront Reference Architecture (SFRA) 和 SiteGenesis 的用户现在可以分阶段部署无头技术。例如，可以使用 PWA Kit 为产品页面部署大胆的新体验，并将结帐流程保持在 SFRA 上，直到无头转换的下一阶段。这种分阶段方法可以帮助您更快启动，并最大限度地减少无头操作过程中的干扰。

本指南介绍如何使用会话桥接和路由规则，以使 PWA Kit 能够支持一组页面而 SFRA 支持另一组页面，并提供无缝的用户体验。

本指南中的说明描述如何组合 PWA Kit 和 SFRA 流程，但相同的说明可以适用于 SiteGenesis。

要使购物者能够在由不同网店架构支持的页面之间无缝导航，需要使用一种称为会话桥接的技术。会话桥接使用 cookie 在不同系统之间共享购物者刷新令牌和会话令牌。

解锁会话桥接的关键是 Shopper Login and API Access Service (SLAS)，这是一种新的基于标准的身份验证和授权解决方案，可通过 HTTP 请求访问。SLAS 的购物者身份验证基于 OpenID Connect，Commerce Cloud 的购物者 API 授权基于 OAuth 2。

当购物者浏览无头网店时，您使用 SLAS 请求访问令牌和刷新令牌，并将它们作为 cookie 存储在购物者的浏览器上。您可以使用 HTTP set-cookie 标头或客户端 JavaScript 设置 cookie。如果购物者从 SFRA 页面转换到 PWA Kit 页面（反之亦然），带有刷新令牌的 cookie 与 HTTP 请求一起发送，网店代码可以使用刷新令牌来登录用户。

创建分阶段无头部署的第一步是设置您的 PWA Kit 应用程序以使用 SLAS（如果您还没有）。按照我们的设置 API 访问指南中的说明进行操作。

要启用 SFRA 的分阶段无头部署，您必须安装 SLAS 插件组合。插件的自述文件中提供了完整的安装说明。

除了会话桥接之外，SLAS 插件还允许您实施其他对购物者友好的功能，例如 90 天用户会话和购物篮持久性。

由于 SLAS 插件是为 SFRA 而设计，因此必须编写额外的代码才能将其与 SiteGenesis 一起使用。SiteGenesis 实施可以在购物者身份验证和授权流程的各个点利用插件中的代码。

因为该插件使用 B2C Commerce Web 服务框架来处理 SLAS API 调用，所以 SiteGenesis 实施可以向插件实现的 Web 服务发出请求。这些 Web 服务包括访客登录、注册客户登录、令牌刷新、注销和合并访客篮。插件还实现合并 API 会话和网店会话的服务。

SiteGenesis 实施还可以使用自定义挂钩 (app.plugin.slas.login) 来实现使用 SLAS 的访客和注册用户的登录。检查 dw.system.request.onSession 中的插件 onSession 挂钩的自定义代码，了解它如何用 SLAS 替换脚本 API 以进行购物者登录。

要使用 PWA Kit 实现会话桥接，您必须在 commerce-api/auth.js 中修改处理 API 授权的代码以使用 cookie 而不是本地存储。

如果您的 PWA Kit 项目是使用 1.5.0 或更高版本的 Retail React App 模板生成的，则可在 auth.js 中取消注释这行代码，并且不需要对文件进行进一步更改。

对于 1.5.0 版之前生成的项目，则必须对 commerce-api/auth.js 进行若干更改。为了节省您的时间，我们创建了包含所有更改的文件的替代版本，并通过公共 gist在 GitHub 上提供。

授权流程从刷新令牌开始。如果刷新令牌 cookie 可用，PWA Kit 应用程序会将刷新令牌交换为访问令牌。否则，应用程序将启动授权代码授予流程，如 OAuth 2 标准所定义。它还遵循代码交换证明密钥 (PKCE) 流程。

当 SLAS 授予新的访问令牌和新的刷新令牌时，应用程序会将它们存储在 cookie 中。然后应用程序向 OCAPI 的创建会话端点 (/session) 发出 POST 请求。此端点创建由 SFRA 使用的会话。应用程序将会话令牌存储在 cookie 中。

PWA Kit 应用程序创建的 Cookie：

  • cc-nx-g - SLAS 访客购物者刷新令牌
  • cc-nx - SLAS 已注册购物者刷新令牌
  • token - SLAS 访问令牌
  • dwsid - Demandware 会话 ID

下图说明了 PWA Kit 的修改授权流程：

相关示意图 -大号

分阶段无头部署的另一个重要方面是路由。要将流量提供给两个不同的系统，我们需要设置 CDN 以将流量路由到两个不同的来源：Managed Runtime 环境和您的 B2C Commerce 实例。

想象以下场景：

您有一个在 www.mystorefront.com 上运行的现有 SFRA 网店。您知道无头架构的优势，并希望利用 PWA Kit 来提供高性能和具有吸引力的体验。同时，您希望将进度风险降至最低，因此您制定了一个计划，使用分阶段的方法启动 PWA Kit 网店。

计划是为漏斗顶部的页面使用 PWA Kit：主页 (/)、类别列表页面 (/category) 和产品详细信息页面 (/product)。这些 PWA Kit 页面部署到在 mystorefront.mobify-storefront.com 上运行的 Managed Runtime 环境。当购物者决定购买时，您将购物者重定向到在 www.mystorefront.com 上运行的现有 SFRA 结帐页面。

如果您是嵌入式 CDN (eCDN) 客户，请联系支持以配置您的路由规则。

现在应该为指向 Managed Runtime 环境 (mystorefront.mobify-storefront.com) 的 PWA Kit 页面的 CDN 区域添加源。

接下来，创建路由规则以根据 URL 路径提供流量。首先收集 PWA Kit 页面的完整路由列表。对于基于 Retail React App 模板的 PWA Kit 项目，路由在 app/routes.jsx 中列出。因为 PWA Kit 的服务器端渲染系统使用代理和静态资产的内部路由，所以还必须在路由规则中包含 /mobify/*。

对于我们的示例场景，必须在您的 CDN 中配置以下路由：

对于您列表中的每个 PWA Kit 路由，配置您的 CDN 以将请求转发到 Managed Runtime 环境（示例场景内的 mystorefront.mobify-storefront.com）。

下图显示如何配置您的 CDN：

相关示意图 -中号

默认情况下，PWA Kit 项目的 Retail React App 模板具有与 SFRA 不同的 URL 路由模式。例如，Retail React App 中产品详细信息页面的 URL 路径是 /products/{productId}.对于 SFRA，模式是 /{categoryId}/{productId}.

我们建议您更改 PWA Kit 网店中的路由模式以匹配您的 SFRA 站点。如果您无法匹配特定页面的 URL 模式（例如当分类 ID 在 URL 中不可用时的产品列表页面），您可以使用重定向插件 设置缩小差距的重定向。插件的自述文件中提供了完整的安装说明。

要完成分阶段无头部署的设置过程，您必须对 PWA Kit 项目进行更多更改。

默认情况下，PWA Kit 使用历史 API 进行导航。当购物者点击使用 React Router 的 <Link> 组件创建的链接时，它会触发软导航到与 app/routes.jsx 定义的路由对象路径匹配的组件。要链接到非 PWA Kit 页面（例如，由 SFRA 提供支持的页面），您必须从 app/routes.jsx 删除与 URL 路径名匹配的任何路由。

例如：从路由数组中删除结账。 Remove-checkout-route

最后，更新 app/routes.jsx 中的 PWA 全面涵盖路由 (/*)。将 PWA <PageNotFound /> 组件替换为到默认源的重定向。