首页 web前端 js教程 简化 Web 应用程序的发布流程:具有功能标志的基于主干的开发

简化 Web 应用程序的发布流程:具有功能标志的基于主干的开发

Dec 23, 2024 pm 09:26 PM

在本文中,我们将概述一个健壮且高效的 Web 应用程序发布流程,该流程围绕基于主干的开发和基于环境的功能标志构建。这种方法可确保持续集成、生产中的轻松测试以及从开发到发布的顺利路径,同时保持高质量标准。


核心原则

  1. 基于主干的开发:

    • 主干分支充当所有开发工作的单一事实来源
    • 开发人员从新功能或 Jira 票证的主干创建功能分支(例如,feature/xyz)。
    • 拉取请求(PR)从这些功能分支提交到主干,以便在测试成功后进行审查和合并。
  2. 基于环境的功能标志:

    • 功能标志用于控制跨环境的功能激活。
    • 标志存储在特定于环境的配置文件中或作为 CI/CD 管道配置的一部分。
    • 在主干分支中,所有功能标志默认设置为 OFF
    • 可以根据需要在特定环境(例如沙盒、暂存或生产)中ON切换标志。

Sprint 中的 JIRA 版本

Streamlined Release Process for a Web Application: Trunk-Based Development with Feature Flags


环境部署流程

  1. 沙盒或暂存环境:

    • 对于 QA 和集成测试,团队可以从主干创建一个以 sandbox/ 为前缀的分支(例如 sandbox/xyz)。
    • 此分支使用 CI/CD 管道部署到专用的沙箱临时环境
    • QA 团队可以验证新功能,集成测试可以确保兼容性。
    • 在此环境中将功能标志切换为ON以测试特定功能。
  2. 生产发布准备

    • 要准备发布,请从主干创建一个release/xyz 分支。
    • release/xyz 分支作为候选版本,最初部署到 生产流量的 5% 用于 Beta 测试。
    • 新功能的功能标志在此分支中切换ON,以允许在生产中进行测试。
    • Nginx 或类似的负载均衡器可以处理这种流量分割,确保只有一部分用户看到更改。

功能标志:示例和用法

  1. 标志结构:

    • 将功能标志存储在配置文件中(例如 config/feature-flags.json):
     {
       "feature_xyz": false,
       "feature_abc": true
     }
    
    登录后复制
  • 在运行时使用环境变量来控制标志:

     FEATURE_XYZ=true FEATURE_ABC=false npm start
    
    登录后复制
  1. 后端示例:

    • 在代码中切换标志:
     const featureFlags = require('./config/feature-flags');
    
     if (featureFlags.feature_xyz) {
         console.log('Feature XYZ is enabled!');
     } else {
         console.log('Feature XYZ is disabled.');
     }
    
    登录后复制
  2. 前端示例:

    • 使用标志有条件地渲染 UI 组件:
     if (process.env.REACT_APP_FEATURE_XYZ === 'true') {
         render(<NewFeatureComponent />);
     } else {
         render(<OldFeatureComponent />);
     }
    
    登录后复制
  3. 测试期间切换标志:

    • 要切换测试标志,请更新配置或环境变量并重新启动相关服务(前端或后端):
     FEATURE_XYZ=true npm start
    
    登录后复制
  • 对于 CI/CD 管道,请确保在部署期间将适当的标志值注入到环境中。

生产中测试

  1. Beta 测试的流量路由:

    • 使用Nginx配置来控制流量分配:
     http {
         upstream stable_backend {
             server stable_backend_1;
             server stable_backend_2;
         }
    
         upstream canary_backend {
             server canary_backend_1;
             server canary_backend_2;
         }
    
         upstream mixed_backend {
             server stable_backend_1 weight=45;
             server stable_backend_2 weight=45;
             server canary_backend_1 weight=5;
             server canary_backend_2 weight=5;
         }
    
         server {
             listen 80;
             server_name my-app.example.com;
    
             location / {
                 if ($http_x_qa_test = "true") {
                     proxy_pass http://canary_backend;
                     break;
                 }
    
                 proxy_pass http://mixed_backend;
             }
         }
     }
    
    登录后复制
  • 通过调整负载均衡器权重,将 5% 的生产流量路由到运行新版本的服务器。
  1. 生产中的专门 QA 测试
    • QA 团队可以将自定义 Cookie(例如 qa-test=true)附加到他们的请求中。
    • Nginx 100% 检查此 cookie 并将这些请求路由到新版本,确保在生产中进行有针对性的测试。

稳定发布

  1. 修复问题

    • 开发人员通过向主干分支开放 PR 来修复 Beta 测试期间发现的任何问题。
    • 合并后,这些修复程序将被精心挑选到release/xyz分支中。
  2. 完成发布

    • 所有问题解决并且分支稳定后,发布分支会被标记为语义版本(例如v1.2.0),触发部署到稳定后端。
    • 生成版本说明以用于文档并与利益相关者共享。

修补程序

  1. 创建修补程序分支:

    • 对于紧急修复,请直接从最新的生产标签创建一个 hotfix/xyz 分支。
    • 修补程序分支遵循与发布分支相同的稳定和标记过程。
  2. 版本控制

    • 修补程序按照语义版本控制 (SemVer) 标准增加补丁版本(例如,从 v1.2.0 到 v1.2.1)。

分行清理

  • 定期删除合并的分支以避免混乱。
  • 定期删除未使用的功能标志以维持组织。
  • 使用 GitHub Actions 或类似工具在合并后自动删除分支。

替代质量保证和测试策略

除了 cookie,在生产中路由 QA 流量的其他策略包括:

  1. 基于标头的路由:

    • QA 向他们的请求添加自定义标头(例如 X-QA-Test: true)。
    • Nginx 将这些请求路由到新版本进行测试。
  2. 基于 IP 的路由:

    • 根据 QA 的 IP 地址限制新版本的流量。
  3. 基于身份验证令牌的路由:

    • QA 使用与角色或令牌绑定的特定测试帐户登录,以确保请求路由到新版本。

结论

此发布流程利用基于主干的开发和基于环境的功能标志来创建可扩展、可测试且生产安全的部署工作流程。通过使用沙箱环境、流量路由和专用测试策略,团队可以提供高质量的功能,同时最大限度地降低风险。该方法可确保及早发现问题并有效解决,为无缝功能推出和修补程序铺平道路。

以上是简化 Web 应用程序的发布流程:具有功能标志的基于主干的开发的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1653
14
CakePHP 教程
1413
52
Laravel 教程
1305
25
PHP教程
1251
29
C# 教程
1224
24
前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles