提供静态内容

Nginx 非常适合提供静态内容，如 HTML、CSS、JavaScript、图片等。本章节将介绍如何配置 Nginx 提供静态内容。

基本配置

简单的静态文件服务

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

指令说明

创建网站目录

Linux/macOS

# 创建目录
sudo mkdir -p /var/www/example.com

# 设置权限
sudo chown -R $USER:$USER /var/www/example.com
sudo chmod -R 755 /var/www/example.com

# 创建测试文件
echo "<h1>Hello, World!</h1>" | sudo tee /var/www/example.com/index.html

Windows

# 创建目录
mkdir C:\nginx\html\example.com

# 创建测试文件
echo <h1>Hello, World!</h1> > C:\nginx\html\example.com\index.html

配置多个网站

方法一：多个 server 块

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

    location / {
        root   /var/www/example.com;
        index  index.html index.htm;
    }
}

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

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

方法二：使用变量

server {
    listen       80;
    server_name  ~^(?<subdomain>.+)\.example\.com$;

    location / {
        root   /var/www/$subdomain;
        index  index.html index.htm;
    }
}

Location 匹配

前缀匹配

location / {
    root   /usr/share/nginx/html;
}

location /images/ {
    root   /usr/share/nginx;
}

location /documents/ {
    root   /usr/share/nginx;
}

精确匹配

location = /favicon.ico {
    log_not_found off;
    access_log off;
}

正则匹配

location ~ \.(jpg|jpeg|png|gif|ico)$ {
    root   /usr/share/nginx/images;
}

location ~* \.(css|js)$ {
    root   /usr/share/nginx/static;
}

优先级示例

location = / {
    [ configuration A ]
}

location / {
    [ configuration B ]
}

location /documents/ {
    [ configuration C ]
}

location ^~ /images/ {
    [ configuration D ]
}

location ~* \.(gif|jpg|jpeg)$ {
    [ configuration E ]
}

优化静态内容服务

启用 sendfile

http {
    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
}

启用 gzip 压缩

http {
    gzip  on;
    gzip_vary on;
    gzip_min_length  1024;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/rss+xml font/truetype font/opentype application/vnd.ms-fontobject image/svg+xml;
}

设置缓存

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

禁用日志

location = /favicon.ico {
    log_not_found off;
    access_log off;
}

location = /robots.txt {
    log_not_found off;
    access_log off;
}

自定义错误页面

基本配置

error_page   404              /404.html;
error_page   500 502 503 504  /50x.html;

location = /50x.html {
    root   /usr/share/nginx/html;
}

完整示例

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

目录列表

启用目录列表

location /downloads/ {
    autoindex on;
    autoindex_exact_size on;
    autoindex_localtime on;
}

指令说明

限制访问速度

location /downloads/ {
    limit_rate 100k;
}

文件上传限制

http {
    client_max_body_size 10m;
    client_body_buffer_size 128k;
}

安全配置

禁止访问隐藏文件

location ~ /\. {
    deny all;
}

禁止访问备份文件

location ~ ~$ {
    deny all;
}

限制请求方法

if ($request_method !~ ^(GET|HEAD|POST)$ ) {
    return 405;
}

完整配置示例

基本网站

server {
    listen       80;
    server_name  example.com;

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

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    error_page   404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

高级配置

server {
    listen       80;
    server_name  example.com;

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

    # 字符集
    charset utf-8;

    # 禁用访问日志
    access_log off;

    # 启用 gzip
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/xml+rss text/javascript application/javascript;

    # 静态文件缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

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

    # 禁止访问备份文件
    location ~ ~$ {
        deny all;
    }

    # favicon
    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    # robots.txt
    location = /robots.txt {
        log_not_found off;
        access_log off;
    }

    # 主页面
    location / {
        try_files $uri $uri/ =404;
    }

    # 错误页面
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

测试配置

# 测试配置
sudo nginx -t

# 重新加载配置
sudo nginx -s reload

验证

# 测试网站
curl http://localhost

# 测试静态文件
curl http://localhost/images/logo.png

# 查看响应头
curl -I http://localhost/style.css

最佳实践

1. 使用 try_files：避免文件不存在时的错误
2. 启用缓存：提高静态文件访问速度
3. 压缩内容：减少传输数据量
4. 禁用日志：减少日志文件大小
5. 限制访问：保护敏感文件
6. 设置过期时间：减少重复请求