天天看點

給基于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 添加對伺服器端渲染的支援

繼續閱讀