[toc]

nginx部署页面笔记

nginx 是一个高性能的 Web 服务器和反向代理服务器，常用于部署静态页面、动态应用、负载均衡等场景。

基础配置

最简单的静态文件配置

nginx

server {
    listen 80;
    server_name example.com;
    
    # 静态文件根目录
    root /var/www/html;
    
    # 默认首页文件
    index index.html index.htm;
    
    # 静态文件缓存设置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

在上面的配置中，会将80端口的所有请求都指向/var/www/html目录。默认首页文件为index.html，其他静态文件如js、css、png、jpg等会缓存1年。

例如访问http://example.com会返回/var/www/html/index.html文件。http的默认端口为80，所以可以省略端口号。

多个静态资源目录配置

nginx

server {
    listen 80;
    server_name example.com;
    
    # 主站点目录
    location / {
        root /var/www/html;
        index index.html;
    }
    
    # 图片资源目录
    location /images/ {
        root /var/www/static;
        expires 30d;
    }
    
    # 下载文件目录
    location /downloads/ {
        root /var/www/static;
        autoindex on;  # 开启目录列表
        add_header Content-Disposition "attachment";  # 强制下载
    }
}

访问http://example.com/images/会返回/var/www/static/images/目录下的文件。

高级配置技巧

路径重写和别名

nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 使用alias重写路径
    location /static/ {
        alias /var/www/static/;
        # 注意：alias路径必须以斜线结尾
    }
    
    # 隐藏.html扩展名
    location / {
        try_files $uri $uri.html $uri/ =404;
    }
    
    # SPA应用路由处理
    location /app/ {
        try_files $uri $uri/ /app/index.html;
    }
}

缓存优化策略

nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # HTML文件 - 短时间缓存
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public";
    }
    
    # CSS/JS文件 - 长时间缓存
    location ~* \.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        # 文件内容变化时通过文件名版本控制
    }
    
    # 图片资源 - 中等缓存
    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
    
    # 字体文件
    location ~* \.(woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }
}

安全配置

基础安全设置

nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 隐藏Nginx版本信息
    server_tokens off;
    
    # 防止点击劫持
    add_header X-Frame-Options "SAMEORIGIN";
    
    # XSS保护
    add_header X-XSS-Protection "1; mode=block";
    
    # 内容类型嗅探保护
    add_header X-Content-Type-Options "nosniff";
    
    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
    
    # 禁止访问敏感文件
    location ~* \.(log|sql|bak|conf|ini)$ {
        deny all;
    }
}

HTTPS配置

nginx

server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;
    root /var/www/html;
    
    # SSL证书配置
    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
    
    # SSL安全配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    
    # HSTS头
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    
    location / {
        index index.html;
    }
}

性能优化

Gzip压缩

nginx

# 在http块中配置
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/javascript
        application/xml+rss
        application/json
        image/svg+xml;
}

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 启用Brotli压缩（如果支持）
    # brotli on;
    # brotli_comp_level 6;
    # brotli_types text/plain text/css application/json application/javascript text/xml application/xml;
}

文件传输优化

nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 启用sendfile
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    
    # 大文件传输优化
    location /large-files/ {
        root /var/www/static;
        # 禁用缓冲，直接发送
        sendfile on;
        aio on;
        directio 512;
        output_buffers 1 128k;
    }
}

多站点配置

基于域名的虚拟主机

nginx

# 站点1
server {
    listen 80;
    server_name site1.example.com;
    root /var/www/site1;
    index index.html;
    
    access_log /var/log/nginx/site1.access.log;
    error_log /var/log/nginx/site1.error.log;
}

# 站点2
server {
    listen 80;
    server_name site2.example.com;
    root /var/www/site2;
    index index.html;
    
    access_log /var/log/nginx/site2.access.log;
    error_log /var/log/nginx/site2.error.log;
}

基于端口的虚拟主机

nginx

# 主站点 - 80端口
server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html;
}

# 管理后台 - 8080端口
server {
    listen 8080;
    server_name example.com;
    root /var/www/admin;
    index admin.html;
    
    # 限制访问IP
    allow 192.168.1.0/24;
    deny all;
}

错误页面定制

nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 自定义404页面
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
    
    # 自定义50x错误页面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
    
    # 优雅的错误处理
    location / {
        try_files $uri $uri/ =404;
    }
}

日志配置

nginx

http {
    # 定义日志格式
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    
    log_format static '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" - $request_time';
}

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    
    # 访问日志
    access_log /var/log/nginx/access.log main;
    
    # 静态资源日志（单独记录）
    location ~* \.(js|css|png|jpg)$ {
        access_log /var/log/nginx/static.log static;
        expires 30d;
    }
    
    # 错误日志
    error_log /var/log/nginx/error.log warn;
}

实际部署示例

React/Vue SPA应用部署

nginx

server {
    listen 80;
    server_name spa.example.com;
    root /var/www/spa/dist;
    
    # SPA路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # API代理（如果需要）
    location /api/ {
        proxy_pass http://backend:3000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

多环境配置

nginx

# 开发环境
server {
    listen 80;
    server_name dev.example.com;
    root /var/www/dev;
    
    # 开发环境禁用缓存
    location ~* \.(html|css|js)$ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
}

# 生产环境
server {
    listen 80;
    server_name example.com;
    root /var/www/prod;
    
    # 生产环境启用缓存
    location ~* \.(css|js|png|jpg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

常见问题解决

路径问题

问题： 静态资源404错误 解决方案： 检查root和alias路径配置

nginx

# 错误配置
location /static/ {
    root /var/www/static;  # 实际路径：/var/www/static/static/
}

# 正确配置
location /static/ {
    alias /var/www/static/;  # 实际路径：/var/www/static/
}

权限问题

bash

# 设置正确的文件权限
chown -R nginx:nginx /var/www/html
chmod -R 755 /var/www/html

缓存问题

nginx

# 强制刷新缓存（开发环境）
location ~* \.(html|css|js)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

最佳实践总结

目录结构清晰：按功能划分静态资源目录
缓存策略合理：根据文件类型设置不同的缓存时间
安全配置完善：隐藏敏感信息，设置安全头
性能优化到位：启用压缩，优化文件传输
日志记录详细：便于问题排查和性能分析
错误处理优雅：提供友好的错误页面
多环境支持：区分开发、测试、生产环境配置

通过以上配置，可以构建一个高效、安全、稳定的Nginx静态页面部署环境。

nginx部署页面笔记 ​

基础配置 ​

最简单的静态文件配置 ​

多个静态资源目录配置 ​

高级配置技巧 ​

路径重写和别名 ​

缓存优化策略 ​

安全配置 ​

基础安全设置 ​

HTTPS配置 ​

性能优化 ​

Gzip压缩 ​

文件传输优化 ​

多站点配置 ​

基于域名的虚拟主机 ​

基于端口的虚拟主机 ​

错误页面定制 ​

日志配置 ​

实际部署示例 ​

React/Vue SPA应用部署 ​

多环境配置 ​

常见问题解决 ​

路径问题 ​

权限问题 ​

缓存问题 ​

最佳实践总结 ​

nginx部署页面笔记

基础配置

最简单的静态文件配置

多个静态资源目录配置

高级配置技巧

路径重写和别名

缓存优化策略

安全配置

基础安全设置

HTTPS配置

性能优化

Gzip压缩

文件传输优化

多站点配置

基于域名的虚拟主机

基于端口的虚拟主机

错误页面定制

日志配置

实际部署示例

React/Vue SPA应用部署

多环境配置

常见问题解决

路径问题

权限问题

缓存问题

最佳实践总结