Stories

Detail Return Return

前端部署新方案-技術篇(總體架構設計) - Stories Detail

作者:京東科技 王光輝

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獲取。

// 部署id
const jddid_i = window.__unifiedDeployMap__?.jddid_i;
// 單次頁面當前會話有效
const jddid_s = window.__unifiedDeployMap__?.jddid_s;

3. 業務方-服務端如何使用

為保證業務方前後端數據一致性,服務端可通過專用接口獲取終端用户的灰度狀態及配置信息。具體集成流程詳見圖5示意圖。

在這裏插入圖片描述

核心價值

  • 確保灰度用户在全鏈路的體驗一致性
  • 支持服務端基於灰度策略進行差異化處理
  • 實現前後端數據的精準匹配與分析
user avatar 6fafa Avatar Dream-new Avatar chunzhendegaoshan Avatar hu_qi Avatar alienzhou Avatar reqingdetiangua Avatar delia_5a38831addb7b Avatar 5n7qfpo1 Avatar danieldx Avatar menglihuaxiangbian Avatar yunduanderizi_5c7f6d367b5d0 Avatar
Favorites 11 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.