架构升级（重构）

Create by fall on 18 Jan 2024 Recently revised in 18 Jan 2024

实现目标和挑战

前端复杂而庞大，不仅需要考虑技术方案，也需要考虑人力成本、时间成本等多个因素。

前端资源的高效管理、简捷维护以及良好的扩展性。确保资源的稳定性。

资源存储的管理

问题： 如何有效管理和存储大规模的前端资源文件，确保高效访问和使用？

• 数据规模巨大： 如何高效管理、追踪、扩容快速增长的资源文件数量和大小。
• 不同资源的处理： 如何统一存储并管理不同项目、不同类型的资源文件，满足资源针对性的资源配置处理和优化。
• 安全性和权限控制： 如何确保只有授权用户可以进行资源的上传、删除和修改，避免潜在的安全隐患。
• 容灾机制：建立容灾机制，迅速切换到备用资源，确保业务稳定运行。

优化前端资源加载速度

问题： 如何优化前端资源加载速度，提升用户体验和网站性能？

• 网络环境不稳定： 用户的网络连接可能不稳定，网络条件可能会有很大的波动，导致资源加载速度变化较大。
• 资源文件体积过大： 如何处理大型文件、高频资源，避免影响加载速度。
• 资源缓存配置： 我计划添加资源缓存策略，再给资源响应加个速。

资源统一管理和灵活配置

问题： 如何建立高效的前端资源管理机制，确保统一管理和维护？如何灵活处理跨域访问等特殊需求，确保资源适用于不同场景？

• 资源管理体系：如何建立一套资源管理体系，对不同资源、不同环境的资源进行集中的管理和维护。
• 灵活配置机制：如何统一配置不同项目、不同类型的资源，满足针对性的处理和优化（如跨域、缓存处理）。
• 复杂场景下的使用：如何满足复杂情况下的使用，如逻辑规则、正则规则等。
• 安全性和权限控制：如何保障资源管理和维护不同情况下的安全策略和权限控制。
• 方便且高效的界面：能不能提供一个简捷且高效的可视化界面，简化开发人员的操作，还能减少误操作。

资源迁移的成本控制

问题： 如何控制前端资源迁移的时间、人力成本以及风险成本等？

• 人力成本：如何最小化人力成本，比如说团队成员的投入人力、团队成员的培训。
• 时间成本：如何避免对业务开发、业务正常运行的中断，尽可能短的时间内完成。
• 硬件和软件成本：迁移会不会需要新的硬件设备或软件许可证等，增加的成本如何有效控制。
• 测试和验证成本：如何在保证稳定性的前提下，降低资源迁移的测试和验证成本。
• 迁移工具成本：迁移资源如此多，会不会用到迁移工具，从而增加成本。
• 风险管理成本：这个重要性不言而喻，制定有效的风险管理策略，提前预料到并解决潜在问题，确保出现问题能够迅速恢复。

资源版本更新管理

目前私有云的部分项目中，存在资源无法及时更新的情况，需要用户手动清除缓存，用户体验差。这不仅影响到用户体验，更会对资源迁移的不及时更新带来隐患，所以必须处理。

问题：如何确保及时更新资源版本，保障用户体验、资源迁移以及紧急回滚操作？

• 版本控制：如何简单有效，便可以实现各项目的版本及时更新和紧急回滚。
• 资源依赖关系：在更新某一资源时，可能会涉及到其他资源的变动，如何处理好资源之间的依赖关系。
• 可视化持续部署：充分利用自动化构建部署平台的构建、部署和管理能力，不仅能管理版本更新，更能简化部署发布流程。

代码层面的安全性

问题：如何提升代码层面的安全性，如何防止敏感信息泄露和误操作？

• 公开访问风险：如何避免直接暴露代码资源存储的风险。
• 访问权限控制：如何正确配置访问、上传权限，避免访问受限或过于宽松。
• 传输过程中的安全性：在资源传输过程中，如何保证传输的资源安全性。
• 敏感信息的存储：如何确保只有授权的用户能够访问和使用敏感信息。

架构重塑后的验证与测试

问题：如何确保重塑后资源能够正常加载和运行？

• 资源异常：如何提前验证与测试资源是否正常运行。
• 资源请求链路异常：如何提前确保资源请求链路的正常运行。
• 项目运行异常：如何提前确保迁移后的项目运行正常。

资源的备份和恢复策略

问题：如何快速有效地恢复到正常状态，确保业务连续性和可靠性？

• 迁移过程中的不确定性：如何规避架构重塑后的各种不确定因素，如网络问题、配置错误等方面。
• 业务连续性的保障：如何在架构重塑失败时迅速恢复业务到正常状态。

此外，还有多项目的异构性、资源迁移的一致性等问题需要考虑。这已经不仅仅是迁移资源，需要对前端资源架构进行架构重塑。

综合性系统架构

前端资源架构重塑需要考虑的方面很多，尤其是涉及多项目的情况下。各项目的异构性，不同的打包方式、上传方式和请求头配置不同，增加了前端资源架构方案设计的复杂性。因此需要在综合考虑各项目现有情况的基础上，寻找高效、共通的解决方案来提高效率。

内容存储分发

首先，针对资源存储和资源加速，构建高效的资源内容分发网络。通过将阿里云 OSS 与 CDN 结合使用，不仅能为网站提供高效、稳定和安全的内容分发服务，提升用户的访问体验，同时也能够在团队层面有效控制存储成本和带宽成本。

1. 缓存和加速：CDN 通过将静态资源缓存在全球各地的服务器节点上，使用户可以从最近的节点获取内容，从而显著减少了内容加载时间，提升整体性能，改善用户体验。
2. 降低服务器负载：将静态资源存储在 OSS 中可以减轻服务器的负载。 CDN 负责大部分静态资源的分发，服务器可以集中精力处理业务逻辑，从而提高了服务器的效率和稳定性。
3. 节省成本：OSS 提供了经济高效的方式来存储大量的静态资源，而 CDN 则可以帮助你降低带宽成本，为网站运营提供了成本效益。
4. 抵御大流量和提高网站安全性：CDN 不仅能够缓解源服务器承受的大流量压力，还提供一定程度的安全防护，如 DDoS 攻击，从而确保网站的稳定性和安全性。
5. 容灾备份：在源服务器发生故障或不可用的情况下，CDN 可以提供备用内容，确保用户依然能够访问网站的静态资源，增强了网站的容灾能力。

注意：切记！确保OSS上存储了各版本资源文件，以防止突发事件。虽有Hash和缓存配置确保版本唯一性和及时更新，但浏览器不一定加载最新资源，可能使用旧资源，因此OSS的各版本资源文件对防止页面问题至关重要。

微前端资源迁移

在前端资源架构重塑的前期铺垫完成后，下一步就开始着手准备和实施资源的迁移。考虑到私有云前端采用微前端的方式，为了更加灵活地控制迁移过程，引入一个开关队列（Queue） 在迁移过程中提供精准的控制，确保迁移的顺序和时机。

这样的设计能够有效降低迁移过程中的风险，为什么呢？我们往下看。

迁移前端资源时，如何保证迁移前端资源的平稳过渡，对用户感知零影响。这里我对私有云的主应用项目进行代码改造，它最终实现的目标是：

• 支持原资源和迁移资源之间的灵活切换。
• 支持项目可以单独/分批迁移。

增量迁移：有利于采用增量迁移的方式，可以单个、分批迁移资源。也可以先迁移部分项目进行测试，以降低整体迁移的风险。

简化迁移和恢复成本：可以轻松添加或移除项目到开关队列，简化了迁移和恢复操作。这不仅减少了操作复杂性，还提高了整个迁移过程的可控性。

自动化构建部署工具：结合构建平台的自动化构建部署，使迁移过程更加快捷高效。

不限时间：各项目前端负责人可以合理安排各自时间，随时迁移资源，减少迁移带来的成本。

集成化持续部署

由于历史原因，各项目都有自己的一套构建部署方式，而且前端有 3 种资源方式，这对迁移来说带来了不可控性，对以后的扩展性也不好。因此，我结合各自项目的构建部署方式，以及后续继续使用的构建平台，重新整理了一套前端集成化持续部署方案，其中关键步骤如下：

• 统一上传依赖包： 所有项目都采用统一的上传依赖包，以减少上传过程中可能出现的问题。

• 哈希打包配置： 通过使用哈希值进行打包配置，确保文件的唯一性。再结合缓存策略，实现版本更新和快速切换的功能。

• 设置镜像源： 在代码中设置镜像源.npmrc，确保在线上和线下均能顺利下载依赖。

• 代码提供上传能力：

  在代码中配置上传依赖包和上传脚本，保持线上与线下的一致性，支持紧急发布保障机制。

总结

这次前端资源架构设计和重塑，为私有云服务系统带来改进与优化，尤其是系统在稳定性、资源的高效管理、简捷维护以及良好的扩展性方面。

稳定性提升

资源对服务器的依赖性过高，因此解耦前端与私有云对象存储等服务，从而促使前端能够独立运行并保证稳定性。

资源管理体系建立

• 统一存储位置：通过将所有资源存储在统一的存储位置，可以方便地对其进行管理和访问。这不仅提高了资源管理的集中度，还简化了资源的维护。团队成员在各自的权限下，不仅能轻松地查找、更新和删除资源，还能够轻松地监控和追踪资源的使用情况。

• 便于管理：通过资源管理体系的建立，可以实现对各类资源的统一管理。这包括对不同资源、不同环境的资源进行集中管理和维护。例如统一配置跨域配置和缓存配置等。

• 灵活度高和扩展性强：资源统一管理提供灵活的配置选项，使得可以方便地根据具体需求进行定制。例如，可以轻松地调整文件处理的逻辑、添加额外的业务逻辑处理等。

• 简化维护方式：通过资源统一管理，开发人员可以更加高效地进行维护。尤其是当在一个可视化的统一的管理系统中进行，操作简捷的同时，还能减少了操作失误导致的问题。

• 总的来说，建立资源管理体系可以提高资源管理的集中度和可控性、节省维护人力和成本、提高团队协作效率和质量、增强灵活度和扩展性以及简化维护方式。

资源响应加速

资源响应加速的便利性也离不开资源统一管理，通过配置 CDN 、版本控制以及缓存策略的优化处理，界面响应更快，资源更新更及时：

• 请求服务端的资源数量下降了56%，而且静态资源数量越多，越利好；
• 页面加载完毕时间上，资源响应提速了48.5%；

前端集成化流程

整理输出了“前端集成化部署统一规范及流程”文档。标准化现有项目上线流程，也为后续的新项目上线提供了标准规范流程。

成本控制

• 风险成本：通过这次架构重塑，最大的收益之一是直接减少了由服务宕机带来的风险成本。私有云前端将不再受制于服务宕机，在高可用得到了极大提升。

• 存储和带宽成本：OSS 提供了经济高效的方式来存储大量的静态资源，而 CDN 则可以帮助你降低带宽成本，为网站运营提供了更具成本效益的选择。

• 优化资源响应成本：通过配置 CDN 、版本控制以及缓存策略的处理，减少资源请求次数。这种优化策略使得浏览器能够从缓存中加载资源，直接降低了资源响应的成本。

• 节省维护人力和成本：通过资源统一管理，减少资源维护、开发所需的人力资源。

  对比	资源方式	资源维护人数
  架构重塑之前	3种	4人
  架构重塑之后	1种	1人

• 服务扩容成本：前端资源的存储和频繁访问也会增加服务负担，因此资源的解耦也可以间接降低服务器的扩容成本。

参考文章

作者	文章名称
Sailing	前端架构大升级，资源架构重塑全攻略