我要评论
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 文件？的详细内容，更多请关注代码网其它相关文章！
发表评论