如何使用微服務架構構建WordPress網路應用程式

如何使用微服務架構構建WordPress網路應用程式

WordPress 是一個功能強大的內容管理系統(CMS),可以為不同型別的網站和應用程式奠定基礎。它使用的是典型的 “單體架構”,但隨著網站的發展,這可能不是最合適的架構。這就是 “微服務架構”的優勢所在。

在這篇文章中,我們將探討如何使用微服務架構構建 WordPress Web 應用程式。我們還將介紹 Create Block Theme 外掛,並討論如何將這一令人興奮的解決方案融入到您的開發中。

什麼是微服務

在構建任何網路應用程式之前,您都應該瞭解微服務及其與單體架構的區別。

在單體架構中,應用程式的所有元件之間都是緊密耦合的。它本質上是作為單一服務執行的。這是一種開發應用程式的簡單方法,但隨著複雜性的增加,維護和可擴充套件性可能會成為一個挑戰。

相比之下,微服務可以幫助您將應用程式分解成一系列更小的服務。每個服務在開發、部署和擴充套件方面都相互獨立。

每個服務處理特定的任務,並通過應用程式設計介面(API)與其他服務通訊。例如,一個典型的電子商務網站有購物車、結賬、訂單處理、產品頁面等。

DARTDrones 網站

DARTDrones 網站上的一個電子商務頁面。

在單體架構中,所有這些功能都是一個大型應用程式的一部分。WordPress 就是單體架構,使用 Woo 作為電子商務平臺就是一個很好的例子。

然而,實施微服務架構可以讓您為每項任務使用正確的技術。例如,您可以將 WordPress 的一流內容管理系統用於內容營銷。Adobe Commerce 可以作為您的產品管理系統。Bolt 等結賬解決方案可以滿足您的需求。

Bolt 網站

Bolt 網站。

通過微服務可以將這些功能整合在一起。接下來,讓我們詳細談談為什麼微服務應該成為下一個專案的重要考慮因素。

微服務從單體架構中脫穎而出的原因

微服務的高階 “elevator pitch” 是如何將不同的技術和工具組合成一個整體。不過,還有其他更深層次的特點值得注意:

  • 解耦。每個服務都保持獨立。這意味著您可以為每項工作使用最好的技術,而不是使用不合適的框架
  • 自主性。由此推論,您所整合的服務無需相互依賴即可高效執行。
  • 專業化。當然,每個服務都將專注於自己的工作,這同樣會影響效能。
  • 彈性。這種固有的高效能資產的一部分是,一次服務故障不會導致整個網站癱瘓。

除了這些方面,使用微服務還有更多優勢:

  • 可擴充套件性。您可以根據個人需求擴充套件單個服務,而不會影響應用程式的其他部分。
  • 靈活性。我們已經簡要介紹了您的服務如何使用最適合其工作的技術。這甚至延伸到您用來建立服務程式語言
  • 開發速度更快。您可以更快地開發小型和重點服務,更好地瞭解服務功能,更輕鬆地維護系統。
  • 改進故障隔離。通過模組化設定,如果某個服務出現故障,您可以將其隔離,而不會影響其他服務。

另一方面,微服務會給通訊、資料一致性和分散式系統的管理帶來複雜性。因此,您必須仔細權衡應用程式的需求。總之,在決定使用微服務之前,要同時考慮其優點和利弊得失。

微服務架構的組成部分

正如您所期望的那樣,微服務架構可以由多個元件組成。這些“齒輪”在整個“車輪”中協同工作,以提供可擴充套件、可維護的應用程式。

因此,有些元件是順利實施的關鍵:

  • API 閘道器:這是任何客戶端請求的入口。它將這些請求轉移到相應的微服務。它還可以處理速率限制和身份驗證等任務。
  • 服務發現:您需要採用一種動態方式讓微服務相互發現和通訊Consul 或 Eureka 等工具可以在這方面提供幫助。
  • 容器化:通常使用 Docker 等工具將微服務打包並部署為容器。這就是為每個服務提供隔離的方法。
  • 協調:當您在應用中新增微服務時,對它們的管理就會變得更加複雜。Kubernetes 等工具可以幫助實現服務管理自動化。
  • 快取:RedisMemcached 等快取機制通常可以提高效能。考慮到您的後端服務和資料庫所承受的更大壓力,這一點至關重要。
  • 訊息傳遞:當然,您的服務也需要相互通訊。這就是 RabbitMQApache Kafka 等“非同步”訊息傳遞解決方案的工作。這些“訊息代理”可實現微服務之間的鬆散耦合。

不過,工具只是設定的一個方面。還有其他考慮因素,例如如何在完整架構中設計每個微服務。

微服務設計模式

微服務的設計模式開發工作流程中的其他部分一樣重要。鑑於整個應用程式的潛在複雜性,考慮哪些模式會產生最大的影響非常重要。我們可以指出以下三種:

  • 每服務資料庫:每個微服務都使用自己的專用資料庫,這有助於資料隔離和自治。
  • API 組合:您可以通過組合微服務來建立更高階別的服務或應用程式介面。這種靈活性和可重用性是其最大的優點。
  • 事件驅動架構:在這裡,服務將通過事件進行通訊。這有利於鬆耦合和非同步處理。

同樣重要的是,要考慮到用於構建架構的工具的特定設計模式。例如,Docker 和 Kubernetes 都有典型的模式,您在考慮架構的全域性設計時也要考慮這些模式。

不過,要知道並非每個元件都需要是微服務。正確的想法是從關鍵服務開始,然後逐步發展架構。稍後,我們將對此進行更詳細的討論。首先,我們應該看看如何開發前端。

建立區塊主題外掛介紹

WordPress 在很多方面都非常出色,因此很可能會出現在您的網站架構中。其中之一就是它在前端的易用性。主題是該平臺的核心部分,有了 Create Block Theme 這樣的外掛,建立自己的主題就容易多了。

Create Block Theme 圖片

Create Block Theme 圖片來自 WordPress.org

該外掛是 Underscores 初始主題的精神繼承者,但與全站編輯(FSE)完全相容。您可以快速建立起始主題,充分利用編輯器的全部功能,並駕馭全部自定義選項。它可以作為一個典型的 WordPress 外掛使用,並可在稍後將其匯出為獨立主題。

在使用建立區塊主題外掛的同時,使用微服務架構可以將一切“粘合”在一起。例如,您可以在不同的 WordPress 網站上使用區塊樣板和可重複使用的區塊。這不僅能促進程式碼重用和一致性,還能為您使用的所有單獨服務提供統一的前臺。

我們將在本篇文章的稍後部分探討使用建立區塊主題的具體細節。現在,讓我們討論一下無頭 WordPress 以及微服務對它的影響。

無頭 WordPress 與微服務架構的交集

如果您想將 WordPress 的前端和後端分離,微服務自然是向前邁出的一步。對於典型的無頭 WordPress 而言,該平臺僅用於內容管理。它可能被用作 API。

通過將無頭 WordPress 與微服務架構相結合,您可以:

  • 利用 WordPress REST API。WordPress提供了一個內建的REST API,可以讓你以程式設計方式檢索和操作內容。您可以使用該 API 將您的微服務與 WordPress 整合。
  • 讓您的前端和後端具有獨立的可擴充套件性。有了網站的兩個獨立部分,您就可以同時擴充套件這兩個部分並獲得更好的效能。儘管複雜,但您實際上獲得了靈活性。

接下來,我們想多關注一下 REST API。這是您使用微服務的方式,因此是整個鏈條的重要組成部分。

微服務與 WordPress REST API

WordPress REST API 在實現網站與微服務的整合方面發揮著至關重要的作用。通過它的端點,您可以使用 JSON 輸出檢索和操作 WordPress 文章、頁面、使用者、分類法等。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[
{
"id": 1,
"date": "2020-04-01T10:30:00",
"date_gmt": "2020-04-01T14:30:00",
"guid": {
"rendered": "https://example.com/?p=1"
},
"modified": "2020-04-01T10:30:00",
"modified_gmt": "2020-04-01T14:30:00",
"slug": "hello-world",
"status": "publish",
"type": "post",
"link": "https://example.com/hello-world/",
"title": {
"rendered": "Hello World"
},
[ { "id": 1, "date": "2020-04-01T10:30:00", "date_gmt": "2020-04-01T14:30:00", "guid": { "rendered": "https://example.com/?p=1" }, "modified": "2020-04-01T10:30:00", "modified_gmt": "2020-04-01T14:30:00", "slug": "hello-world", "status": "publish", "type": "post", "link": "https://example.com/hello-world/", "title": { "rendered": "Hello World" }, …
[
{
"id": 1,
"date": "2020-04-01T10:30:00",
"date_gmt": "2020-04-01T14:30:00",
"guid": {
"rendered": "https://example.com/?p=1"
},
"modified": "2020-04-01T10:30:00",
"modified_gmt": "2020-04-01T14:30:00",
"slug": "hello-world",
"status": "publish",
"type": "post",
"link": "https://example.com/hello-world/",
"title": {
"rendered": "Hello World"
},
…

因此,REST API 是架構中所有其他服務的樞紐。這意味著您必須選擇將哪些當前網站服務提取為微服務。我們將在後面的文章中更詳細地討論這個問題。

簡而言之,關鍵在於確定網路應用中的不同功能和職責。在此基礎上,您可以將它們拆分為獨立、集中和可部署的微服務。

使用 Create Block Theme 和微服務構建網路應用程式

本篇文章的其餘部分將介紹微服務和無頭 WordPress 的基礎知識。這篇文章將從整體上介紹很多內容,因為實際過程將根據您的需求而定。

即便如此,讓我們深入瞭解使用微服務和 Create Block Theme 外掛構建網路應用的過程。第一步是設定開發環境。

1. 建立開發環境

每個應用程式都是從建立空間開始的。因此,您需要一個開發環境。開發空間有兩個位置:本地計算機和伺服器。

設定本地開發環境的方法有很多(比如 DevKinsta):

DevKinsta logo

DevKinsta logo

我們還建議您使用暫存環境,因為您需要在部署更改之前對其進行測試。

DevKinsta 本地網站資訊

DevKinsta 本地網站資訊

DevKinsta 將為您安裝 Docker,這有助於從您的任務清單中勾選另一項任務。你可能想使用 Kubernetes 進行協調,因此現在正是安裝的時候。Kinsta 將其用於資料庫託管應用程式和其他任務,你可以在 Docker Desktop 中下載:

 Kubernetes 設定

Docker Dashboard 中的 Kubernetes 設定。

在這裡,你還需要設定開發主題所需的其他框架。不過,如果沒有 Create Block Theme 外掛,你什麼也做不了,所以現在讓我們來看看它。

2. 設定 Create Block Theme 外掛

設定好開發環境後,就可以開始使用 Create Block Theme 外掛建立自定義塊主題了。您還需要具備以下條件:

  • 一個 WordPress 網站。
  • 您喜歡使用的編碼編輯器。
  • 建立 Create Block Theme 外掛。

您可以用典型的 WordPress 方式安裝外掛。然後,前往 WordPress 中的 外觀 > Create Block Theme 連結:

Create Block Theme 連結

WordPress 儀表板上顯示的 Create Block Theme 連結。

另外,如果你檢視外觀選項卡,就會發現管理主題字型選項。建立區塊主題也可以訪問該選項,它本質上就是 WordPress 6.5 的字型庫功能。

無論如何,在“Create Block Theme”螢幕上,你都會看到生成新主題的選項列表。我們不會在此一一介紹,但我們會選擇克隆 Twenty Twenty-Four。無論如何,這都將顯示一組選項和欄位:

Create Block Theme 設定

Create Block Theme 設定螢幕。

如果你注意到了,這些將成為你的 style.css 檔案中的主題標識欄位。它們很簡單,包括選擇名稱、截圖、URL 和 WordPress 主題目錄的一些標籤。

點選確認後,再次進入 外觀 > 主題 頁面,就可以看到你的新主題已經準備就緒:

WordPress 主題頁面

WordPress 主題頁面。

在某些情況下,你會下載一個主題的 ZIP 檔案,然後上傳回 WordPress。注意,你也可以匯出主題,但就我們的使用情況而言,我們現在不會這麼做。

設定和使用 Create Block Theme 的技巧

由於超出了本篇文章的討論範圍,我們將不對新的區塊主題進行過多的定製。不過,這裡有一些使用 Create Block Theme 的提示:

  • 您可以在兩個地方進行修改。您可以使用“全站編輯器”中的“全域性樣式”選項,也可以自定義 theme.json 檔案。
  • 為你選擇的微服務建立一個區塊是個好主意。稍後我們將對此進行詳細介紹。
  • 建立區塊主題可以讓你根據當前活動主題生成一個子主題。不過,你的選擇將取決於你的目標。

讓我們再來談談最後一點。如果這是一個用於建立和釋出的主題,你會希望在父主題內工作。如果是自己使用,可以只定制子主題。根據經驗,一個主題最初的“填充”越少,你就越應該在父主題內工作。

3. 提取選定的微服務

區塊主題準備就緒後,就可以更仔細地檢查微服務了。您需要做出的一個關鍵決定是哪些服務將成為 “微服務”。

這可能是一個複雜而主觀的問題,您需要根據自己的需求來回答。但有幾個因素需要注意:

  • 您網站的功能:檢視網站提供的任何獨特功能,並考慮將其拆分為單獨的微服務,如支付功能。
  • 獨立可擴充套件性:依賴於獨立擴充套件的現有服務將是微服務的良好候選者。快取就是一個例子。
  • 技術多樣性:如果需要擺脫 WordPress 的 PHP 架構,這也是另一種微服務的候選方案。對於特定的電子商務平臺或後臺元件來說,情況可能就是這樣。
  • 資料隔離:具有自定義資料儲存要求的服務可以是微服務。如果這些服務不需要與其他服務共享資料,也屬於這種情況。

我們認為,建立提供特定 API 功能的微服務是一個可靠的想法。這可以是搜尋、支付處理或身份驗證。如果這些服務能與其他第一和第三方 API 作出反應,那麼它們就會變得更加靈活和有價值。

開發和部署微服務

要開發並最終部署微服務,您需要藉助其他工具。以下是一些關鍵的注意事項和可以使用的工具:

  • Docker 通常是您對微服務進行容器化的方式。它將微服務及其依賴關係打包在一起,使其易於部署和擴充套件。
  • 每個微服務也需要一個 Dockerfile。它應指定所需的依賴項、配置和執行時環境。
  • 使用 Kubernetes 進行容器編排和管理。Kinsta 提供了一個內建 Kubernetes 支援的強大平臺。
  • 持續整合和部署(CI/CD)管道可以實現構建、測試和部署的自動化。GitLabTravis CI 等工具可以幫助您簡化 CI/CD 流程。
  • 無伺服器函式不需要完整的伺服器,因此非常適合微服務。AWS Lambda、Google Cloud Functions 或 Azure Functions 等平臺可讓你在無需配置或管理伺服器的情況下執行程式碼。
  • API 閘道器可為你的微服務提供單一入口。Kong亞馬遜 API 閘道器等工具可以幫助您管理和保護 API。此外,它們還能處理身份驗證、速率限制和請求路由等任務。

至此,您將擁有一個相互獨立的 WordPress 網站和微服務。最後一步就是整合它們。

4. 將微服務與 WordPress 整合

開發和部署微服務後,您需要將它們與 WordPress 整合。為此,您需要從WordPress呼叫API到微服務暴露的端點。因此,您需要深入瞭解 REST API。

在 WordPress 中,典型的方法是使用 wp_remote_get() wp_remote_post()。這可以讓你傳送 HTTP 請求並處理響應。下面是一些示例程式碼,說明如何將它們整合在一起:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// API endpoint URL
$api_url = 'https://api.example.com/endpoint';
// API request parameters
$params = array(
'param1' => 'value1',
'param2' => 'value2',
);
// Make the API request using wp_remote_get
$response = wp_remote_get(add_query_arg($params, $api_url));
// Check if the request was successful
if (is_wp_error($response)) {
// Handle the error
$error_message = $response->get_error_message();
// Log or display the error message
} else {
// Process the API response
$response_body = wp_remote_retrieve_body($response);
$data = json_decode($response_body, true);
// Use the retrieved data as needed
// ...
}
// API endpoint URL $api_url = 'https://api.example.com/endpoint'; // API request parameters $params = array( 'param1' => 'value1', 'param2' => 'value2', ); // Make the API request using wp_remote_get $response = wp_remote_get(add_query_arg($params, $api_url)); // Check if the request was successful if (is_wp_error($response)) { // Handle the error $error_message = $response->get_error_message(); // Log or display the error message } else { // Process the API response $response_body = wp_remote_retrieve_body($response); $data = json_decode($response_body, true); // Use the retrieved data as needed // ... }
// API endpoint URL
$api_url = 'https://api.example.com/endpoint';
// API request parameters
$params = array(
'param1' => 'value1',
'param2' => 'value2',
);
// Make the API request using wp_remote_get
$response = wp_remote_get(add_query_arg($params, $api_url));
// Check if the request was successful
if (is_wp_error($response)) {
// Handle the error
$error_message = $response->get_error_message();
// Log or display the error message
} else {
// Process the API response
$response_body = wp_remote_retrieve_body($response);
$data = json_decode($response_body, true);
// Use the retrieved data as needed
// ...
}

微服務通常受益於非同步資料獲取,以避免阻塞主執行緒。 WordPress可以結合兩種元素來實現這一點。您可以使用 API Fetch 包,以及 WordPress 6.3 中引入的 async 和 defer 支援。您的程式碼可能與下面類似:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import apiFetch from '@wordpress/api-fetch';
// Microservice API endpoint URL
const microserviceUrl = 'https://api.example.com/microservice';
...
// Make the API request to the microservice
apiFetch({
path: microserviceUrl,
method: 'GET',
data: params,
})
.then((response) => {
// Process the response
console.log(response);
// Use the retrieved data from the microservice
// ...
})
...
import apiFetch from '@wordpress/api-fetch'; // Microservice API endpoint URL const microserviceUrl = 'https://api.example.com/microservice'; ... // Make the API request to the microservice apiFetch({ path: microserviceUrl, method: 'GET', data: params, }) .then((response) => { // Process the response console.log(response); // Use the retrieved data from the microservice // ... }) ...
import apiFetch from '@wordpress/api-fetch';
// Microservice API endpoint URL
const microserviceUrl = 'https://api.example.com/microservice';
...
// Make the API request to the microservice
apiFetch({
path: microserviceUrl,
method: 'GET',
data: params,
})
.then((response) => {
// Process the response
console.log(response);
// Use the retrieved data from the microservice
// ...
})
...

您還可以考慮使用 AJAX 進行動態使用者介面(UI)更新。

當然,適當的身份驗證和安全措施也至關重要。WordPress REST API 包括幾種驗證會話的方法,如使用 cookie、JSON Web 標記(JWT)或應用程式密碼。鑑於對外部解決方案的依賴,保證微服務和網站的安全至關重要。

鑑於我們使用的是自定義 Block 主題,因此利用該功能是很有意義的。將微服務新增到區塊中意味著您幾乎可以將其新增到網站的任何位置。如果想更進一步,甚至可以在外掛中加入該功能。

整個過程包括三個部分:註冊區塊呈現內容和處理資料。在此,JavaScript 將是您的首選語言,registerBlockType 函式將處理註冊和渲染

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// JavaScript function that builds the Block to enable access within the Block Editor.
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'my-micro/stripe-api', {
title: 'Stripe Payment Gateway',
icon: 'dashicons-cart',
category: 'embed',
edit: function() {
return el(
'div',
{},
'' // Create the visual elements of the microservice to display within the Block Editor.
);
},
// JavaScript function that builds the Block to enable access within the Block Editor. ( function( blocks, element ) { var el = element.createElement; blocks.registerBlockType( 'my-micro/stripe-api', { title: 'Stripe Payment Gateway', icon: 'dashicons-cart', category: 'embed', edit: function() { return el( 'div', {}, '' // Create the visual elements of the microservice to display within the Block Editor. ); }, …
// JavaScript function that builds the Block to enable access within the Block Editor.
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'my-micro/stripe-api', {
title: 'Stripe Payment Gateway',
icon: 'dashicons-cart',
category: 'embed',
edit: function() {
return el(
'div',
{},
'' // Create the visual elements of the microservice to display within the Block Editor.
);
},
…

這是註冊區塊的一個非常基本的示例,更多內容超出了本篇文章的範圍。不過,你可以看到,將 Create Block Theme 外掛、微服務和 WordPress 結合起來非常簡單。如果你使用合適的託管服務提供商,你還可以通過另一種方式為你的微服務架構增值。

小結

WordPress 是單體式的,但這並不妨礙它採用微服務。這樣做有很多好處,例如提高可擴充套件性、靈活性和開發速度。

評論留言