Skip to main content

上线流程是怎样的，前端资源如何部署到服务器上的

前端资源部署​

1. 开发​

  1. 我们 dev 提 Merge Request，跑 pipeline，合并到 release

1.1 代码开发与版本控制

  • 分支策略

    • main/master：生产环境代码，受保护分支

    • release/：预发布分支，用于集成测试

    • feature/：功能开发分支

    • hotfix/：紧急修复分支

      1.2 Code Review 1.3 功能测试，E2E 测试，性能测试

2. 发布​

  1. 发版打 tag，然后做回归测试。

  2. 灰度发布。

  3. 监测。

3. 测试策略​

3.1 单元测试（Unit Tests）​

  • 测试覆盖率要求 >80%
  • 核心业务逻辑 >90%
  • 使用 Jest/Vitest + React Testing Library

3.2 组件测试（Component Tests）​

  • 使用 Storybook + Testing Library
  • 视觉回归测试（Chromatic/Percy）

3.3 E2E 测试​

  • 使用 Cypress/Playwright
  • 关键用户旅程测试
  • 跨浏览器兼容性测试

3.4 性能测试​

  • Lighthouse CI
  • Web Vitals 监控
  • 包体积分析（webpack-bundle-analyzer）

4. 预发布流程​

4.1 版本管理​

# 语义化版本控制
npm version patch  # 1.0.0 -> 1.0.1
npm version minor  # 1.0.1 -> 1.1.0
npm version major  # 1.1.0 -> 2.0.0

4.2 预发布环境​

  • Staging：与生产环境 1:1 的测试环境
  • Canary：小流量测试环境
  • Beta：面向特定用户群体的测试环境

5. 部署策略​

5.1 蓝绿部署​

  • 维护两套生产环境
  • 零停机时间更新

5.2 金丝雀发布​

  • 逐步将流量切到新版本
  • 监控错误率和性能指标

5.3 特性开关（Feature Flags）​

// 使用 LaunchDarkly 或类似服务
if (featureFlags.enableNewCheckout) {
  render(<NewCheckout />);
} else {
  render(<LegacyCheckout />);
}

6. 监控与告警​

6.1 前端监控​

  • 错误监控：Sentry/LogRocket
  • 性能监控：New Relic/Datadog
  • 用户体验：Hotjar/FullStory

6.2 告警规则​

  • JavaScript 错误率 > 1%
  • LCP > 2.5s
  • CLS > 0.1
  • API 错误率 > 0.5%

白屏检测​

在页面上，对加载完成后应该有哪些元素进行检查。如果没有关键的元素就应该报警。

一般是由于 js 错误或资源加载失败。写代码的时候应该设置错误边界。加载失败的话应该重试然后报错。对于 SSR 的页面，如何做检测呢？服务端需要检测并记录渲染错误。

错误边界如何设置？

  1. 应用级错误边界（最外层） 路由级错误边界 组件级错误边界