天天看点

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

这个 Storefront 的本地地址:C:\Code\SPA\spa3.1\mystore31

基于的 SAP Spartacus 版本:大于 3.1.3,小于 4.0:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

查看 package-lock.json 或者 yarn.lock, 得知安装的实际版本是 3.4.1:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

命令行:ng add @spartacus/schematics --ssr

自动添加了如下的资源:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

添加了一个 AppRoutingModule:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持
给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

main.server.ts:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

app.server.module.ts:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

增加文件的具体细节,参考这个 commit:

https://github.com/wangzixi-diablo/mystore31/commit/5a06fc7a904b8d0042497077f6f7a46398a975ec

最后使用这两个命令:

npm run build:ssr && npm run serve:ssr

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

我先执行 ng build:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

执行 ng run mystore31:serve-ssr,进行服务器端的 build:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

启动服务器:

node dist/mystore31/server/main.js

如何调试

package.json 里加上一个配置:

"ssrdebug": "node --inspect-brk dist/jerryssr/server/main.js",

1

npm run ssrdebug

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

打开 Chrome,地址栏输入 chrome://inspect/#devices:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

点击 inspect:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持
给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

错误消息:

An unknown http error occurred

通过调试,能找到这条错误消息的抛出位置:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

看看这个 url 是不是在浏览器里能直接访问:

https://20.51.210.49:9002//occ/v2/basesites?fields=baseSites(uid,defaultLanguage(isocode),urlEncodingAttributes,urlPatterns,stores(currencies(isocode),defaultCurrency(isocode),languages(isocode),defaultLanguage(isocode)),theme)
给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

答案是不行:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

解决了上图 ERR_CERT_AUTHORITY_INVALID 错误之后,仍然报同样的错误:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

解决方案

在 node 启动命令前,加上参数:

cross-env NODE_TLS_REJECT_UNAUTHORIZED=0

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

原始的错误 An unknown http error occurred 消失了,出现了新错误:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

修改 server.ts, 将超时参数设置为0,即永不超时:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

const ngExpressEngine = NgExpressEngineDecorator.get(engine, { timeout: 0 });

执行 ng run mystore31:serve-ssr,重新 build,问题消失:

给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持
给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持

继续阅读