如何为Nginx各location块配置静态HTML文件？访问时遇404问题

我的问题场景 #

我最近在配置Nginx，想要给每个声明的location块指定对应目录下的index.html文件，初始配置如下：

location / {
    root /usr/src/seo/homepage;
}
location ~ /mypage {
    root /usr/src/seo/mypage;
}
location ~ /mypage2 {
    root /usr/src/seo/mypage2;
}

每个指定的文件夹里都有各自的index.html，但访问/mypage和/mypage2时Nginx总是返回404，我希望能正确渲染对应页面。

问题原因排查 #

折腾了一会儿才发现，问题出在Nginx的root指令匹配逻辑上：
当使用root时，Nginx会把请求的完整URI直接拼接到root指定的路径后面。比如访问/mypage时，Nginx实际会去查找/usr/src/seo/mypage/mypage这个路径下的文件，但我的index.html明明在/usr/src/seo/mypage/根目录，自然找不到就返回404了。

解决方案 #

我尝试了两种方法都能解决问题，分享给大家：

方案一：用alias替代root（更推荐）

alias指令会直接将请求的URI替换成指定的目录路径，不会做URI拼接，刚好适配我的场景：

location / {
    root /usr/src/seo/homepage;
    index index.html; # 显式声明index文件，避免全局配置变动影响
}
location ~ /mypage {
    alias /usr/src/seo/mypage;
    index index.html;
}
location ~ /mypage2 {
    alias /usr/src/seo/mypage2;
    index index.html;
}

配置完重启Nginx后，访问/mypage就直接指向/usr/src/seo/mypage/index.html了，完美解决404。

方案二：调整root和location匹配规则

如果不想改指令，也可以调整root的路径和location的匹配范围：

location / {
    root /usr/src/seo/homepage;
    index index.html;
}
location ^~ /mypage/ {
    root /usr/src/seo; # 指向父目录，让URI拼接后得到正确路径
    index index.html;
}
location ^~ /mypage2/ {
    root /usr/src/seo;
    index index.html;
}

这里^~是为了让这个location优先匹配，避免被其他正则规则干扰。访问/mypage/时，Nginx会拼接成/usr/src/seo/mypage/index.html，刚好找到我的文件。

最终结果 #

我已经通过上述其中一种方法解决了问题，现在访问/mypage和/mypage2都能正常渲染对应的index.html页面了。

内容的提问来源于stack exchange，提问作者Dean Christian Armada