边缘安全加速平台 EO WooCommerce 集成

本文主要介绍如何基于 WordPress 平台，将 WooCommerce 与 Gatsby 框架结合，构建高性能的电商网站。在这个架构中，WordPress 作为内容管理系统的核心，WooCommerce 提供电商功能，Gatsby 负责性能优化。通过这种组合，您可以同时获得 WordPress 的内容管理能力、WooCommerce 的电商功能以及Gatsby 的性能优势，为您的客户提供更好的购物体验。本文将详细介绍如何实现 WordPress + WooCommerce 与 Gatsby 的集成，以及如何通过 EdgeOne Pages进行部署和加速。
快速入门
EdgeOne提供了完整的 WordPress + WooCommerce + Gatsby 集成方案，您只需要下载并配置数据库即可快速部署：
﻿WordPress + WooCommerce 后端﻿
﻿Gatsby 前端模板﻿
下载这两个模板并按照说明部署，即可快速搭建电商网站。
WooCommerce 集成主要包含以下三个步骤：配置 WordPress 和 WooCommerce、使用 Gatsby 生成静态页面、部署到 EdgeOne Pages。您可以按照下文的步骤手动配置。
配置 WordPress 和 WooCommerce
您可以通过以下两种方式配置 WordPress 和 WooCommerce：
方式一：自行部署 WordPress（本文推荐的方式）
EdgeOne 提供了一个预配置好的 WordPress + WooCommerce Docker 模板，让您能够快速完成自行部署。这个模板已经集成了 MySQL 数据库和配置好的WooCommerce，并且预装了以下必要的插件：
Advanced Custom Fields - 用于自定义字段管理。
WooCommerce - 电商功能核心。
JWT Authentication for WP-API - REST API 认证。
WPGraphQL - GraphQL API 支持。
WPGraphQL for ACF - ACF 的 GraphQL 支持。
WPGraphQL for WooCommerce (WooGraphQL) - WooCommerce的GraphQL 支持。
WPGraphQL JWT Authentication - GraphQL API 认证。
首先，克隆项目到本地：
git clone https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
cd wp-ecommerce-docker-demo
如果您需要在部署机器上进行本地验证，需要在项目根目录创建 .env 文件并配置以下环境变量：
# 数据库配置
WORDPRESS_DB_PASSWORD=wordpress123
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_PASSWORD=wordpress123
﻿
# GraphQL认证配置
GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key
﻿
# 站点配置
WP_HOME_URL=http://localhost  # 替换为您的站点URL
WP_DOMAIN=localhost           # 替换为您的站点域名
WP_HOST=80                    # 替换为您的站点端口
配置完成后，使用 Docker 启动项目：
docker-compose up -d
服务启动完成后，您可以通过访问 http://your.site.ip/wp-admin/admin.php 进入 WordPress 管理界面。
注意：
此模板已预装 MySQL 数据库和配置好的 WooCommerce，无需额外配置。首次登录后请及时修改默认密码。
核心
在 WordPress 后台，您需要创建以下三个页面：
highlight - 用于展示特色产品。
promotion - 用于展示促销活动。
sample-page - 用于展示示例内容。
﻿
﻿
﻿
创建页面后，需要配置 Advanced Custom Fields：
进入 WordPress 后台的“自定义字段”菜单。
单击“Tools”标签。
在“Import Field Groups”部分，选择并上传acf-export-2025-02-13.json文件（该文件位于 wp-ecommerce-docker-demo 模板项目的wordpress-data目录下）。
﻿
﻿
﻿
1. 单击Import完成导入。
2. 导入完成后，进入“Field Groups”标签。
3. 将导入的字段组与对应的页面类型进行关联配置。
﻿
﻿
﻿
完成 ACF 配置后，您需要将 Field Group 配置到相应的页面上，我们按名称对应即可，这样页面才能使用这些自定义字段。
接下来，让我们配置 WooCommerce 的商品数据。登录 WordPress 管理界面后，点击左侧菜单的“WooCommerce”，进入 WooCommerce 管理控制台。在这里，您可以看到所有需要配置的数据项：
﻿
﻿
﻿
由于我们使用 WordPress 主要是为了提供数据接口，而前端页面将通过 Gatsby 项目来实现，因此您可以跳过“Customize your store”（自定义商店）的配置。请重点关注产品、订单、支付等基础功能的配置。如果您对 WooCommerce的 具体配置有疑问，可以参见 WooCommerce 官方文档。
这里我们不对数据配置的具体细节作详细说明，您可以根据自己的需求在 WooCommerce 管理界面中进行配置。
数据验证
配置完成后，我们需要验证 WordPress 和 WooCommerce 的 API 是否能正常提供数据。由于我们已经安装了 WPGraphQL 和 WooGraphQL 插件，这里使用GraphQL 方式进行数据验证。
1. WordPress 数据验证
query GetPages {
  pages(first: 1) {
    nodes {
      id
      title
      content
      acf {
        hero_title
        hero_description
        featured_products
      }
    }
  }
}
示例返回数据：
{
  "data": {
    "pages": {
      "nodes": [
        {
          "id": "cGFnZS8x",
          "title": "Highlight",
          "content": "页面内容...",
          "acf": {
            "hero_title": "Welcome to Our Store",
            "hero_description": "Discover our featured products",
            "featured_products": [1, 2, 3]
          }
        }
      ]
    }
  }
}
2. WooCommerce 数据验证
query GetProducts {
  products(first: 1) {
    nodes {
      id
      name
      type
      status
      price
      regularPrice
      salePrice
      description
      images {
        nodes {
          id
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          id
          name
          slug
        }
      }
    }
  }
}
示例返回数据：
{
  "data": {
    "products": {
      "nodes": [
        {
          "id": "cHJvZHVjdC8x",
          "name": "Premium Headphones",
          "type": "SIMPLE",
          "status": "PUBLISH",
          "price": "199.99",
          "regularPrice": "249.99",
          "salePrice": "199.99",
          "description": "High-quality wireless headphones with noise cancellation.",
          "images": {
            "nodes": [
              {
                "id": "cG9zdC8y",
                "sourceUrl": "https://your-store.com/wp-content/uploads/headphones.jpg",
                "altText": "Premium Headphones"
              }
            ]
          },
          "categories": {
            "nodes": [
              {
                "id": "Y2F0ZWdvcnkvMQ==",
                "name": "Electronics",
                "slug": "electronics"
              }
            ]
          }
        }
      ]
    }
  }
}
您可以通过访问 http://your-wordpress-url/graphql 来测试 GraphQL 接口。如果能够正常获取上述示例中的数据，说明 GraphQL 接口配置正确，可以提供给外部访问。
方式二：使用 WordPress.com 官方托管（新手使用）
访问 WordPress.com，注册并创建新站点。
在站点管理后台，进入“插件” > “安装插件”。
搜索并安装“方式一”在 WordPress 安装的所有插件。
无论是托管部署还是自己部署，WordPress 作为无头 CMS 时的配置流程基本类似，都是用来管理内容并提供 API 接口，我们只需要参考上面的“方式一”的配置即可。另外，虽然托管部署省去了服务器维护和环境搭建，但现在各大云服务对 WordPress 支持很好，自己部署其实也很方便。
支付回调配置
在开始生成静态文件之前，我们需要特别说明一下支付回调的配置。这是因为我们的前端是使用 Gatsby 生成的静态网站，而支付流程需要实时处理支付状态更新。WooCommerce 支持 Stripe、PayPal、Square 等国际支付网关，您只需要在 WooCommerce 后台配置相应的支付方式，设置必要的 API 参数和回调地址即可。
﻿
﻿
﻿
对于前端查询支付状态，WooCommerce 提供了 REST API、GraphQL 和 Webhook 三种方式。由于 EdgeOne 提供的 Gatsby 模板使用 GraphQL 进行数据查询，这里以 GraphQL 方式为例：
query GetOrderStatus($id: ID!) {
  order(id: $id) {
    status
    paymentMethod
    datePaid
  }
}
查询结果示例：
{
  "data": {
    "order": {
      "status": "completed",
      "paymentMethod": "paypal",
      "datePaid": "2024-03-20T10:30:00"
    }
  }
}
如果您需要了解更多 GraphQL 查询的细节，可以参考 WPGraphQL 文档 和 WooGraphQL 文档。
生成静态文件
EdgeOne 提供了基于 Gatsby 的静态站点模板，您可以通过以下命令获取：
git clone --depth 1 --single-branch https://github.com/TencentEdgeOne/pages-templates.git temp
mv temp/examples/gatsby-woocommerce-template .
rm -rf temp
cd gatsby-woocommerce-template
npm install
现在我来介绍一下项目中的关键配置点。
所有的 GraphQL 查询语句都位于src/queries/PagesQuery.js文件中，包括商品、订单、页面内容和 ACF 字段等查询。如果您需要自定义查询内容，可以在这里修改 GraphQL 查询语句。
﻿
支付相关的组件位于src/components/OrderSummary/OrderSummary.js文件中。在调用支付时，会配置以下关键信息：
await checkout({
  shipping: customer.shipping,
  billing: customer.billing,
  paymentMethod: 'cod',
});
这里配置了：
收货地址信息（shipping）。
账单地址信息（billing）。
支付方式（paymentMethod）。
这个支付请求会调用src/api/api.js文件中的 checkout 对象，执行具体的支付操作。最终的 GraphQL 查询语句位于functions/common/queries/Checkout.js文件中，如果您需要修改支付逻辑，可以在这里进行更改。
﻿
如果您需要修改其他信息的接口交互，可以修改functions/common/queries目录下的其他文件中的 GraphQL 语句。
了解了项目的基本结构和关键配置后，让我们来看看如何启动项目。模板的启动非常简单，您只需要设置WP_URL参数指向您的WordPress站点地址即可。在部署到云端时，这个参数会作为环境变量配置。现在让我们先在本地验证项目。
在项目根目录创建 .env 文件，填入以下内容：
WP_URL=http://your-wordpress-url
GATSBY_ENV=dev
然后安装依赖并启动 Gatsby 项目，进入本地预览：
npm install
gatsby develop && edgeone pages dev --fePort=8000
﻿
至此，我们已经完成了 WordPress + WooCommerce 内容管理系统的配置、前端模板的获取和本地环境的验证。接下来，我们只需要将代码部署到 EdgeOne Pages，就可以让您的网站正式上线了。
部署到 EdgeOne Pages
1. 代码发布到 Git
将代码提交到 git 仓库即可完成部署。假设您已经创建了 gatsby-woocommerce-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .
git commit -m "Initial commit"
git push origin main
2. 项目导入 Pages
提交完成后，如果您已经是 EdgeOne Pages 用户且已关联 GitHub 账户，访问 控制台 部署对应的项目即可。
﻿
3. 添加环境变量
点击 gatsby-woocommerce-template 后，在准备部署界面点击“环境变量”，分别配置以下环境变量：
WP_URL：填入您的WordPress站点地址。
GATSBY_ENV：设置为 production。
﻿
配置完成后，单击立即创建，等待部署完成后将显示部署成功界面：
﻿
至此，我们已经完成了 WordPress + WooCommerce 方案的完整部署流程。通过这个方案，您可以：
使用 WordPress + WooCommerce 管理内容和商品，享受其强大的 CMS 和电商功能。
利用 Gatsby 生成高性能页面，提升访问速度。
通过 EdgeOne Pages 实现自动化部署，简化运维工作。
获得全球 CDN 加速，提升用户体验。
更多相关内容
查看更多WordPress集成方案：EdgeOne Pages 提供的 WooCommerce 模板。
了解Gatsby更多功能：Gatsby 官方文档。
探索WooCommerce更多功能：WooCommerce 官方文档。
自定义网站样式：Gatsby 样式指南。
WooCommerce 集成

本页目录：

快速入门

配置 WordPress 和 WooCommerce

方式一：自行部署 WordPress（本文推荐的方式）

核心

数据验证

方式二：使用 WordPress.com 官方托管（新手使用）

支付回调配置

生成静态文件

部署到 EdgeOne Pages

1. 代码发布到 Git

2. 项目导入 Pages

3. 添加环境变量

更多相关内容
