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 替换成你的实际路径和域名。

以上就是nginx 如何配置指向带有哈希值的 index.html 文件？的详细内容，更多请关注代码网其它相关文章！