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

举报
Jerry Wang 发表于 2022/11/07 11:59:44 2022/11/07
【摘要】 本文介绍如何配置多个 endpoint 以使用多个 JavaScript 店面。 具体步骤将所有端点配置为指向 JS Storefront 服务。www.brand1.com → Javascript 店面www.brand2.com → Javascript 店面在 JavaScript service properties 中配置 endpoint 到店面的映射。在云门户中,选择 env...

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

具体步骤

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

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

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

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

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

例如:

jsapps.app1.servername.1=www.brand1.de
jsapps.app2.servername.0=www.brand2.com
jsapps.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"
        }
    ],
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。