如何在同一构建版本下按环境生成适配的预渲染页面并存储至S3

核心思路是把「环境参数耦合在构建期的全量打包逻辑」拆成无环境依赖的统一版本骨架制品 + 独立运行的多环境预渲染适配层，既保证整个版本的构建产物完全统一，又能在同一个版本下生成对应环境的预渲染页面，不需要为每个环境重复打全量包。

第一步：解耦主构建流程，生成统一版本的纯骨架制品 #

• 从原有build:dev/build:prod脚本中移除环境专属逻辑：不再读取.env中的CMS地址、不再在构建期拉取页面JSON生成预渲染HTML，主流程只负责编译打包JS、CSS、图片等公共静态资源，过程中完全不引入和dev/prod绑定的配置。
• 统一版本号规则：由CI流程从Git标签、语义化版本规则读取版本值，生成标识为myapp-<x.o>的制品，打完直接上传到Nexus存储，这份制品不包含任何环境专属的预渲染内容、CMS配置，是两个环境完全共用的基础骨架。
• 把原有预渲染逻辑抽成独立可执行CLI脚本，比如prerender，脚本支持通过命令行入参接收两个核心参数：当前运行环境标识、对应环境的CMS接口基础地址，执行后可以自动拉取对应环境的页面JSON、渲染生成对应路由路径的HTML文件，整个流程完全独立于主构建过程。
• 原有的.env文件可以保留，但建议把不同环境的CMS地址配置迁移到Jenkins的全局环境配置、凭证管理中，避免环境参数混入公共骨架制品。

第二步：基于统一骨架做双环境预渲染，分别上传对应S3存储桶 #

整个预渲染环节不需要重新打全量包，直接从Nexus拉取同一版本的骨架制品，依次执行两次适配流程即可：

• 适配开发环境：读取Jenkins中配置的dev环境CMS地址，执行node prerender --env dev --cms-base-url <dev_cms_url>，脚本拉取dev环境所有页面的内容生成对应HTML，将生成的HTML文件合并到骨架目录的对应路由路径下，最后把整个目录上传到dev环境对应的S3路径，比如s3://your-bucket/dev/myapp-<x.o>/。这里的JS、CSS等静态资源完全复用骨架文件，没有任何修改。
• 适配生产环境：直接复用本地已经拉取的同一份骨架文件，不需要重新从Nexus下载，把预渲染脚本的入参替换为prod环境的CMS地址，执行node prerender --env prod --cms-base-url <prod_cms_url>生成生产环境专属的HTML文件，合并到同一份骨架目录的对应路径下，最后上传到prod环境对应的S3路径，比如s3://your-bucket/prod/myapp-<x.o>/。

落地时的避坑要点 #

• 严禁将CMS地址、环境标识这类环境专属参数硬编码到JS、CSS公共静态资源中：公共静态资源部分两个环境必须和骨架完全一致，否则会导致缓存不一致、无法真正共用构建产物。如果前端运行时需要调用CMS接口，可以在每个环境的预渲染环节动态生成一份同域下的env.config.json文件，页面加载时动态读取配置，不把参数打进公共JS包。
• 严格保持版本标识统一：两个环境下引用的静态资源路径都要指向同一个myapp-<x.o>版本的文件，不要在预渲染环节给静态资源加dev/prod的路径后缀，保证浏览器缓存可以跨环境命中，减少冗余请求。
• S3目录做好环境隔离：dev和prod的预渲染HTML文件必须分目录存储，不要混在同一个路径下，避免出现跨环境内容串扰的问题。
• 后续可以把流程进一步优化：当CMS侧更新页面内容需要重新生成预渲染页面时，不需要触发全量构建，直接拉取对应版本的骨架制品，单独跑预渲染脚本重新上传S3即可，大幅缩短内容更新的流程时长。

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