如何用单个Nginx location块处理任意/blog/路径的静态HTML文件

你可以通过正则匹配location结合捕获组变量实现统一配置，不用再为每个子路径单独编写location块，具体配置如下：

location ~ ^/blog/([^/]+)$ {
    try_files $uri /static/html/blog/$1.html;
}

配置说明： #

• ~ ^/blog/([^/]+)$：这是正则匹配的location规则，~表示启用正则匹配，^/blog/匹配以/blog/开头的路径，([^/]+)是捕获组，专门匹配/blog/后不带斜杠的子路径名称（比如fn1、blog1），$限制路径结束，确保只匹配/blog/xxx这类单个层级的路径。
• $1：对应捕获组匹配到的子路径内容，比如访问/blog/blog2时，$1就是blog2，会自动指向/static/html/blog/blog2.html。

扩展适配： #

如果需要支持路径结尾带斜杠的场景（比如/blog/blog1/），可以调整正则规则：

location ~ ^/blog/([^/]+)/?$ {
    try_files $uri /static/html/blog/$1.html;
}

/?表示斜杠可选，这样无论访问/blog/blog1还是/blog/blog1/，都会匹配到对应的HTML文件。

注意事项： #

• Nginx的正则location优先级高于前缀location，这个配置会优先匹配符合规则的/blog/xxx路径，不会和其他前缀location冲突（如果存在的话）。
• 如果你的React应用需要处理更深层级的路由（比如/blog/blog1/post/1），可能需要结合try_files $uri $uri/ /static/html/blog/blog1.html;的逻辑，但根据当前场景，上面的配置已经能覆盖单个子路径的需求。

内容的提问来源于stack exchange，提问作者David Long