How to configure Nginx to point to index.html file with hash value?

Nginx correctly handles React application index.html files with hash values

After the React application is built, the index.html file usually contains a hash value, such as index.a1b2c3d4.html . The standard Nginx configuration cannot handle this situation directly. This article describes how to use Nginx configuration to gracefully handle these hashed index files.

Usually, we will see Nginx configuration like this:

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

But this is invalid for files like index.a1b2c3d4.html . We need to use regular expressions and naming locations.

The improved Nginx configuration is as follows:

 server {
    listen 80;
    server_name your_domain.com; # Replace with your domain location / {
        root /path/to/your/app; # Replace with your application root directory index index.html;
        try_files $uri $uri/ @hashed;
    }

    location @hashed {
        rewrite ^/(.*)$ /$1/index\.[0-9a-zA-Z] \.html break;
        try_files $uri =404;
    }
}

This configuration has been improved as follows:

• try_files $uri $uri/ @hashed; : First try to find the requested URI. If not found, jump to the location named @hashed .
• location @hashed : This is a named location that handles hash values.
• * `rewrite ^/(. )$ /$1/index.[0-9a-zA-Z] .html break; **: 使用正则表达式index.[0-9a-zA-Z] .html匹配所有以files that开头，后跟任意字母数字组合，最后以结尾的文件。 The break` directive prevents subsequent processing.
• try_files $uri =404; : If the file is still not found, a 404 error will be returned.

With this configuration, Nginx will correctly route all requests to the correct index.html file, regardless of whether it contains a hash value or not. Remember to replace /path/to/your/app and your_domain.com with your actual path and domain name.

The above is the detailed content of How to configure Nginx to point to index.html file with hash value?. For more information, please follow other related articles on the PHP Chinese website!