如何通过Nginx在每次请求响应前修改build目录下的index.html文件

你可以通过Nginx默认集成的sub_filter模块实现该需求，核心思路是先给React的index.html插入OG标签占位符，再通过Nginx匹配不同请求路径，动态替换占位符为对应OG内容，具体操作步骤如下：

步骤1：给index.html添加占位符 #

修改React项目public/index.html文件，在head标签内插入专属占位注释，方便后续Nginx识别替换：

<head>
  <!-- ##OG_PLACEHOLDER## -->
  <meta charset="utf-8">
  <!-- 其他原有meta、link、title标签保持不变 -->
</head>

修改完成后正常执行npm run build打包项目即可，占位符会保留在构建后的index.html中。

步骤2：配置Nginx路径与OG标签映射规则 #

在Nginx的http配置块内新增map指令，根据你的业务路由配置不同路径对应的OG标签内容：

http {
  # 其他原有http块配置（如日志格式、gzip配置等）保持不变
  map $request_uri $og_tags {
    # 首页OG配置
    ~^/$ '<meta property="og:title" content="站点首页"><meta property="og:description" content="站点首页描述"><meta property="og:image" content="https://你的域名/home_cover.jpg">';
    # 商品详情页OG配置，匹配/product/xxx路径，可捕获路径参数插入内容
    ~^/product/(.*) '<meta property="og:title" content="商品$1详情"><meta property="og:description" content="商品专属描述"><meta property="og:image" content="https://你的域名/product_$1.jpg">';
    # 文章详情页OG配置，匹配/article/xxx路径
    ~^/article/.* '<meta property="og:title" content="技术文章"><meta property="og:description" content="优质技术内容分享"><meta property="og:image" content="https://你的域名/article_cover.jpg">';
    # 所有其他路径的默认OG配置
    default '<meta property="og:title" content="默认站点标题"><meta property="og:description" content="默认站点描述"><meta property="og:image" content="https://你的域名/default_cover.jpg">';
  }
}

你可以根据自己的业务路由规则新增任意匹配项，支持正则捕获路径参数动态生成OG内容。

步骤3：配置站点server块替换规则 #

在你对应站点的server配置块内，添加sub_filter替换逻辑，同时保留SPA路由的fallback规则：

server {
  listen 80;
  server_name 你的站点域名;
  root /你的React项目build文件夹绝对路径;
  index index.html;

  # 静态资源直接返回，不做替换处理
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 所有页面请求匹配逻辑
  location / {
    try_files $uri $uri/ /index.html;
    # 替换占位符为对应OG标签
    sub_filter '<!-- ##OG_PLACEHOLDER## -->' $og_tags;
    # 仅替换一次即可
    sub_filter_once on;
    # 仅对HTML内容生效
    sub_filter_types text/html;
    # 禁用请求压缩，否则无法识别替换内容
    proxy_set_header Accept-Encoding '';
  }
}

步骤4：验证配置生效 #

• 执行nginx -t检查配置语法是否正确，无报错后执行nginx -s reload重载配置
• 用curl命令访问不同路径验证替换结果，例如执行curl https://你的域名/product/123，查看返回的HTML内容中head标签内是否已插入对应商品的OG标签

注意事项 #

• 绝大多数通过apt/yum/云服务商镜像安装的Nginx默认已编译sub_filter模块，如果你使用的自定义编译版本未集成该模块，重新编译时添加--with-http_sub_module参数即可
• 如果需要实现更复杂的动态OG内容（例如从后端接口拉取商品/文章信息生成OG标签），可以搭配Nginx的lua模块扩展实现，上述静态配置方案已覆盖90%以上常规业务场景

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