Nginx 配置访问图片路径及HTML静态页面调取

Nginx 是一个高性能的 HTTP 和反向代理服务器，非常适合用于静态资源的服务。下面我将详细介绍如何配置 Nginx 来访问图片路径和 HTML 静态页面。

基本静态资源服务配置

1. 最简单的静态资源服务配置

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;
        index index.html;
    }

    location /images/ {
        root /var/www;
        autoindex on;  # 可选，开启目录列表
    }
}

这个配置中： - / 路径指向 /var/www/html 目录，会默认查找 index.html - /images/ 路径指向 /var/www/images 目录

2. 更完整的静态资源服务配置

server {
    listen 80;
    server_name example.com;

    # 主目录配置
    root /var/www;

    # 默认首页
    index index.html index.htm;

    # 静态资源缓存设置
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
        access_log off;
    }

    # 图片路径配置
    location /images/ {
        alias /var/www/images/;
        # 或者使用 root
        # root /var/www;

        # 开启目录列表(可选)
        autoindex on;

        # 图片缓存设置
        expires 7d;
    }

    # HTML页面配置
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 防止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

配置说明

root 与 alias 的区别

1. root:

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

   • 请求 /images/logo.png 会映射到 /var/www/images/logo.png

2. alias:

   location /images/ {
      alias /var/www/images/;
   }
   

   • 请求 /images/logo.png 会直接映射到 /var/www/images/logo.png
   • alias 路径必须以 / 结尾

常用指令说明

• try_files: 尝试按顺序查找文件，直到找到为止
• autoindex: 是否允许目录列表
• expires: 设置缓存时间
• add_header: 添加响应头
• access_log off: 关闭访问日志(对静态资源常用)

实际应用示例

示例1: 图片服务

server {
    listen 80;
    server_name img.example.com;

    root /data/images;

    location / {
        autoindex off;
        expires 30d;
        access_log off;
    }

    # 防止盗链
    location ~* \.(jpg|jpeg|png|gif)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
}

示例2: 静态网站

server {
    listen 80;
    server_name www.example.com;

    root /var/www/example;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff2)$ {
        expires 365d;
        access_log off;
        add_header Cache-Control "public";
    }

    # 禁止访问 .htaccess 等隐藏文件
    location ~ /\. {
        deny all;
    }
}

常见问题解决

1. 403 Forbidden 错误:

   • 检查目录权限: chmod -R 755 /var/www
   • 检查文件所有者: chown -R nginx:nginx /var/www
   • 检查 SELinux 状态: setenforce 0 (临时关闭) 或配置正确的安全上下文

2. 404 Not Found 错误:

   • 确认 root 或 alias 路径是否正确
   • 确认文件是否存在于指定路径
   • 检查是否有拼写错误

3. 图片无法显示:

   • 检查 MIME 类型是否正确
   • 确认文件权限
   • 检查文件路径大小写(Unix系统区分大小写)

4. 性能优化建议:

   • 启用 gzip 压缩
   • 设置合理的缓存头
   • 对静态资源关闭访问日志

最佳实践

1. 为不同类型的静态资源使用不同的 location 块
2. 设置适当的缓存头以减少服务器负载
3. 对图片等静态资源关闭访问日志
4. 使用 alias 代替 root 当路径不完全匹配时
5. 考虑使用 CDN 来分发静态内容

配置完成后，记得测试并重新加载 Nginx:

sudo nginx -t  # 测试配置
sudo systemctl reload nginx  # 重新加载配置

希望这些配置示例和说明能帮助你正确设置 Nginx 来服务图片和 HTML 静态页面。