如何在Apache/htaccess中为React/Next.js映射子目录到虚拟主机

问题背景 #

• 基于React/Next.js搭建的站点（域名：www.example.com），因数百张图片数量过多，未放入项目public文件夹，而是托管到独立子域assets.example.com，页面图片链接均为http://assets.example.com/picture1.jpg形式
• Google将assets子域与www主域判定为不同域名，导致SEO受到负面影响
• 核心需求：让图片从主域调用（如http://www.example.com/picture1.jpg），但实际内部从子域或其他路径获取资源，且不降低图片加载速度

尝试过的方案（未达标） #

• URL重写：尝试后未达到预期效果
• API调用图片：会显著降低加载速度，不适用于产品目录类多图片场景

补充需求 #

能否实现www.example.com/foo内部指向foo.example.com，但用户地址栏仍显示www.example.com/foo？

可行解决方案 #

通过Apache的反向代理配置即可实现，具体VirtualHost配置如下：

<Virtualhost *:443>
  ServerName example.com
  ...
  <Location "/foo/">
    ProxyPass "https://foo.example.com/"
  </Location>
  ...
</Virtualhost>

该配置可将所有对www.example.com/foo/路径的请求，内部转发到https://foo.example.com/，用户地址栏不会发生变化，既满足主域调用资源的SEO需求，又不会影响图片加载速度。

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