Nginx 如何配置指向带有哈希值的 index.html 文件？

nginx 正确处理带哈希值的 React 应用 index.html 文件

React 应用构建后，index.html 文件通常包含一个哈希值，例如 index.a1b2c3d4.html。 标准的 Nginx 配置无法直接处理这种情况。本文介绍如何使用 Nginx 配置，优雅地处理这些带哈希值的 index 文件。

通常，我们会看到这样的 Nginx 配置：

location / {     root   /path/to/your/app;     index  index.html;     try_files $uri $uri/ /index.html; }

但这对于 index.a1b2c3d4.html 这样的文件无效。我们需要用到正则表达式和命名 location。

改进后的 Nginx 配置如下：

立即学习“前端免费学习笔记（深入）”；

server {     listen 80;     server_name your_domain.com; # 替换为你的域名      location / {         root /path/to/your/app; # 替换为你的应用根目录         index index.html;         try_files $uri $uri/ @hashed;     }      location @hashed {         rewrite ^/(.*)$ /$1/index.[0-9a-zA-Z]+.html break;         try_files $uri =404;     } }

这段配置做了以下改进：

• try_files $uri $uri/ @hashed;: 首先尝试查找请求的 URI。如果找不到，则跳转到名为 @hashed 的 location。
• location @hashed: 这是一个命名 location，用于处理哈希值。
• *`rewrite ^/(.)$ /$1/index.[0-9a-zA-Z]+.html break;**: 使用正则表达式index.[0-9a-zA-Z]+.html匹配所有以index.开头，后跟任意字母数字组合，最后以.html结尾的文件。break` 指令阻止后续的处理。
• try_files $uri =404;: 如果仍然找不到文件，返回 404 错误。

通过这个配置，Nginx 将正确地将所有请求路由到正确的 index.html 文件，无论其是否包含哈希值。 记得将 /path/to/your/app 和 your_domain.com 替换成你的实际路径和域名。