Skip to main content

Shopify 平台架构

在你能够有效地在 Shopify 上构建之前，你需要了解平台是如何构建的。Shopify 是全球最大的多租户 SaaS 平台之一，为各行各业的数百万商家提供服务。本节课将探索使这一切运转的架构。

多租户 SaaS 架构​

Shopify 运行在多租户架构上，意味着所有商家共享相同的应用基础设施。与自托管平台（WooCommerce、Magento）不同，商家不需要管理服务器、数据库或部署。

多租户对开发者的影响​

作为 Shopify 开发者，多租户在以下几个方面影响着你：

  • 无服务器访问：你无法 SSH 进入 Shopify 服务器或修改系统配置。你的代码在沙盒环境中运行（应用、主题、Functions）。
  • 共享速率限制：API 速率限制保护平台。你的应用与商家店铺上的所有其他应用共享资源。
  • 保证正常运行时间：Shopify 处理基础设施、扩展和安全。你的应用受益于 Shopify 99.99% 的正常运行时间 SLA。
  • 标准化数据模型：每个店铺使用相同的产品、订单和客户数据模型。一旦学会，就能在任何地方使用。
Shopify 的规模

Shopify 每年处理超过 2000 亿美元的 GMV（商品交易总额）。在黑色星期五/网络星期一等峰值活动期间，平台在一个周末内处理超过 42 亿美元。该架构就是为这种规模的流量设计的，你的应用也继承了这一基础设施。

三大界面​

Shopify 暴露了用户交互的三个主要界面。理解这些对于知道你的代码在哪里运行至关重要。

1. 店面​

店面是顾客访问商家在线商店时看到的内容。它可以通过两种方式渲染：

Liquid 主题（Online Store 2.0）：默认方式。Shopify 的服务器使用 Liquid 模板语言渲染 HTML。主题是 Liquid 模板、CSS、JavaScript 和资源的集合。这是最常见的方式，绝大多数 Shopify 商店都在使用。

Hydrogen（无头模式）：一个基于 React 的框架，用于构建自定义店面。Hydrogen 使用 Storefront API 获取数据，可以部署在 Shopify 的 Oxygen 托管平台或任何 Node.js 主机上。适用于需要完全设计自由的品牌。

2. 管理后台​

Shopify Admin 是商家的后台办公室 -- 他们在这里管理产品、订单、客户、设置和已安装的应用。作为应用开发者，你的应用使用 App Bridge 嵌入到 Admin 中运行。

Admin 的关键概念：

  • App Bridge：一个 JavaScript 库，让你的嵌入式应用与 Shopify Admin 通信（导航、弹窗、通知消息、资源选择器）
  • Polaris：Shopify 的 React 组件库，用于构建看起来原生的 Admin UI
  • Admin API：GraphQL 和 REST API，让你的应用读写店铺数据
  • Admin 扩展：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 格式定义，指定要渲染哪些 Section 及其顺序。商家可以添加、删除和重新排列 Section，无需编辑代码。
  • Section 无处不在：Section 是可复用、可配置的内容块。在 OS2.0 中，Section 适用于每种页面类型，不仅仅是首页。
  • Block：Section 包含 Block -- 商家可以在 Section 内添加和重新排列的更小内容单元。
  • Metafields：附加到产品、集合、订单和其他资源的自定义数据字段。OS2.0 使 Metafields 在主题编辑器中可访问。
  • App Block：应用可以注册主题 Block，商家可以使用编辑器将其拖放到主题中。

Hydrogen 和 Oxygen​

对于需要完全控制其店面的商家，Shopify 提供了无头商务解决方案。

Hydrogen​

Hydrogen 是一个基于 Remix 的 React 框架，专为 Shopify 店面设计。它提供：

  • Shopify 专用的 Hooks 和组件，用于产品、集合、购物车和客户账户
  • Storefront API 集成，内置缓存和乐观更新
  • SEO 工具，用于管理 meta 标签、站点地图和结构化数据
  • Streaming SSR，实现快速的首次页面加载
  • 入门模板，开箱即用提供完整的店面

Oxygen​

Oxygen 是 Shopify 为 Hydrogen 店面提供的托管平台。主要优势：

  • 全球边缘部署 -- 你的店面在全球范围内靠近客户运行
  • 自动扩展 -- 无需配置即可处理流量高峰
  • 基于 Git 的部署 -- 推送到 main 分支，Oxygen 自动部署
  • 环境变量 -- 安全管理密钥
  • 预览部署 -- 每个分支都有一个预览 URL
何时使用 Hydrogen vs Liquid

使用 Liquid 主题 当：商家需要标准的电商体验、想使用主题编辑器、且没有开发团队进行持续维护。

使用 Hydrogen 当：品牌需要完全自定义的设计、需要类应用的交互性、需要整合非 Shopify 数据源、或拥有偏好 React 的开发团队。

对于大多数商店来说，Liquid 主题是正确的选择。Hydrogen 适用于高端品牌、市场平台和复杂的多数据源店面。

Shopify Functions 运行时​

Shopify Functions 是平台架构中最新的重要组成部分。它们是轻量级的沙盒程序，运行在 Shopify 的基础设施上以自定义核心商务逻辑。

Functions 如何工作​

  1. 扩展目标：你选择要自定义商务流程的哪个部分（折扣、运费、支付方式、购物车转换、订单路由等）
  2. 输入查询：你编写 GraphQL 查询，定义你的 Function 需要什么数据（购物车内容、客户信息、metafields 等）
  3. Function 逻辑：你用 JavaScript 或 Rust 编写自定义逻辑。代码编译为 WebAssembly（Wasm）。
  4. 输出：你的 Function 返回 Shopify 应用到结账的结构化响应。

Functions 在 5 毫秒内执行，有严格的内存限制。它们被设计为快速且安全 -- 无法发出网络请求、访问文件系统或执行 I/O。所有数据都通过输入查询传入。

Scripts 到 Functions 的迁移

如果你正在维护 Shopify Scripts（基于 Ruby 的结账自定义），请注意 Scripts 已弃用，将于 2026 年 6 月移除。所有 Scripts 必须迁移到 Functions。我们在 Shopify Functions 课程中详细介绍了迁移过程。

一切如何连接​

以下是平台组件之间关系的完整图景：

核心要点​

理解平台架构为你作为 Shopify 开发者的每一个决策提供了心智模型：

  • 多租户意味着你扩展平台，而非控制基础设施
  • 三大界面（店面、Admin、结账）各有不同的扩展机制
  • Online Store 2.0 提供灵活的、商家可编辑的主题，包含 Section 和 Block
  • Hydrogen + Oxygen 为需要完全控制的品牌提供无头店面
  • Shopify Functions 在快速、沙盒化的运行时中自定义商务逻辑

在下一节课中，我们将全面了解 Shopify API 的全貌，学习如何为每个任务选择正确的 API。