如何通过Nginx配置禁止特定环境下/static目录的*.map文件访问

解决方案思路 #

通过Nginx的域名匹配结合路径拦截规则，精准限制stage.*、app.*（排除dev.*）域名下，/static目录中所有.map文件的访问权限。推荐使用独立server块的方式，避免if指令带来的潜在性能问题。

完整配置示例 #

server {
    listen 80;
    # 正则匹配：仅匹配以stage.或app.开头、且不以dev.开头的域名
    server_name ~^(?!dev\.)(stage|app)\..*;

    # 指向React构建产物的根目录
    root /usr/share/nginx/html;
    index index.html;

    # 拦截/static目录下所有.map文件请求，返回403禁止访问
    location ~* ^/static/.*\.map$ {
        deny all;
        return 403; # 可根据需求替换为return 404;
    }

    # React SPA路由处理：适配前端路由跳转
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置细节说明 #

1. 域名匹配规则：
   ~^(?!dev\.)(stage|app)\..* 是Nginx支持的正则表达式，其中：

   • ^ 匹配域名开头
   • (?!dev\.) 负向预查，排除以dev.开头的域名
   • (stage|app)\. 匹配以stage.或app.开头的域名
   • .* 匹配域名后续任意字符

2. 路径拦截规则：
   location ~* ^/static/.*\.map$ 不区分大小写匹配所有/static路径下的.map文件，deny all直接禁止所有访问，返回403 Forbidden（若不想暴露文件存在，可改为return 404;）。

3. SPA路由适配：
   location / 块中的try_files指令确保React单页应用的前端路由能正确跳转，避免刷新页面出现404。

配置验证与生效 #

1. 检查配置语法是否正确：

   nginx -t
   

2. 重新加载Nginx使配置生效：

   nginx -s reload
   

内容的提问来源于stack exchange，提问作者Ronny Efronny