如何在Node+Express项目中同时运行Wordpress（站点部署于Heroku）

方案一：Express代理转发WordPress请求（零迁移成本，推荐Heroku场景使用） #

该方案无需将WordPress嵌入Express项目，通过路径代理实现/blog路径映射，原生保留WordPress所有页面的元数据，完全符合SEO要求。

• 先将WordPress独立部署到Heroku的另一个dyno，后台设置站点地址为你的主站域名加/blog（如https://oursite.com/blog），WordPress自身的访问地址可直接使用Heroku分配的二级域名。
• 在Express项目中安装代理依赖：npm install http-proxy-middleware
• 在Express入口文件（一般为app.js/index.js）中添加代理配置，注意要放在所有自定义路由前面：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/blog', createProxyMiddleware({
  target: 'https://你部署WordPress的Heroku二级域名',
  changeOrigin: true,
  pathRewrite: {
    '^/blog': '', // 若WordPress根路径无/blog前缀则保留该配置
  },
  cookieDomainRewrite: 'oursite.com' // 解决WordPress登录态跨域问题
}));

方案二：服务端拉取WordPress API渲染EJS模板（无需额外部署WordPress dyno时使用） #

该方案复用现有Express的EJS渲染逻辑，服务端拉取WordPress数据后直接注入模板，确保页面源码包含完整元数据。

• 开启WordPress自带的REST API功能，无需依赖之前的Strapi接口。
• 在Express中定义/blog相关路由，服务端发起请求拉取对应页面的WordPress数据，将元数据直接传递给EJS模板：

// 博客列表页路由
app.get('/blog', async (req, res) => {
  const postRes = await fetch('https://你的WordPress访问地址/wp-json/wp/v2/posts');
  const posts = await postRes.json();
  // 注入元数据到EJS模板
  res.render('blog/list', {
    title: '官方博客 - 站点名称',
    description: '博客页面的自定义描述内容',
    posts
  });
});

// 文章详情页路由
app.get('/blog/:slug', async (req, res) => {
  const postRes = await fetch(`https://你的WordPress访问地址/wp-json/wp/v2/posts?slug=${req.params.slug}`);
  const post = (await postRes.json())[0];
  // 注入文章专属元数据到EJS模板
  res.render('blog/detail', {
    title: `${post.title.rendered} - 站点名称`,
    description: post.excerpt.rendered.replace(/<[^>]+>/g, ''),
    post
  });
});

• 在EJS模板的head标签中直接输出对应的元数据变量，即可保证爬虫抓取到完整的页面源码内容。

Heroku环境适配注意事项 #

• 若使用方案一，需要在WordPress的wp-config.php中添加如下配置，识别代理传递的HTTPS协议，避免静态资源加载错误：

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['SERVER_PORT'] = 443;
}

• 若使用方案二，建议对WordPress API请求结果做内存缓存，减少重复请求的性能消耗，降低Heroku dyno负载。

内容的提问来源于stack exchange，提问作者Alpesh Trivedi