使用服务器端渲染 (SSR) 运行时，Spartacus API 调用返回 504（网关超时）答案

【问题标题】：Spartacus API calls return 504 (Gateway Timeout) when running using Server Side Rendering (SSR)使用服务器端渲染 (SSR) 运行时，Spartacus API 调用返回 504（网关超时）
【发布时间】：2022-02-15 17:48:15
【问题描述】：

我正在尝试让 Spartacus 与 SSR 一起工作。打开默认 URL http://localhost:4200 时，店面按预期呈现，但仅在我先清除站点数据之后。当我尝试浏览店面时，API 调用失败并显示 504（网关超时）。 Chrome 开发工具表明错误发生在服务工作者中。此时，我想知道我是否错误地配置了 Spartacus。当使用 yarn start 而不是 yarn serve:ssr 运行 Spartacus 时，我可以加载主页并正常浏览网站。

OS: Ubuntu 16.04.6 LTS
Chrome Version: 73.0.3683.75
Node version: 11.15.0
Angular CLI version: 8.3.8
Yarn version: 1.19.1

ng new ssr-spartacus-app --style=scss
cd ssr-spartacus-app
ng add @spartacus/schematics --baseUrl https://localhost:9002 --baseSite cmssiteuid --pwa --ssr
rm src/app/app.component.html
echo "<cx-storefront>Loading...</cx-storefront>" > src/app/app.component.html
yarn build:ssr
yarn serve:ssr

在运行 yarn build:ssr 之前，我对 app.module.ts 文件进行了以下更改：

之前

      context: {
        baseSite: ['cmssiteuid'],
      },

之后

      authentication: {
        client_id: 'mobile_android',
        client_secret: 'secret',
      },
      context: {
        urlParameters: ['baseSite', 'language', 'currency'],
        baseSite: ['cmssiteuid'],
      },

我还将anonymousConsents 设置为false。将此设置为 true 时，我遇到了很多 COR 错误。

如果我已经为此摸不着头脑，我希望对 Spartacus 的内部运作有更多了解的人能够阐明为什么 Spartacus 对 SSR 有这样的行为。

【问题讨论】：

嗨大卫，你能提供更多信息吗：.1。哪些 API 调用失败（全部失败？） 2. SSR 是否正常工作，即如果您在 Chrome 控制台中禁用 JavaScript，您是否看到呈现的静态视图？（您还可以检查页面源中是否存在渲染的 HTML）。

标签： spartacus-storefront

【解决方案1】：

我不确定我是否可以为您提供一些解决问题的方法，显然我需要更多与您的问题相关的详细信息和日志，但根据我的经验，我仍然可以与您分享一些提示和技巧我们应该如何处理这些问题（与 SSR 有关）。

一些与SSR相关的理论

https://angular.io/guide/universal（您可以随意使用 Angular 官方文档作为主要来源，因为 Spartacus 使用 Angular OOTB 功能使其工作）
https://sap.github.io/spartacus-docs/server-side-rendering-in-spartacus/
https://enable.cx.sap.com/tag/tagid/spartacus（SSR 相关视频）

调试 SSR 的实用方法

您应该在 Node.js 中启动应用程序期间观察和分析控制台输出
您可以使用示例 Storefront 应用程序 (https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp) 中的 SSR 配置作为起点，因为 OOTB SSR 的工作原理很吸引人
来自斯巴达克斯团队https://sap.github.io/spartacus-docs/how-to-debug-server-side-rendered-storefront/

确保应用程序配置正确的通用理论集

用于与 Spartacus 一起使用的 SAP Commerce Cloud 配置https://sap.github.io/spartacus-docs/installing-sap-commerce-cloud/
查看指南 https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/ 以确保您的前端应用程序具有正确的配置
仔细检查 B2cStorefrontModule 正在使用的配置（您可以在此处找到示例项目 https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp）
查看网络和控制台浏览器选项卡并尝试解决所有错误

【讨论】：

【解决方案2】：

你是否关闭了 PWA？

关闭 PWA。

在 PWA 模式下安装 Spartacus 后，就会安装一个 service worker，它会提供 index.html 的缓存版本以及 js 文件。这会导致完全跳过 SSR。以下步骤描述了如何关闭 PWA：

检查您的应用中是否没有注册服务工作者。如果您确实找到任何服务人员，请将其删除。

在您的应用模块配置中关闭 PWA，如下所示：

 StorefrontModule.withConfig({
       backend: {
         occ: {
           baseUrl: 'https://[your_enpdoint],
         },
       },
       pwa: {
         enabled: false,
       },
 };

通过运行以下命令重建您的本地 Spartacus 库：

yarn build:core:lib

通过运行以下命令构建您的本地 Spartacus shell 应用程序：

 yarn build --prod

通过运行以下命令构建您的 shell 应用的 SSR 版本：

yarn build:ssr

通过运行以下命令使用 SSR 服务器启动 Spartacus：

 yarn serve:ssr

【讨论】：

【解决方案3】：

如果您在访问 API 服务后收到 504，则需要检查您的 API 日志。

如果您有错误日志：

{"instant":{"epochSecond":1644915623,"nanoOfSecond":929833000},"thread":"hybrisHTTP1","level":"ERROR","loggerName":"org.springframework.web.servlet.DispatcherServlet","message":"Context initialization failed","thrown":{"commonElementCount":0,"localizedMessage":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator' defined in ServletContext resource [/WEB-INF/config/v2/validators-v2-spring.xml]: Unsatisfied dependency expressed through constructor parameter 0: Could not convert argument value of type [de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade] to required type [de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade]: Failed to convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade': no matching editors or conversion strategy found","message":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator'

你可以试试分辨率： 从 manifest.json 中移除模板扩展 ycommercewebservices 扩展，使用“迁移数据”模式重建和重新部署。

【讨论】：