当前位置: 首页 > Web前端 > HTML5

什么是ImmutableWebApps

时间:2023-04-05 14:48:21 HTML5

官网ImmutableWebApps是一种与框架无关的方法,用于构建和部署静态单页应用程序:最大限度地降低实时发布的风险和复杂性。简化和最大化缓存。最大限度地减少对服务器和运行时环境管理的需求。通过简单、灵活的原子部署实现持续交付。准则该方法基于严格分离的原则:配置与代码。从构建任务中释放任务。来自静态内容的动态内容。以下概念定义了不可变Web应用程序的核心要求。它们与框架和基础设施无关。静态资产独立于Web应用程序环境静态资产是从构建Web应用程序代码库生成的文件(javascript、css、图像)。当它们不包含任何特定于环境的内容并且它们被发布到一个独特的、独立的位置时,它们就变得不可变了。静态资产不得包含任何特定于环境的内容所有领先的应用程序框架(AngularCLI、CreateReactApp、EmberCLI、VueCLI3)都建议在编译时定义环境变量。这种做法需要为每个环境生成静态资产,并为环境的任何更改重新生成。一个不可变的Web应用程序引用全局定义的环境变量,并以两种方式之一引用:直接从窗口对象通过包装环境变量的注入服务示例:静态资产必须托管在唯一且独立的Web应用程序环境的位置.不包含任何特定环境的静态资产可以构建一次,发布到唯一位置,然后在Web应用程序的多个环境中使用。这些静态资产与托管在内容交付网络(CDN)上的javascript库具有相同的质量(Google托管库、cdnjs、jsDelivr、UNPKG):https://ajax.googleapis.com/a...ofthejqueryLocation之上的库被无数的Web应用程序引用,它既独立于应用程序又是唯一的。https://assets.myapp.com/apps...同样,Web应用程序javascript文件的位置是唯一的,并且托管在专用于静态资产的位置。静态资产Web服务器是Web应用程序版本的存储库。为长期缓存配置静态资产不包含任何特定于环境的内容且托管在唯一且永久位置的静态资产可以配置为(几乎)无限期地由浏览器缓存:cache-control:public,max-age=31536000,immutableindex.html是一个可部署的配置HTML文档(通常是index.html),用于非静态的单页应用程序。它因环境和部署目标而异。HTML文档是特定于环境的配置和定义Web应用程序的不可变静态资产的组合。index.html包含对静态资产的完全限定引用。看一个例子:index.htmlmustneverbecached注意:为了允许立即更改web应用程序环境,index.html绝不能被浏览器或不能按需清除的公共缓存缓存:cache-control:no-storeImmutableWeb应用程序将发布任务与构建任务分离为两个不同的工作流。构建不可变Web应用程序的代码库负责构建静态资产并将它们发布到静态Web服务器。代码库的每个状态都可以由位于唯一位置的一组静态资产表示。并非代码库的每个状态都需要释放,但代码库的单个状态都不需要释放多次。通常,代码库是与持续集成系统集成的源代码控制代码存储库,能够构建、版本控制和发布静态资产到静态Web服务器。这方面的一个示例可能是:托管在GitHub存储库中的Angular项目。当提交被推送到master分支时,repo与TravisCI集成以构建和版本化资产。版本化资产发布到AWSS3存储桶中的唯一位置。Publishindex.html文件独立于代码库进行管理,它们作为每个环境的清单。它们应被视为配置文件并进行相应管理。此外,还需要有一种机制来修改或替换每个Web应用程序环境中的index.html。改变index.html的行为实际上是一个部署。这方面的一个例子可能是:一组index.html文件,每个环境一个,托管在Github存储库中。此存储库与TravisCI集成以在修改到AWSS3存储桶时发布index.html文件。每个Web应用程序环境都有一个index.html和S3存储桶。这种构建和发布工作流分离的底层基础架构设置如下图所示:支持不可变Web应用程序的基础架构由三部分组成:Web应用程序服务器:通过提供index.html静态Web服务器来托管Web应用程序环境。静态资产服务器:用于托管不可变静态资产的静态Web服务器。API:一个或多个公开的端点,用于与Web应用程序后端交互。构建静态资产是一个复杂的过程,通常涉及:依赖解析、下载库、转译、压缩、捆绑、丑化、代码拆分、TreeShaking、*Autoprefixing……这些过程非常耗时,严重依赖外部依赖,并且通常表现得看似非确定性的方式。它们不是一个应该在未经验证的情况下立即将生成的资产发布到生产环境而结束的过程。即使是发布多个大型静态资产的行为也是一个可以被中断并使您的Web应用程序环境处于崩溃状态的过程。不可变的Web应用程序构建一次并发布到某个地方一次。此过程发生在实时发布之前。它们可以在暂存环境中进行验证并推广到生产环境中,而无需重新生成,从而显着降低风险。原子实时发布-原子实时发布不可变Web应用程序的实时发布是发布单个index.html文件的行为。部署是即时的,所有资产都立即可用,没有任何缓存在发布时被破坏的风险。回滚与部署一样有风险,而且通常风险更大。对于不可变的Web应用程序,相同的部署质量适用于回滚。值得注意的是,在回滚的情况下,大多数浏览器仍会缓存以前的资产。如果浏览器尝试加载旧版本的index.html,则先前版本的所有资产仍然可用且未损坏。简化的缓存策略管理缓存控制标头可能是一项艰巨的任务,尤其是当Web应用程序基础设施利用CDN使用的公共缓存时。缓存中最简单的两个概念是:“始终缓存”和“从不缓存”。不可变Web应用程序包含这些概念,将可以“始终缓存”的代码与“从不缓存”的配置完全分开。简化的路由策略领先的应用程序框架在其部署建议中不会将静态资产的位置与index.html分开。相反,他们建议向Web服务器添加路由规则,为所有未解析为物理文件的路径返回index.html。这些路由规则的实现可能因Web服务器而异,并且错误通常会导致路径解析到错误的资源。将index.html的托管资产和静态资产分开可以消除这种风险。静态资产服务器始终服务于由url表示的物理文件,而Web应用程序服务器始终为任何url提供index.html。不可变Web应用程序通常与这些概念密切相关:现代应用程序框架:Angular、React、Vue和Ember使团队能够构建越来越复杂的单页静态应用程序。webpack等工具提高了创建、优化和管理构建工件的能力。DevOps:DevOps文化使Web应用程序开发人员能够分解和重新评估他们的Web应用程序基础架构,以更好地满足他们的Web应用程序的需求。经过验证的应用程序模式和实践:后端应用程序和服务正在围绕一组支持可移植性、可扩展性和高可用性的最佳实践进行融合。这种趋势极大地增加了可用的工具和服务,尤其是与容器和容器编排相关的工具和服务。其中许多实践才刚刚开始应用于静态单页Web应用程序。更多Jerry原创文章在这里:《王子熙》: