您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
开源
首页
博文
课程
大赛
工具
开源
更多
用户中心
开发者社区
>
博文
>
集团前端部署新方案-技术篇(总体架构设计)
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
集团前端部署新方案-技术篇(总体架构设计)
灰豆****
2025-10-20
IP归属:北京
22浏览
# 集团前端部署新方案 ## 一、平台简介 集团前端部署平台是由京东科技前端工委会牵头,联合京东零售、京东健康等8个C-1部门历时6个月共同研发的统一部署解决方案。平台核心提供<span style="color: red;">快捷模式(PC/H5资源一键部署)</span>,致力于为前端研发提供高效、便捷的部署新体验。 ### 核心能力 #### 1. 全流程自动化 - 打通 Jen/行云/京东云OSS/零售云OSS/NP/CDN/R2M/JimDB/科技容器/零售容器/域名解析/镜像适配/测试站发布等全链路 - 实现资源免维护部署,提升部署效率 #### 2. 高可用架构 - 支持高并发访问,具备主备容灾机制 - 系统稳定性与可维护性全面提升 #### 3. 精细化部署策略 - 新增前端灰度发布能力 - 支持按业务需求灵活选择部署模式 ### 部署模式 #### 共享集群 - **适用场景**:B端类应用(P2或以下)、C端低流量页面(P2或以下) - **特点**: - 无需单独申请容器资源 - 主备兜底保障 - 资源池化共享 #### 私有集群 - **适用场景**: - C端高流量页面(P0/P1级) - 部门级需求(部门内部独立) - **特点**: - 提供独享容器资源及主备容灾 - 部门内资源共享 ## 二、技术设计-流量视角 站在前端研发视角,您可以创建私有集群、共享集群应用。共享集权分为常规模式与open模式。open模式下,您不需要创建应用即可发布前端应用,open模式仅支持测试环境。详见图1所示 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://storage.jd.com/fei-ma/shendeng/202510/01.jpg" style="width: 80%;"> <span data-raw-html="span">图1</span> </div> ### 1. 常规流量 前端研发创建应用的时候,选择是否开启cdn,可以分为开启cdn与未开启cdn两种方式。 用户在浏览器打开url后,会根据研发的配置,寻找前端静态资源。 开启cdn:第一资源是cdn、第二资源是nginx缓存(10G)、第三资源是京东云oss、第四资源是零售云oss 未开启cdn:第一资源是nginx缓存(10G)、第二资源是京东云oss、第三资源是零售云oss。详见图2所示。 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://storage.jd.com/fei-ma/shendeng/202510/02.jpg" style="width: 80%;"> <span data-raw-html="span">图2</span> </div> ### 2. 灰度流量 前端研发配置灰度的时候,集团前端部署平台支持多种灰度模式,例如百分比、白名单、url参数、人群(25年Q4完成)、AB(25年Q4完成),该部分需要决策当前用户访问前端资源制定的版本,该流量会直接指向nginx层,该部分的决策能力由镜像提供,保证了每个容器对外一致性。 灰度期间:第一资源是nginx缓存(10G)、第二资源是京东云oss、第三资源是零售云oss。详见图3所示。 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://storage.jd.com/fei-ma/shendeng/202510/03.jpg?t=2" style="width: 80%;"> <span data-raw-html="span">图3</span> </div> ## 三、技术设计-各服务之间关系 集团前端部署平台系统按照P0级要求进行设计,设计目标 1、高可用:可用性达到 99.99%,主备设计。 2、高并发:CDN+nginx缓存+OSS设计。 3、易维护:共享集群、私有集群,项目独立。 各模块之间的关系详见图4所示 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://storage.jd.com/fei-ma/shendeng/202510/04.jpg" style="width: 80%;"> <span data-raw-html="span">图4</span> </div> 以上过程打通了Jen/行云/京东云OSS/零售云OSS/NP/CDN/R2M/JimDB/科技容器/零售容器/域名解析/镜像适配/测试站,除此之外我们还会打通持续交付、eone、监控检测等(25年Q4完成) ## 四、技术设计-精细化运营保证 ### 1. 设计背景 为满足以下关键业务场景需求,集团前端部署平台进行了专项设计优化: - **精细化运营场景**:支持多维度的部署策略与流量控制 - **AI时代数据精准性要求**:确保数据采集的准确性与一致性 - **灰度发布数据一致性**:保障灰度版本与服务侧数据的同步性 自动注入机制,在您部署的所有应用页面中,平台将自动注入以下关键标识信息: | Cookie 名称 | 含义 | 注入方式 | |:-----------|:-----|:--------| | jddid_i | 部署id,deployId | js | | jddid_s | 当前会话id,32位 | js | | jddid_sg | 策略id(Grayscale strategy),有值则是灰度版本,无值则是normal版本 | nginx | ### 2. 业务方-前端研发使用 为了便捷前端研发使用,前端研发也可通过js获取。 ```javascript // 部署id const jddid_i = window.__unifiedDeployMap__?.jddid_i; // 单次页面当前会话有效 const jddid_s = window.__unifiedDeployMap__?.jddid_s; ``` ### 3. 业务方-服务端如何使用 为保证业务方前后端数据一致性,服务端可通过专用接口获取终端用户的灰度状态及配置信息。具体集成流程详见图5示意图。 <div style="display: flex; flex-direction: column; align-items: center;"> <img src="https://storage.jd.com/fei-ma/shendeng/202510/05.jpg" style="width: 80%;"> <span data-raw-html="span">图5</span> </div> **核心价值**: - 确保灰度用户在全链路的体验一致性 - 支持服务端基于灰度策略进行差异化处理 - 实现前后端数据的精准匹配与分析
上一篇:常用Web 实时通信技术:原理+选型,一篇通关
下一篇:把算法焊死在模型上系列-后端眼中的RAG平台架构
灰豆****
文章数
8
阅读量
6730
作者其他文章
01
飞码LowCode前端技术(一)
(背景与数据结构设计)作者:王光辉部门:京东科技-市场与平台运营中心-平台研发部-营销平台研发部简介飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计,(2)如何便捷配置出页面-1,(3)如何便捷配置出页面-2,(4)如何便捷
01
飞码LowCode前端技术(四)
(如何便捷配置出页面-3)作者:王光辉部门:京东科技-市场与平台运营中心-营销与数据资产部-营销及数据平台研发部简介飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)、背景与数据结构设计,(2)、如何便捷配置出页面-1,(3)、如何便捷配置出页
01
飞码LowCode前端技术(二)
(如何便捷配置出页面-1)作者:王光辉部门:京东科技-市场与平台运营中心-营销与数据资产部-营销及数据平台研发部简介飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)、背景与数据结构设计,(2)、如何便捷配置出页面-1,(3)、如何便捷配置出页
01
飞码LowCode前端技术(六)
(如何便捷快速验证实现投产及飞码探索)作者:王光辉部门:京东科技-市场与平台运营中心-营销与数据资产部-营销及数据平台研发部简介飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)、背景与数据结构设计,(2)、如何便捷配置出页面-1,(3)、如何
灰豆****
文章数
8
阅读量
6730
作者其他文章
01
飞码LowCode前端技术(一)
01
飞码LowCode前端技术(四)
01
飞码LowCode前端技术(二)
01
飞码LowCode前端技术(六)
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号