在Nginx中如何配置指向React項目中帶有哈希值的index.html文件？

nginx配置：處理React項目中帶有哈希值的index.html文件

React應用打包后，index.html文件名通常會包含哈希值，例如index.a1b2c3d4.html。本文介紹如何在Nginx中正確配置，以處理這些帶有哈希值的index.html文件。

問題：如何動態(tài)匹配哈希值？

傳統(tǒng)的Nginx配置，例如：

location / {     root   html/demo;     index  index.html;     try_files $uri $uri/ /index.html; }

無法直接處理index.a1b2c3d4.html這樣的文件名。

解決方案：使用Nginx正則表達式

以下Nginx配置使用正則表達式和try_files指令，優(yōu)雅地解決了這個問題：

立即學習“前端免費學習筆記（深入）”；

server {     listen 80;      location / {         root html/demo;         try_files $uri $uri/ @hashed;     }      location @hashed {         rewrite ^/(.*)$ /$1/index.[0-9a-f]+.html last;         try_files $uri =404;     } }

配置說明：

• location /: 處理所有請求。try_files首先嘗試尋找精確匹配的資源（$uri），然后嘗試尋找目錄（$uri/），如果都失敗，則跳轉(zhuǎn)到名為@hashed的location塊。

• location @hashed: 專門處理帶有哈希值的index.html文件。

  • *`rewrite ^/(.)$ /$1/index.[0-9a-f]+.html last;**: 這是關鍵部分。它使用正則表達式index.[0-9a-f]+.html匹配文件名。^/(.*)$捕獲除了index.a1b2c3d4.html以外的路徑，$1代表捕獲的路徑，然后將其與匹配的index文件名組合。last`標志表示繼續(xù)處理后續(xù)指令。

  • try_files $uri =404;: 嘗試查找重寫后的文件，如果找不到則返回404錯誤。

此配置能夠動態(tài)匹配各種帶有哈希值的index.html文件，例如index.a1b2c3d4.html, index.e5f6g7h8.html等，確保React應用能夠正確加載。 記住將html/demo替換為你的實際項目根目錄。