官網(wǎng)

不可變 Web 應(yīng)用程序是一種與框架無(wú)關(guān)的方法，用于構(gòu)建和部署靜態(tài)單頁(yè)應(yīng)用程序：

• 最大限度地降低實(shí)時(shí)發(fā)布的風(fēng)險(xiǎn)和復(fù)雜性。
• 簡(jiǎn)化和最大化緩存。
• 最大限度地減少對(duì)服務(wù)器和運(yùn)行時(shí)環(huán)境管理的需求。
• 通過(guò)簡(jiǎn)單、靈活的原子部署實(shí)現(xiàn)持續(xù)交付。

準(zhǔn)則

該方法基于嚴(yán)格分離的原則：

• 從代碼配置。
• 從構(gòu)建任務(wù)中釋放任務(wù)。
• 來(lái)自靜態(tài)內(nèi)容的動(dòng)態(tài)內(nèi)容。

以下概念定義了不可變 Web 應(yīng)用程序的核心要求。 它們與框架和基礎(chǔ)設(shè)施無(wú)關(guān)。

Static assets are independent of the web application environment(s)

靜態(tài)資產(chǎn)是從 Web 應(yīng)用程序代碼庫(kù)的構(gòu)建生成的文件（javascript、css、圖像）。 當(dāng)它們不包含任何特定于環(huán)境的內(nèi)容并且它們被發(fā)布到一個(gè)獨(dú)特的、獨(dú)立的位置時(shí)，它們就會(huì)變得不可變。

Static assets must not contain anything that is environment-specific

所有領(lǐng)先的應(yīng)用程序框架（Angular CLI、Create React App、Ember CLI、Vue CLI 3）都建議在編譯時(shí)定義環(huán)境變量。 這種做法要求為每個(gè)環(huán)境生成靜態(tài)資產(chǎn)，并針對(duì)環(huán)境的任何更改重新生成靜態(tài)資產(chǎn)。

不可變 Web 應(yīng)用程序引用在全局范圍內(nèi)定義的環(huán)境變量并引用以下兩種方式之一：

• 直接從窗口對(duì)象
• 通過(guò)包裝環(huán)境變量的注入服務(wù)

一個(gè)例子：

靜態(tài)資產(chǎn)必須托管在唯一且獨(dú)立于 Web 應(yīng)用程序環(huán)境的位置。

不包含任何特定環(huán)境的靜態(tài)資產(chǎn)可以構(gòu)建一次，發(fā)布到唯一位置，然后在 Web 應(yīng)用程序的多個(gè)環(huán)境中使用。

這些靜態(tài)資產(chǎn)與內(nèi)容交付網(wǎng)絡(luò) (CDN)（Google 托管庫(kù)、cdnjs、jsDelivr、UNPKG）上托管的 javascript 庫(kù)具有相同的品質(zhì)：

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

上面的 jquery 庫(kù)的位置，被無(wú)數(shù)的 web 應(yīng)用程序引用，既獨(dú)立于應(yīng)用程序，又是唯一的版本。

https://assets.myapp.com/apps/1.0.2/main.js

同樣，Web 應(yīng)用程序 javascript 文件的位置是唯一的，并且托管在專用于靜態(tài)資產(chǎn)的位置。 靜態(tài)資產(chǎn) Web 服務(wù)器是 Web 應(yīng)用程序版本的存儲(chǔ)庫(kù)。

Configure the static assets for long-term caching

不包含任何特定于環(huán)境的內(nèi)容并托管在唯一且永久位置的靜態(tài)資產(chǎn)可以配置為由瀏覽器（幾乎）無(wú)限期地緩存：

cache-control: public, max-age=31536000, immutable

index.html 是可部署的配置

單頁(yè)應(yīng)用程序的 HTML 文檔（通常是 index.html）不是靜態(tài)的。 它因環(huán)境和部署目的地的不同而有所差異。HTML 文檔是特定于環(huán)境的配置和定義 Web 應(yīng)用程序的不可變靜態(tài)資產(chǎn)的組合。

index.html 包含對(duì)靜態(tài)資產(chǎn)的完全限定引用。

看個(gè)例子：

index.html must never be cached

注意：為了允許立即更改 Web 應(yīng)用程序環(huán)境，index.html 絕不能被瀏覽器或無(wú)法按需清除的公共緩存緩存：

cache-control: no-store

不可變 Web 應(yīng)用程序?qū)l(fā)布任務(wù)與構(gòu)建任務(wù)分離為兩個(gè)不同的工作流。

構(gòu)建

不可變 Web 應(yīng)用程序的代碼庫(kù)負(fù)責(zé)構(gòu)建靜態(tài)資產(chǎn)并將它們發(fā)布到靜態(tài) Web 服務(wù)器。代碼庫(kù)的每個(gè)狀態(tài)都可以由位于唯一位置的一組靜態(tài)資產(chǎn)表示。并非代碼庫(kù)的每個(gè)狀態(tài)都需要發(fā)布，但代碼庫(kù)的任何單個(gè)狀態(tài)都不需要多次發(fā)布。

通常，代碼庫(kù)是與持續(xù)集成系統(tǒng)集成的源控制代碼存儲(chǔ)庫(kù)，該系統(tǒng)能夠構(gòu)建、版本控制并將靜態(tài)資產(chǎn)發(fā)布到靜態(tài) Web 服務(wù)器。

這方面的一個(gè)例子可能是：

一個(gè)托管在 GitHub 存儲(chǔ)庫(kù)中的 Angular 項(xiàng)目。當(dāng)提交被推送到主分支時(shí)，repo 與 TravisCI 集成以構(gòu)建和版本資產(chǎn)。 版本化資產(chǎn)發(fā)布到 AWS S3 存儲(chǔ)桶中的唯一位置。

發(fā)布

index.html 文件獨(dú)立于代碼庫(kù)進(jìn)行管理，它們充當(dāng)每個(gè)環(huán)境的清單。 它們應(yīng)被視為配置文件并進(jìn)行相應(yīng)管理。 此外，需要有一種機(jī)制來(lái)修改或替換每個(gè) Web 應(yīng)用程序環(huán)境中的 index.html。 更改 index.html 的行為實(shí)際上是一種部署。

這方面的一個(gè)例子可能是：

一組 index.html 文件，每個(gè)環(huán)境一個(gè)，托管在 Github 存儲(chǔ)庫(kù)中。該存儲(chǔ)庫(kù)與 TravisCI 集成以在修改為 AWS S3 存儲(chǔ)桶時(shí)發(fā)布 index.html 文件。有一個(gè)專用于每個(gè) Web 應(yīng)用程序環(huán)境的 index.html 和 S3 存儲(chǔ)桶。

這種構(gòu)建和發(fā)布分離的工作流，其底層基礎(chǔ)設(shè)置如下圖所示：

支持不可變 Web 應(yīng)用程序的基礎(chǔ)架構(gòu)由三部分組成：

• Web 應(yīng)用程序服務(wù)器：通過(guò)提供 index.html 來(lái)托管 Web 應(yīng)用程序環(huán)境的靜態(tài) Web 服務(wù)器。

• 靜態(tài)資產(chǎn)服務(wù)器：用于托管不可變靜態(tài)資產(chǎn)的靜態(tài) Web 服務(wù)器。

• API：一個(gè)或多個(gè)公開(kāi)暴露的端點(diǎn)以與 Web 應(yīng)用程序后端交互。

構(gòu)建靜態(tài)資產(chǎn)是一個(gè)復(fù)雜的過(guò)程，通常涉及：

• 依賴解析
• 下載庫(kù)文件
• Transpiling
• Minifying
• Bundling
• Uglifying, Code Splitting, Tree Shaking, * Autoprefixing…

這些過(guò)程非常耗時(shí)，嚴(yán)重依賴外部依賴性，并且通常以看似不確定的方式運(yùn)行。它們不是應(yīng)該通過(guò)立即將生成的資產(chǎn)發(fā)布到生產(chǎn)環(huán)境而無(wú)需驗(yàn)證來(lái)結(jié)束的過(guò)程。即使發(fā)布多個(gè)大型靜態(tài)資產(chǎn)的行為也是一個(gè)可能被中斷并使 Web 應(yīng)用程序環(huán)境處于損壞狀態(tài)的過(guò)程。

不可變 Web 應(yīng)用程序生成一次并發(fā)布一次到某個(gè)位置。此過(guò)程發(fā)生在實(shí)時(shí)發(fā)布之前。它們可以在暫存環(huán)境中進(jìn)行驗(yàn)證并提升到生產(chǎn)環(huán)境，而無(wú)需以顯著降低的風(fēng)險(xiǎn)重新生成。

Atomic live releases - 原子實(shí)時(shí)發(fā)布

不可變 Web 應(yīng)用程序的實(shí)時(shí)發(fā)布是發(fā)布單個(gè) index.html 文件的行為。 部署是即時(shí)的，所有資產(chǎn)都可以立即使用，而沒(méi)有任何緩存在發(fā)布時(shí)被破壞的風(fēng)險(xiǎn)。

回滾與部署一樣有風(fēng)險(xiǎn)，而且通常風(fēng)險(xiǎn)更大。 對(duì)于不可變 Web 應(yīng)用程序，部署的相同質(zhì)量適用于回滾。 值得注意的是，在回滾的情況下，大多數(shù)瀏覽器仍會(huì)緩存以前的資產(chǎn)。

萬(wàn)一瀏覽器嘗試加載舊版本的 index.html，以前版本的所有資產(chǎn)仍然可用且未損壞。

簡(jiǎn)化的緩存策略

管理緩存控制標(biāo)頭可能令人生畏，尤其是當(dāng) Web 應(yīng)用程序基礎(chǔ)架構(gòu)利用 CDN 使用的公共緩存時(shí)。 緩存中最簡(jiǎn)單的兩個(gè)概念是：“始終緩存”和“從不緩存”。 不可變 Web 應(yīng)用程序包含這些概念，將可以“始終緩存”的代碼與“從不緩存”的配置完全分開(kāi)。

簡(jiǎn)化的路由策略

領(lǐng)先的應(yīng)用程序框架在其部署建議中沒(méi)有將靜態(tài)資產(chǎn)的位置與 index.html 分開(kāi)。 相反，他們建議向 Web 服務(wù)器添加路由規(guī)則，為所有未解析為物理文件的路徑返回 index.html。

這些路由規(guī)則的實(shí)現(xiàn)可能因 Web 服務(wù)器而異，錯(cuò)誤通常會(huì)導(dǎo)致路徑解析為錯(cuò)誤的資源。

將 index.html 的托管和靜態(tài)資產(chǎn)分開(kāi)可以消除這種風(fēng)險(xiǎn)。 靜態(tài)資產(chǎn)服務(wù)器始終提供由 url 表示的物理文件，而 Web 應(yīng)用程序服務(wù)器始終為任何 url 提供 index.html。

不可變的 Web 應(yīng)用通常與下列這些概念具有密切關(guān)聯(lián)：

• 現(xiàn)代應(yīng)用程序框架：Angular、React、Vue 和 Ember 使團(tuán)隊(duì)能夠構(gòu)建越來(lái)越復(fù)雜的單頁(yè)靜態(tài)應(yīng)用程序。像 webpack 這樣的工具提高了創(chuàng)建、優(yōu)化和管理構(gòu)建工件的能力。

• DevOps：DevOps 文化使 Web 應(yīng)用程序開(kāi)發(fā)人員能夠分解和重新評(píng)估其 Web 應(yīng)用程序基礎(chǔ)架構(gòu)，以更好地滿足其 Web 應(yīng)用程序的需求。

• 成熟的應(yīng)用程序模式和實(shí)踐：后端應(yīng)用程序和服務(wù)正在圍繞一組支持可移植性、可擴(kuò)展性和高可用性的最佳實(shí)踐進(jìn)行融合。 這種趨勢(shì)極大地增加了可用的工具和服務(wù)，尤其是與容器和容器編排相關(guān)的工具和服務(wù)。 許多這些實(shí)踐剛剛開(kāi)始應(yīng)用于靜態(tài)單頁(yè) Web 應(yīng)用程序。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的什么是 Immutable Web Apps的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。