Nginx配置详细解析与新手指导

\conf\nginx.conf


worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 8025;
        server_name localhost;

        # 根路径处理
        location / {
            root html;
            index index.html index.htm;

            # 单页应用路由支持(处理点击页面刷新,提示404的问题)
            try_files $uri $uri/ /index.html;

            # 禁用缓存
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            expires -1;
        }

        # 代理设置
        # 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
        # 前端请求:http://localhost:8025/api/users
        # Nginx 转发:http://localhost:8080/users
        location /api/ {
		  proxy_pass http://localhost:8080/;

            # 设置用户客户端的请求头
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 错误页面处理
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

我来为您详细解析这个 Nginx 配置文件,我会从基础概念开始逐步讲解:

1. 全局配置部分

nginx

worker_processes  1;
  • 作用:设置 Nginx 工作进程的数量

  • 说明:数字 1 表示只启动 1 个 worker 进程。在生产环境中,通常设置为 CPU 核心数

nginx

events {
    worker_connections  1024;
}
  • 作用:配置事件处理模型和连接数限制

  • 说明:每个 worker 进程最多可以同时处理 1024 个连接

2. HTTP 模块基础配置

nginx

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
  • include mime.types:引入 MIME 类型定义文件,让 Nginx 能识别不同文件扩展名的 Content-Type

  • default_type:当无法确定文件类型时,默认作为二进制流处理(浏览器会下载而非显示)

  • sendfile on:启用高效文件传输模式,提升静态文件传输性能

  • keepalive_timeout 65:保持客户端连接超时时间为 65 秒

3. Server 块配置

nginx

server {
    listen       8025;
    server_name  localhost;
  • listen 8025:监听 8025 端口

  • server_name localhost:服务器名称为 localhost,匹配访问的域名

4. 主要 Location 块

根路径处理

nginx

location / {
    root   html;
    index  index.html index.htm;
    
    # 单页应用路由支持
    try_files $uri $uri/ /index.html;
    
    # 禁用缓存配置
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    expires -1;
}

详细解释

  • root html:网站根目录为 Nginx 安装目录下的 html 文件夹

  • index:默认索引文件为 index.html 或 index.htm

  • try_files:解决前端路由刷新 404 问题的关键

    • $uri → 尝试访问请求的文件

    • $uri/ → 尝试作为目录访问

    • /index.html → 都失败则返回 index.html(前端路由接管)

  • 缓存控制:完全禁用浏览器缓存,确保每次都是最新内容

API 代理配置

nginx

location /api/ {
    proxy_pass http://localhost:8080/;
    
    # 请求头传递
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

代理工作原理

text

前端请求:http://localhost:8025/api/users
Nginx 转发:http://localhost:8080/users

请求头作用

  • Host $host:保持原始请求的 Host 头

  • X-Real-IP $remote_addr:传递客户端真实 IP

  • X-Forwarded-For:记录请求经过的代理链

  • X-Forwarded-Proto:传递原始请求协议(http/https)

5. 错误页面配置

nginx

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   html;
}
  • 当出现 500、502、503、504 错误时,显示 html/50x.html 页面

配置文件整体结构总结

text

nginx.conf
├── 全局配置 (worker_processes)
├── 事件配置 (events)
└── HTTP 配置 (http)
    ├── 基础设置 (MIME类型、传输优化等)
    └── 虚拟主机 (server)
        ├── 监听配置 (listen, server_name)
        ├── 静态文件服务 (location /)
        ├── API 代理 (location /api/)
        └── 错误页面处理

使用场景

这个配置非常适合:

  1. 前后端分离项目:前端使用 Vue/React/Angular 等框架

  2. 开发环境:解决跨域问题和前端路由问题

  3. 单页应用部署:确保路由刷新正常显示


增加超时设置,解决请求超过1分钟报错404的问题


worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 8025;
        server_name localhost;

        # 根路径处理
        location / {
            root html;
            index index.html index.htm;

            # 单页应用路由支持(处理点击页面刷新,提示404的问题)
            try_files $uri $uri/ /index.html;

            # 禁用缓存
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            expires -1;
        }

        # 代理设置
        # 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
        # 前端请求:http://localhost:8025/api/users
        # Nginx 转发:http://localhost:8080/users
        location /api/ {
		  proxy_pass http://localhost:8080/;

            # 设置用户客户端的请求头
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 超时设置
            proxy_connect_timeout 90s;    # 连接后端服务器的超时时间
            proxy_send_timeout 300s;      # 向后端发送请求的超时时间  
            proxy_read_timeout 300s;      # 从后端读取响应的超时时间
        }

        # 错误页面处理
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

增加 WebSocket 代理


worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 8025;
        server_name localhost;

        # 根路径处理
        location / {
            root html;
            index index.html index.htm;

            # 单页应用路由支持(处理点击页面刷新,提示404的问题)
            try_files $uri $uri/ /index.html;

            # 禁用缓存
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            expires -1;
        }

        # 代理设置
        # 处理跨域问题,Nginx 用的是 8025 端口,Tomcat 用的是 8080 端口,这就存在跨域的情况
        # 前端请求:http://localhost:8025/api/users
        # Nginx 转发:http://localhost:8080/users
        location /api/ {
		  proxy_pass http://localhost:8080/;

            # 设置用户客户端的请求头
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 超时设置
            proxy_connect_timeout 90s;    # 连接后端服务器的超时时间
            proxy_send_timeout 300s;      # 向后端发送请求的超时时间
            proxy_read_timeout 300s;      # 从后端读取响应的超时时间
        }

        # WebSocket代理
        location /ws/ {
            # 保留 /ws/ 路径
            proxy_pass http://localhost:8080/ws/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;

            # 移除Origin头,让后端认为是同源请求
            proxy_set_header Origin "";

            # 设置用户客户端的请求头
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Port $server_port;

            # 超时设置
            proxy_connect_timeout 60s;    # 连接后端服务器的超时时间
            proxy_read_timeout 60s;       # 向后端发送请求的超时时间
            proxy_send_timeout 60s;       # 从后端读取响应的超时时间

            # 禁用缓存
            proxy_buffering off;
        }

        # 错误页面处理
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值