如何基于Spartacus CCV2构建生产SSR包、排查异常及替换OCC地址

问题1：生产环境SSR构建包功能异常、正确生产构建命令配置 #

你当前的本地运行命令存在逻辑问题：yarn build:dev:ssr & yarn serve:dev:ssr 中的&会让前一个构建命令后台运行，大概率会出现构建未完成就启动服务的情况，本地测试建议替换为顺序执行的&&：yarn build:dev:ssr && yarn serve:dev:ssr。

针对生产构建异常的问题，核心原因多为生产构建开启的高级压缩、摇树优化暴露了本地开发构建未触发的配置问题，以及CCV2对SSR构建产物的路径有固定要求，调整方案如下：

优化后的生产SSR构建脚本 #

替换你现有package.json中的build:ssr配置即可，适配跨平台同时符合CCV2产物规范：

"build:ssr": "npm run copy:server-config && node --max-http-header-size=16384 ./node_modules/@angular/cli/bin/ng build --configuration production && node --max-http-header-size=16384 ./node_modules/@angular/cli/bin/ng run mystore:server:production && npm run move:server-bundle",
"copy:server-config": "node -e \"require('fs').copyFileSync('server.prod.ts', 'server.ts')\"",
"move:server-bundle": "node -e \"require('fs').renameSync('dist/mystore-server/main.js', 'dist/server.js')\"",

注意事项 #

• 确认server.prod.ts的配置和本地测试用的server.ts逻辑一致，不要遗漏中间件、静态资源路径配置
• 生产构建直接执行yarn build:ssr即可，CCV2会自动识别该脚本完成构建
• 如果仍然存在功能异常，建议开启生产构建的sourcemap定位具体报错位置，排查是否有代码未兼容生产环境压缩规则

问题2：构建过程中替换Backend OCC地址 #

提供两种通用的构建时替换方案，不需要额外依赖：

方案1：Angular环境文件替换法 #

1. 在src/environments/environment.prod.ts中定义OCC地址变量：

export const environment = {
  production: true,
  occBaseUrl: 'https://默认生产OCC地址.com'
};

2. 在Spartacus配置中引用该变量：

import { environment } from 'src/environments/environment';

provideConfig({
  backend: {
    occ: {
      baseUrl: environment.occBaseUrl
    }
  }
})

3. 如果需要不同环境对应不同OCC地址，在angular.json的生产构建配置中新增fileReplacements规则，按需替换不同的环境文件即可。

方案2：构建参数动态注入法 #

如果需要在执行构建命令时动态传入OCC地址，不需要修改代码：

1. 安装@types/node依赖，支持代码中读取环境变量：yarn add @types/node -D
2. 修改tsconfig.server.json的types配置，新增node类型：

{
  "compilerOptions": {
    "types": ["node"]
  }
}

3. 修改Spartacus的OCC配置：

provideConfig({
  backend: {
    occ: {
      baseUrl: process.env.OCC_BASE_URL || 'https://默认地址.com'
    }
  }
})

4. 构建时传入对应地址即可：

# Linux/Mac环境
OCC_BASE_URL=https://你的生产OCC地址.com yarn build:ssr

# Windows环境
set OCC_BASE_URL=https://你的生产OCC地址.com && yarn build:ssr

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