当前位置: 代码网 > 服务器>服务器>Linux > Nginx location静态文件映射配置过程

Nginx location静态文件映射配置过程

2025年12月02日 Linux 我要评论
遇到问题?以下这个nginx的配置,愿意为访问https://abc.com会指向一个动态网站,访问https://abc.com/tongsongzj时会访问静态网站,但是配置之后(注意看后面那个l

遇到问题?

以下这个nginx的配置,愿意为访问https://abc.com会指向一个动态网站,访问https://abc.com/tongsongzj时会访问静态网站,但是配置之后(注意看后面那个location /tongsongzj/静态文件映射的配置),此时不能通过https://abc.com/tongsongzj/index.html正确访问,显示报错信息如下:

问:这是为啥?需要如何修改?

已经确认前端代码在宿主机路径/opt/docker-data/nginx/h5下,且对应的docker中nginx容器真实路径为/usr/share/nginx/h5

nginx配置如下

# abc官网nginx配置
# 这里跳转到动态网站
server {
    listen 80;  # 监听80端口,用于http请求
#     listen 443 ssl;  # 监听443端口,用于https请求,并启用ssl
    listen 443 ssl http2;  # 启用 http/2 的 https 监听

    server_name www.abc.com abc.com;  # 绑定的域名
    root html;
    index index.html index.htm;
    # ssl证书和私钥的路径
    ssl_certificate conf.d/cert/abc.pem;
    ssl_certificate_key conf.d/cert/abc.key;
    ssl_session_timeout 5m;
    ssl_ciphers ecdhe-rsa-aes128-gcm-sha256:ecdhe:ecdh:aes:high:!null:!anull:!md5:!adh:!rc4;
    #表示使用的加密套件的类型。
    ssl_protocols tlsv1.1 tlsv1.2 tlsv1.3; #表示使用的tls协议的类型。
    ssl_prefer_server_ciphers on;
    location / {
        #root html;  #web网站程序存放目录。
        #index index.html index.htm;
        proxy_set_header host $host;
        proxy_set_header x-forwarded-proto $scheme;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_pass http://abc-cms:9999;
#         proxy_pass http://172.19.19.80:8082;
    }

    # 静态页面配置,代码传到/opt/docker-data/nginx/h5路径即可
    location /tongsongzj/ {
        # 静态网页配置
        root /usr/share/nginx/h5;  # 静态网页的根目录
        index index.html;  # 默认打开的文件
        try_files $uri $uri/ /index.html;  # 尝试查找uri对应的文件,否则返回index.html

        # 禁用缓存
        expires off;
        add_header cache-control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }
}

问题解决

静态文件无法访问的原因在于路径拼接方式错误

以下是详细分析和解决方案:

问题分析:路径拼接逻辑错误

当前配置中使用了 root 指令:

location /tongsongzj/ {
    root /usr/share/nginx/h5;  # 最终路径 = root + location
    ...
}

nginx 会将 location 路径拼接到 root 后面,因此实际访问路径为:

/usr/share/nginx/h5/tongsongzj/index.html

但根据你的描述,静态文件直接存放在容器的 /usr/share/nginx/h5 路径下(对应宿主机 /opt/docker-data/nginx/h5),并未创建 tongsongzj 子目录,导致路径不匹配。

解决方案:改用 alias 指令

root 改为 alias 指令,并直接指向静态文件的实际路径:

location /tongsongzj/ {
    alias /usr/share/nginx/h5/;  # 直接映射路径,不拼接 location
    index index.html;
    try_files $uri $uri/ /tongsongzj/index.html;  # 修正回退路径

    # 禁用缓存配置
    expires off;
    add_header cache-control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
}

关键修改说明

  1. alias 会直接将 /tongsongzj/ 映射到容器内的 /usr/share/nginx/h5/ 目录,不再拼接 location 路径。
  2. 修正 try_files 确保回退到 /tongsongzj/index.html,避免路径错误。

其他注意事项

1.确认文件路径

确保容器内 /usr/share/nginx/h5 路径下直接存在 index.html 等静态文件,而不是嵌套在子目录中。

2.检查目录权限

运行以下命令确保 nginx 有权限访问该目录:

docker exec [nginx容器名] ls -l /usr/share/nginx/h5

如果权限不足,尝试在宿主机执行:

chmod -r 755 /opt/docker-data/nginx/h5

3.检查 nginx 日志

查看错误日志定位具体原因:

docker logs [nginx容器名] 2>&1 | grep -i error

完整修正配置参考

# 静态页面配置
location /tongsongzj/ {
    alias /usr/share/nginx/h5/;  # 使用 alias 直接映射真实路径
    index index.html;
    try_files $uri $uri/ /tongsongzj/index.html;  # 保持前端路由正常

    # 禁用缓存
    expires off;
    add_header cache-control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
}

或者

    # 静态页面配置,代码传到 /opt/docker-data/nginx/h5/tongsongzj 路径即可
    # 说明:使用root指令,nginx 会将 location 路径拼接到 root 后面,因此实际访问路径为:/usr/share/nginx/h5/tongsongzj/index.html
    location /tongsongzj/ {
        # 静态网页配置
        root /usr/share/nginx/h5;  # 静态网页的根目录 【最终路径 = root + location】
        index index.html;  # 默认打开的文件
        try_files $uri $uri/ /index.html;  # 尝试查找uri对应的文件,否则返回index.html

        # 禁用缓存
        expires off;
        add_header cache-control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }

修改后重启 nginx 服务即可生效:

docker exec [nginx容器名] nginx -s reload

root和alias的核心区别

nginx 的 rootalias 指令都用于定义静态文件的路径映射,但它们的路径拼接逻辑完全不同。理解它们的区别是避免配置错误的关键。

1.root指令

定义

  • 路径拼接逻辑root 会将 location 的 uri 路径拼接到 root 指定的路径后面。
  • 适用场景:当 uri 路径和文件系统的目录结构完全一致时(例如 /static/ 对应 /var/www/static/)。

示例

location /static/ {
    root /var/www;
}

当访问 /static/image.jpg 时,nginx 会查找文件:

/var/www/static/image.jpg

(路径 = root + location 的 uri)

优点

  • 简单直观:uri 路径和文件路径一一对应,适合标准目录结构。
  • 自动处理子路径:支持嵌套路径(如 /static/css/style.css)。

缺点

  • 路径强制拼接:无法灵活映射到与 uri 不匹配的目录结构。
  • 冗余路径:如果 uri 路径和实际目录结构不匹配,会导致路径错误。

注意事项

  • 确保 root 路径的末尾没有斜杠(例如 /var/www,而不是 /var/www/)。
  • 如果 location 路径是 /static/,实际文件必须存放在 root 路径下的 static 子目录中。

2.alias指令

定义

  • 路径拼接逻辑alias 会用指定的路径完全替换 location 的 uri 路径。
  • 适用场景:当 uri 路径和实际文件路径不一致时(例如将 /docs/ 映射到 /usr/share/nginx/html)。

示例

location /docs/ {
    alias /usr/share/nginx/html/;
}

当访问 /docs/readme.html 时,nginx 会查找文件:

/usr/share/nginx/html/readme.html

(路径 = alias 路径 + uri 去除 location 前缀后的部分)

优点

  • 灵活映射:可以自由将 uri 映射到任意目录结构。
  • 无冗余路径:uri 路径和文件路径完全解耦。

缺点

  • 路径易错:必须严格处理斜杠(/),否则会导致路径拼接错误。
  • 不支持自动子路径:需要手动处理嵌套路径。

注意事项

  • alias 路径的末尾必须带斜杠(例如 /usr/share/nginx/html/)。
  • location 的路径末尾必须带斜杠(例如 /docs/ 而不是 /docs),否则路径替换可能不完整。

关键对比表格

特性rootalias
路径拼接逻辑root + location uri用 alias 完全替换 location uri
斜杠处理root 路径末尾不带斜杠alias 路径末尾必须带斜杠
适用场景uri 与文件路径一致uri 与文件路径不一致
嵌套路径支持自动支持(如 /static/css/)需手动处理(依赖 try_files)
常见错误文件路径多了一层子目录路径拼接错误(斜杠问题)

常见错误场景与修复

错误 1:路径多了一层子目录

错误配置(使用 root):

location /tongsongzj/ {
    root /usr/share/nginx/h5;
    index index.html;
}
  • 预期路径:/usr/share/nginx/h5/index.html
  • 实际路径:/usr/share/nginx/h5/tongsongzj/index.html(多了一层 tongsongzj

修复方法:改用 alias

location /tongsongzj/ {
    alias /usr/share/nginx/h5/;  # 注意末尾斜杠
    index index.html;
}

错误 2:斜杠缺失导致路径拼接错误

错误配置

location /docs {
    alias /usr/share/nginx/html;  # 缺少末尾斜杠
}
  • 访问 /docs/readme.html 时,路径变为 /usr/share/nginx/htmlreadme.html(斜杠缺失导致拼接错误)。

修复方法

location /docs/ {                # location 末尾加斜杠
    alias /usr/share/nginx/html/;  # alias 末尾加斜杠
}

最佳实践

1.优先使用 root

  • 如果 uri 路径和文件目录结构完全一致(例如 /static/ 对应 /var/www/static/),使用 root 更简单。

2.必须用 alias 的场景

  • 当需要将 uri 映射到一个与 uri 路径不匹配的目录时(例如将 /legacy/ 映射到 /old-site/)。

3.严格处理斜杠

  • locationalias 的路径末尾必须同时带斜杠或不带斜杠,且逻辑一致。
  • 推荐统一在 locationalias 路径末尾加斜杠。

4.结合 try_files 处理前端路由

  • 如果是单页应用(如 vue/react),需配置 try_files 回退到入口文件:
location /tongsongzj/ {
    alias /usr/share/nginx/h5/;
    try_files $uri $uri/ /tongsongzj/index.html;  # 回退到 index.html
}

5.检查文件权限

确保 nginx 进程有权限读取目录和文件:

chmod -r 755 /opt/docker-data/nginx/h5  # 宿主机路径

总结

  • root:路径拼接简单,适合标准目录结构。
  • alias:路径替换灵活,适合自定义映射。

核心区别在于路径拼接逻辑,务必通过实际文件路径验证配置。

配置完成后,使用 nginx -t 测试语法,并通过日志排查错误:

tail -f /var/log/nginx/error.log

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com