Skip to main content

Shopify 平台架構

在你能有效地在 Shopify 上建構之前，你需要了解平台是如何建構的。Shopify 是全球最大的多租戶 SaaS 平台之一，為各行各業的數百萬商家提供服務。本課探討使這一切運作的架構。

多租戶 SaaS 架構​

Shopify 運行在多租戶架構上，意味著所有商家共享相同的應用程式基礎設施。與自託管平台（WooCommerce、Magento）不同，商家不需要管理伺服器、資料庫或部署。

多租戶對開發者的影響​

作為 Shopify 開發者，多租戶在幾個方面影響你：

  • 無伺服器存取：你無法 SSH 連入 Shopify 伺服器或修改系統配置。你的程式碼在沙盒環境中執行（應用程式、主題、Functions）。
  • 共享速率限制：API 速率限制保護平台。你的應用程式與商家商店上的其他所有應用程式共享資源。
  • 保證正常運行時間：Shopify 處理基礎設施、擴展和安全。你的應用程式受益於 Shopify 99.99% 的正常運行時間 SLA。
  • 標準化資料模型：每個商店使用相同的產品、訂單和客戶資料模型。一旦你學會了，它在任何地方都適用。
Shopify 的規模

Shopify 每年處理超過 $2,000 億美元的 GMV（商品交易總額）。在 Black Friday/Cyber Monday 等高峰期間，平台在一個週末內處理超過 $42 億美元。架構就是為這種規模設計的，你的應用程式繼承了這個基礎設施。

三個介面​

Shopify 暴露三個使用者互動的主要介面。了解這些對於知道你的程式碼在哪裡執行是至關重要的。

1. 店面​

店面是客戶訪問商家線上商店時看到的內容。它可以用兩種方式渲染：

Liquid 主題（Online Store 2.0）：預設方式。Shopify 的伺服器使用 Liquid 模板語言渲染 HTML。主題是 Liquid 模板、CSS、JavaScript 和資源的集合。這是最常見的方法，絕大多數 Shopify 商店都使用它。

Hydrogen（Headless）：基於 React 的框架，用於建構自訂店面。Hydrogen 使用 Storefront API 獲取資料，可以部署在 Shopify 的 Oxygen 託管或任何 Node.js 主機上。適用於需要完全設計自由的品牌。

2. 管理後台​

Shopify Admin 是商家的後台辦公室 —— 他們在這裡管理產品、訂單、客戶、設定和已安裝的應用程式。作為應用程式開發者，你的應用程式使用 App Bridge 嵌入在 Admin 中執行。

關鍵 Admin 概念：

  • App Bridge：一個 JavaScript 函式庫，讓你的嵌入式應用程式與 Shopify Admin 通訊（導航、模態框、toast 通知、資源選擇器）
  • Polaris：Shopify 的 React 元件庫，用於建構感覺原生的 Admin UI
  • Admin API：GraphQL 和 REST API，讓你的應用程式讀寫商店資料
  • Admin extensions：UI 擴充功能，將你的應用程式功能直接添加到 Admin 頁面中（例如產品頁面上的自訂欄位）

3. 結帳​

結帳是 Shopify 最受保護的介面。出於安全和合規原因（PCI DSS），結帳受到嚴格控制。你透過特定的 API 來擴展它：

  • Checkout UI Extensions：在結帳流程中指定的擴充目標渲染的 React 元件
  • Shopify Functions：自訂結帳邏輯的 WebAssembly 模組（折扣、運費、支付方式、購物車轉換）
  • Post-Purchase Extensions：在付款後但在感謝頁面之前顯示的 UI
結帳不是隨意的

與其他平台不同，你無法在 Shopify 的結帳中注入任意 JavaScript。這是故意的 —— 它保護轉換率、安全性和效能。Extensions 和 Functions 在安全的邊界內提供強大的自訂功能。

Online Store 2.0​

Online Store 2.0（OS2.0）是 Shopify 目前的主題架構，於 2021 年推出。它用更靈活、對商家更友善的方式取代了舊版主題系統。

關鍵 OS2.0 功能​

  • JSON 範本：範本以 JSON 定義，指定要渲染哪些 sections 以及順序。商家可以在不編輯程式碼的情況下添加、移除和重新排序 sections。
  • Sections Everywhere：Sections 是可重複使用、可配置的內容區塊。在 OS2.0 中，sections 可在每種頁面類型上使用，而不僅僅是首頁。
  • Blocks：Sections 包含 blocks —— 更小的內容單元，商家可以在 section 內添加和重新排列。
  • Metafields：附加到產品、集合、訂單和其他資源的自訂資料欄位。OS2.0 使 metafields 可在主題編輯器中存取。
  • App Blocks：應用程式可以註冊主題 blocks，商家可以使用編輯器將其拖放到主題中。

Hydrogen 和 Oxygen​

對於需要完全控制店面的商家，Shopify 提供 headless 商務解決方案。

Hydrogen​

Hydrogen 是建構在 Remix 之上的 React 框架，專為 Shopify 店面設計。它提供：

  • Shopify 專用 hooks 和元件，用於產品、集合、購物車和客戶帳戶
  • Storefront API 整合，內建快取和樂觀更新
  • SEO 工具，用於管理 meta 標籤、sitemap 和結構化資料
  • Streaming SSR，實現快速初始頁面載入
  • 入門範本，提供現成的完整店面

Oxygen​

Oxygen 是 Shopify 為 Hydrogen 店面打造的託管平台。主要優勢：

  • 全球邊緣部署 —— 你的店面在全球各地靠近客戶運行
  • 自動擴展 —— 無需配置即可處理流量高峰
  • 基於 Git 的部署 —— 推送到 main 分支，Oxygen 自動部署
  • 環境變數 —— 安全地管理密鑰
  • 預覽部署 —— 每個分支都有預覽 URL
何時使用 Hydrogen 與 Liquid

當以下情況時使用 Liquid 主題：商家需要標準電子商務體驗、想要使用主題編輯器，且沒有開發團隊進行持續維護。

當以下情況時使用 Hydrogen：品牌需要完全自訂的設計、想要類似應用程式的互動性、需要整合非 Shopify 資料來源，或有偏好 React 的開發團隊。

對於大多數商店，Liquid 主題是正確的選擇。Hydrogen 在高端品牌、市集和複雜的多來源店面中表現出色。

Shopify Functions 執行環境​

Shopify Functions 是平台架構中最新的主要組成部分。它們是輕量級的沙盒程式，在 Shopify 的基礎設施上執行，用於自訂核心商務邏輯。

Functions 如何運作​

  1. Extension target：你選擇要自訂商務流程的哪個部分（折扣、運費、支付方式、購物車轉換、訂單路由等）
  2. Input query：你編寫一個 GraphQL 查詢，定義你的 Function 需要什麼資料（購物車內容、客戶資訊、metafields 等）
  3. Function 邏輯：你用 JavaScript 或 Rust 編寫自訂邏輯。程式碼編譯為 WebAssembly（Wasm）。
  4. Output：你的 Function 返回一個結構化回應，Shopify 將其應用到結帳中。

Functions 在 5 毫秒內執行，並有嚴格的記憶體限制。它們被設計為快速且安全 —— 無法進行網路請求、存取檔案系統或執行 I/O。所有資料都透過 input query 輸入。

Scripts 到 Functions 的遷移

如果你正在維護 Shopify Scripts（基於 Ruby 的結帳自訂），請注意 Scripts 已棄用，將於 2026 年 6 月移除。所有 Scripts 必須遷移到 Functions。我們在 Shopify Functions 課程中詳細介紹了遷移過程。

所有組件如何連接​

以下是平台組件如何相互關聯的完整圖片：

關鍵要點​

了解平台架構為你作為 Shopify 開發者所做的每個決定提供了心智模型：

  • 多租戶意味著你擴展平台，而不是控制基礎設施
  • 三個介面（店面、Admin、結帳）各有不同的擴展機制
  • Online Store 2.0 提供靈活的、商家可編輯的主題，帶有 sections 和 blocks
  • Hydrogen + Oxygen 為需要完全控制的品牌啟用 headless 店面
  • Shopify Functions 在快速、沙盒化的執行環境中自訂商務邏輯

在下一課中，我們將調查完整的 Shopify API 版圖，學習如何為每項任務選擇正確的 API。