[官網](https://immutablewebapps.org/)

不可變 Web 應用程式是一種與框架無關的方法，用於構建和部署靜態單頁應用程式：

* 最大限度地降低實時釋出的風險和複雜性。
* 簡化和最大化快取。
* 最大限度地減少對伺服器和執行時環境管理的需求。
* 透過簡單、靈活的原子部署實現持續交付。

# 準則

該方法基於嚴格分離的原則：

* 從程式碼配置。
* 從構建任務中釋放任務。
* 來自靜態內容的動態內容。

以下概念定義了不可變 Web 應用程式的核心要求。 它們與框架和基礎設施無關。

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

靜態資產是從 Web 應用程式程式碼庫的構建生成的檔案（javascript、css、影像）。 當它們不包含任何特定於環境的內容並且它們被髮布到一個獨特的、獨立的位置時，它們就會變得不可變。

# Static assets must not contain anything that is environment-specific

所有領先的應用程式框架（Angular CLI、Create React App、Ember CLI、Vue CLI 3）都建議在編譯時定義環境變數。 這種做法要求為每個環境生成靜態資產，並針對環境的任何更改重新生成靜態資產。

不可變 Web 應用程式引用在全域性範圍內定義的環境變數並引用以下兩種方式之一：

* 直接從視窗物件
* 透過包裝環境變數的注入服務

一個例子：

![](https://img-blog.csdnimg.cn/img_convert/e1a4e0c9cffddbf355cd1ebc2fe3078e.png)

靜態資產必須託管在唯一且獨立於 Web 應用程式環境的位置。

不包含任何特定環境的靜態資產可以構建一次，釋出到唯一位置，然後在 Web 應用程式的多個環境中使用。

這些靜態資產與內容交付網路 (CDN)（Google 託管庫、cdnjs、jsDelivr、UNPKG）上託管的 javascript 庫具有相同的品質：

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

上面的 jquery 庫的位置，被無數的 web 應用程式引用，既獨立於應用程式，又是唯一的版本。

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

同樣，Web 應用程式 javascript 檔案的位置是唯一的，並且託管在專用於靜態資產的位置。 靜態資產 Web 伺服器是 Web 應用程式版本的儲存庫。

# Configure the static assets for long-term caching

不包含任何特定於環境的內容並託管在唯一且永久位置的靜態資產可以配置為由瀏覽器（幾乎）無限期地快取：

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

# index.html 是可部署的配置

單頁應用程式的 HTML 文件（通常是 index.html）不是靜態的。 它因環境和部署目的地的不同而有所差異。HTML 文件是特定於環境的配置和定義 Web 應用程式的不可變靜態資產的組合。

index.html 包含對靜態資產的完全限定引用。

看個例子：

![](https://img-blog.csdnimg.cn/img_convert/669487595d0663af22cb6bf6edd61d63.png)

# index.html must never be cached

注意：為了允許立即更改 Web 應用程式環境，index.html 絕不能被瀏覽器或無法按需清除的公共快取快取：

> cache-control: no-store

不可變 Web 應用程式將釋出任務與構建任務分離為兩個不同的工作流。

# 構建

不可變 Web 應用程式的程式碼庫負責構建靜態資產並將它們釋出到靜態 Web 伺服器。程式碼庫的每個狀態都可以由位於唯一位置的一組靜態資產表示。並非程式碼庫的每個狀態都需要釋出，但程式碼庫的任何單個狀態都不需要多次釋出。

通常，程式碼庫是與持續整合系統整合的源控制程式碼儲存庫，該系統能夠構建、版本控制並將靜態資產釋出到靜態 Web 伺服器。

這方面的一個例子可能是：

一個託管在 GitHub 儲存庫中的 Angular 專案。當提交被推送到主分支時，repo 與 TravisCI 整合以構建和版本資產。 版本化資產釋出到 AWS S3 儲存桶中的唯一位置。

# 釋出

index.html 檔案獨立於程式碼庫進行管理，它們充當每個環境的清單。 它們應被視為配置檔案並進行相應管理。 此外，需要有一種機制來修改或替換每個 Web 應用程式環境中的 index.html。 更改 index.html 的行為實際上是一種部署。

這方面的一個例子可能是：

一組 index.html 檔案，每個環境一個，託管在 Github 儲存庫中。該儲存庫與 TravisCI 整合以在修改為 AWS S3 儲存桶時釋出 index.html 檔案。有一個專用於每個 Web 應用程式環境的 index.html 和 S3 儲存桶。

這種構建和釋出分離的工作流，其底層基礎設定如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/1ccd4f9b8d7a6239da0ae95d65fbb7dd.png)

支援不可變 Web 應用程式的基礎架構由三部分組成：

* Web 應用程式伺服器：透過提供 index.html 來託管 Web 應用程式環境的靜態 Web 伺服器。

* 靜態資產伺服器：用於託管不可變靜態資產的靜態 Web 伺服器。

* API：一個或多個公開暴露的端點以與 Web 應用程式後端互動。

構建靜態資產是一個複雜的過程，通常涉及：

* 依賴解析
* 下載庫檔案
* Transpiling
* Minifying
* Bundling
* Uglifying, Code Splitting, Tree Shaking, * Autoprefixing…

這些過程非常耗時，嚴重依賴外部依賴性，並且通常以看似不確定的方式執行。它們不是應該透過立即將生成的資產釋出到生產環境而無需驗證來結束的過程。即使釋出多個大型靜態資產的行為也是一個可能被中斷並使 Web 應用程式環境處於損壞狀態的過程。

不可變 Web 應用程式生成一次併發布一次到某個位置。此過程發生在實時釋出之前。它們可以在暫存環境中進行驗證並提升到生產環境，而無需以顯著降低的風險重新生成。

# Atomic live releases - 原子實時釋出

不可變 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 應用程式。

什麼是 Immutable Web Apps

相關文章