SAP 电商云的 Spartacus Storefront 如何配置多个 JavaScript Application

作者：Jerry Wang

2022-11-07
四川
本文字数：1198 字
阅读完需：约 4 分钟

SAP 电商云的 Spartacus Storefront 如何配置多个 JavaScript Application

本文介绍如何配置多个 endpoint 以使用多个 JavaScript 店面。

具体步骤

将所有端点配置为指向 JS Storefront 服务。

www.brand1.com → Javascript 店面
www.brand2.com → Javascript 店面

在 JavaScript service properties 中配置 endpoint 到店面的映射。

在云门户中，选择 environment，然后选择 service configuration 视图配置 JavaScript 店面。

按以下格式添加您的属性：

jsapps.<application>.severname.<index>=<server name>

复制代码

例如：

jsapps.app1.servername.1=www.brand1.dejsapps.app2.servername.0=www.brand2.comjsapps.app2.servername.1=www.brand2.de

复制代码

如果不提供任何配置，默认情况下，对服务器名称 <application.name.*> 的请求将路由到该特定应用程序。

例如，app1 和 app2 应用的映射方式如下：

服务器名称 app1.* 的请求被路由到 app1 应用程序，
服务器名称 app2.* 的请求被路由到 app2 应用程序。

<server name> 变量要么是准确的服务器名称，要么是 Nginx <server_name> 指令的正确正则表达式。有关详细信息，请参阅 http://nginx.org/en/docs/http/server_names.html 非 SAP 站点上发布的信息。

在 CCV2 上启用 Spartacus SSR ( Server Side Rendering，服务器端渲染) 的配置方法，在文件 js-storefront/manifest.json 内添加下列设置：

{  "applications": [      {          "name": "<your storefrontapp name>",          "path": "<your storefrontapp path>",          "ssr": {                "enabled": true,                "path": "dist/<your storefrontapp name>/<your storefrontapp name>-server/main.js"          }      }  ]}

复制代码

使用客户端呈现 (CSR)，网站在浏览器中呈现，而不是在服务器端。因此，Web 服务器通过发送包含 JavaScript 代码的轻量级 HTML 响应来响应连接请求。浏览器通过在客户端呈现代码并将其呈现在网页上来创建内容。

因此，需要在上述的 manifest.json 文件里添加下列设置：

{  "applications": [      {          "name": "<your storefrontapp name>",          "path": "<your storefrontapp path>",          "csr": {                "webroot": "dist/<your storefrontapp name>/browser/"          }      }  ]}

复制代码

csr.webroot 的字段值应该和 angular.json 文件中 projects.<application_name>.architect.build.options.outputPath 的值一致。

配置完成后，所有定义在 webroot 字段中的文件会被部署。

在 manifest.json 里还能为某一具体的 Application，指定 Node.js 版本：

{    "applications": [        {            "name": "cxlive",            "path": "cxlive"        },        {            "name": "app1",            "path": "app1"        },        {            "name": "app2",            "path": "app2",            "nodeVersion": "11"        }    ],}