编年史家的茶会
RSS

如何在本地部署一个headless WordPress？ (April 7, 2025)

参考方案：Crash Course: Build a Simple Headless WordPress App with Next.js & WPGraphQL – Builders

1. 本地部署 wordpress

在本地部署好 wordpress，详情参考点两下鼠标完成建站：WordPress 本地建站 – 编年史家的茶会。

设置固定链接

跳转至 wp 后端，设置固定链接。

image.png

如果设置为其他的固定链接，后续有些地方不能按教程来，需要自己改一下。

本文后续默认已经选中了 postname，所以这一项必须要加上去。

安装 WPGraphQL 并启用调试模式

安装 WPGraphQL 插件，启用后打开 GraphQL > Settings 菜单并选中标有 Enable GraphQL Debug Mode 的选项，然后单击 Save Changes 。

搜不到就搜这个 WPGraphQL – WordPress 插件 | WordPress.org China 简体中文

image.png

导入测试内容

如果是新创建的网站，可以通过导入测试内容来作为占位符。

2. 让 Next. Js 应用在本地运行

这里基于速成课程的 GitHub 存储库中的文件。

该存储库主要基于使用 create-next-app CLI 工具创建的默认 Next.js 模板 ，以及 WP Engine DevRel 团队提供的一些额外的脚手架和样式。

要将存储库克隆到本地机器，您可以运行以下命令：git clone https://github.com/JEverhart383/crash-course-headless-wp-next-wpgraphql.git

如果不知道这个干嘛用的话可以先去看一下 git 的基础教程，1-2 h 就可以开始用了。

项目完成克隆后，运行以下命令切换到该目录并使用 npm 安装项目的所有依赖项。依赖项下载完成后，您可以使用 npm run dev 在浏览器中运行该项目。

cd crash-course-headless-wp-next-wpgraphql 
npm install 
npm run dev

当应用程序在本地运行时，您应该能够在浏览器中通过 http://localhost:3000 查看该应用程序，并且该应用程序将随着项目目录中文件的更改而重新编译和更新。

此时所有帖子都是来自本地 JSON 文件的虚拟数据，你能在 http://localhost:3000 中看到的就是你要制作的前端页面。

下一步，我们将 Apollo Client 连接到 WordPress 和 WPGraphQL，以显示您网站的实际帖子数据。

3. 使用 Apollo Client 连接到 WordPress

使用来自您的 WordPress 网站的数据替换我们的模拟帖子数据的第一步是配置 Apollo Client 以通过 WPGraphQL 与您的网站一起使用。

虽然从技术上讲，你可以仅使用 Fetch API 将查询直接 POST 到 GraphQL 服务器，但使用 Apollo Client 之类的 GraphQL 客户端还有很多额外的好处 ，这些好处超出了本文的讨论范围。以下许多步骤也包含在 Apollo Client 文档的入门页面上，因此，如果你有兴趣了解有关该库的更多信息，请务必参考该页面。

创建 .env 文件

要开始此过程，我们要做的第一件事是通过环境变量将 WordPress 站点的 URL 提供给我们的应用程序。默认情况下，Next.js 将在项目的根目录中查找名为 .env.local 的文件来加载任何环境变量 。

初始的根目录如下：

初始的根目录

在这创建一个名为 .env.local 的文件。

注意：它的后缀就是 local。 图中闪电黑底图标的文件是因为我的记事本默认用了 sublime text 这个软件，换个记事本软件阅读不会有什么影响，请无视。

image.png

用记事本或者其他相同的功能的软件打开文件并粘贴以下行，将“ https://headlesswp.local ”替换为您的 WordPress 网站的 URL。

NEXT_PUBLIC_WORDPRESS_API_URL=https://headlesswp.local

通过添加此环境变量，您可以通过 process.env 对象在应用程序中访问其值。

在更改环境变量时，最好停止并启动本地开发服务器，因为它们通常仅在应用程序启动时加载。不过您可以通过按 ctrl + c ，然后再次运行 npm run dev 来重启本地开发服务器来应用改变~。

此时打开你应该看到的是一片空白。

配置 Apollo 客户端

现在我们的 Next.js 应用程序可以访问我们的 WordPress 网站的 URL，我们可以创建用于请求数据的 Apollo Client 实例。

此时已经通过 WordPress 暴露了 GraphQL 接口（通过 https://你的域名/graphql）。Apollo Client 就是前端用于访问这个接口、发送查询请求的工具。 现在要做的就是配置这个工具。

image.png

在空白的 /lib/apollo.js 文件中，添加以下代码：

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
 uri: `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/graphql`,
 cache: new InMemoryCache(),
});

这里的第一行代码从 @apollo/client 包导入 ApolloClient 和 InMemoryCache 。

  • ApolloClient：Apollo 提供的客户端构造器，用来配置访问服务器的方式。
  • InMemoryCache: Apollo 默认的缓存策略。它会缓存你之前请求的数据，避免重复发送请求，加快页面速度。

然后，我们在下面创建一个新的 ApolloClient 实例并将其导出为名为 client 的变量。

当我们创建新客户端时，我们传入一个具有 uri 和 cache 属性的配置对象。uri 属性应将 uri 客户端指向服务器的 /graphql 端点，并将 cache 属性分配给新的 InMemoryCache 实例。Apollo Client 的缓存功能通过将查询结果存储在内存中来帮助加快应用程序的速度。

  • uri: 你的 GraphQL 服务器地址，也就是 WordPress 后端 /graphql 接口。
    • 用了环境变量：process.env.NEXT_PUBLIC_WORDPRESS_API_URL，这样更灵活，方便在本地/线上用不同的地址。

评论

暂无评论，快来抢沙发吧！

发表评论