集团前端部署新方案-技术篇(总体架构设计)

作者:京东科技 王光辉

集团前端部署新方案

一、平台简介

集团前端部署平台是由京东科技前端工委会牵头,联合京东零售、京东健康等8个C-1部门历时6个月共同研发的统一部署解决方案。平台核心提供快捷模式(PC/H5资源一键部署),致力于为前端研发提供高效、便捷的部署新体验。

核心能力

1. 全流程自动化
  • 打通 Jen/行云/京东云OSS/零售云OSS/NP/CDN/R2M/JimDB/科技容器/零售容器/域名解析/镜像适配/测试站发布等全链路
  • 实现资源免维护部署,提升部署效率
2. 高可用架构
  • 支持高并发访问,具备主备容灾机制
  • 系统稳定性与可维护性全面提升
3. 精细化部署策略
  • 新增前端灰度发布能力
  • 支持按业务需求灵活选择部署模式

部署模式

共享集群
  • 适用场景:B端类应用(P2或以下)、C端低流量页面(P2或以下)

  • 特点

    • 无需单独申请容器资源
    • 主备兜底保障
    • 资源池化共享
私有集群
  • 适用场景

    • C端高流量页面(P0/P1级)
    • 部门级需求(部门内部独立)
  • 特点

    • 提供独享容器资源及主备容灾
    • 部门内资源共享

二、技术设计-流量视角

站在前端研发视角,您可以创建私有集群、共享集群应用。共享集权分为常规模式与open模式。open模式下,您不需要创建应用即可发布前端应用,open模式仅支持测试环境。详见图1所示

1. 常规流量

前端研发创建应用的时候,选择是否开启cdn,可以分为开启cdn与未开启cdn两种方式。

用户在浏览器打开url后,会根据研发的配置,寻找前端静态资源。

开启cdn:第一资源是cdn、第二资源是nginx缓存(10G)、第三资源是京东云oss、第四资源是零售云oss

未开启cdn:第一资源是nginx缓存(10G)、第二资源是京东云oss、第三资源是零售云oss。详见图2所示。

2. 灰度流量

前端研发配置灰度的时候,集团前端部署平台支持多种灰度模式,例如百分比、白名单、url参数、人群(25年Q4完成)、AB(25年Q4完成),该部分需要决策当前用户访问前端资源制定的版本,该流量会直接指向nginx层,该部分的决策能力由镜像提供,保证了每个容器对外一致性。

灰度期间:第一资源是nginx缓存(10G)、第二资源是京东云oss、第三资源是零售云oss。详见图3所示。

三、技术设计-各服务之间关系

集团前端部署平台系统按照P0级要求进行设计,设计目标

1、高可用:可用性达到 99.99%,主备设计。

2、高并发:CDN+nginx缓存+OSS设计。

3、易维护:共享集群、私有集群,项目独立。

各模块之间的关系详见图4所示

以上过程打通了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获取。

ini 复制代码
// 部署id
const jddid_i = window.__unifiedDeployMap__?.jddid_i;
// 单次页面当前会话有效
const jddid_s = window.__unifiedDeployMap__?.jddid_s;

3. 业务方-服务端如何使用

为保证业务方前后端数据一致性,服务端可通过专用接口获取终端用户的灰度状态及配置信息。具体集成流程详见图5示意图。

核心价值

  • 确保灰度用户在全链路的体验一致性
  • 支持服务端基于灰度策略进行差异化处理
  • 实现前后端数据的精准匹配与分析
相关推荐
恋猫de小郭9 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅16 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606117 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了17 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅17 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅17 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅18 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment18 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅18 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊18 小时前
jwt介绍
前端