如何通过外部路由并排配置Spartacus与Accelerator Storefront

需求背景 #

Spartacus支持配置指定路由直接由后端响应，可用于实现从Accelerator到Spartacus Storefront的逐步迁移，以下是具体的配置流程和问题修复方案。

运行环境 #

• Hosts配置条目：127.0.0.1 electronics.local
• Hybris 2011 Spartacus演示环境（Spartacus 3.2.0版本）
• Accelerator Storefront运行地址：https://electronics.local:9002/yacceleratorstorefront/
• Spartacus运行地址：http://localhost:4200（已移除BaseSite等相关配置）

初始配置及问题 #

初始意图将购物车、Hybris风格商品详情页路由交给后端Accelerator处理，初始Spartacus路由配置如下：

@NgModule({
  declarations: [],
  imports: [
    BaseStorefrontModule,
    SpartacusFeaturesModule,
    SpartacusConfigurationModule,
    ConfigModule.withConfig({
      routing: {
        internal: [
          '/**',
          '!/cart',
          '!/**/p/**'
        ]
      }
    }),
  ],
  exports: [BaseStorefrontModule]
})
export class SpartacusModule { }

初始问题：

1. 路由配置不生效，测试地址http://localhost:4200/cart、http://localhost:4200/p/832382依然由Spartacus处理
2. 不清楚如何配置Apache虚拟主机实现同域名下请求分发到两个服务端口

修复方案 #

前端路由配置修复 #

Spartacus 3.2.0版本默认未引入外部路由处理模块，需要在spartacus.module.ts中额外引入ExternalRoutesModule.forRoot()，修改后前端路由排除规则即可正常生效。

Apache反向代理配置 #

使用如下Apache虚拟主机配置实现请求分发，指定路由优先代理到Accelerator，其余请求代理到Spartacus：

<VirtualHost *:80>
ServerName electronics.local

RewriteEngine On
SSLProxyEngine on

# 本地测试自签名证书绕过校验
SSLProxyVerify none
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off

RewriteRule "/cart" "https://electronics.local:9002/yacceleratorstorefront/electronics/de/cart" [P]
ProxyPassReverse "/cart" "https://electronics.local:9002/yacceleratorstorefront/electronics/de/cart"

RewriteRule "/yacceleratorstorefront/(.*)" "https://electronics.local:9002/yacceleratorstorefront/$1" [P]
ProxyPassReverse "/yacceleratorstorefront/" "https://electronics.local:9002/yacceleratorstorefront/"

RewriteRule "/(.*)"     "http://localhost:4200/$1" [P]
ProxyPassReverse "/" "http://localhost:4200/"

</VirtualHost>

优化方向 #

当前SPA和非SPA页面切换耗时较长，可从以下维度优化：

• 调整HTTPS配置，移除自签名证书绕过规则，替换为正规证书减少校验损耗
• 优化Accelerator店面路径映射规则，减少不必要的3xx跳转

内容的提问来源于stack exchange，提问作者FSaccilotto