【开发技能】Nginx学习笔记相关

🔧 一、全局配置解析

1. 核心配置块

worker_processes  1;                      # 工作进程数（建议=CPU核心数）
events {
    worker_connections  1024;             # 单个进程最大连接数
}
http {
    include       mime.types;             # 支持的文件类型映射
    default_type  application/octet-stream;
    client_max_body_size 512M;            # 允许上传的最大文件（如公司配置）
    # 其他全局配置...
}

---

🚪 二、Server块：多服务入口

1. 默认HTTP服务（80端口）

server {
    listen       80;
    server_name  localhost;              # 域名或IP
    
    # 静态文件服务（如公司内部系统）
    location /mkt {
        root   html;                     # 文件路径：nginx/html/mkt
        try_files $uri $uri/ /mkt/index.html;  # 解决前端路由刷新404
    }

    # 反向代理示例（API转发）
    location ^~/mkt-stage-api/ {
        proxy_pass http://127.0.0.1:8083/mkt/;  # 注意末尾斜杠会去掉前缀
        proxy_set_header Host $host;      # 传递原始域名
        proxy_set_header X-Real-IP $remote_addr;  # 传递客户端IP
    }
}

2. 多端口服务（如800-806端口）

server {
    listen       800;
    server_name  127.0.0.1;
    
    # 静态资源托管（融合平台前端）
    location /fusion {
        alias   html/fusion;             # alias与root区别：alias路径包含location前缀
        try_files $uri $uri/ /index.html; 
    }

    # 动态API代理
    location /prod-fusion-api/ {
        proxy_pass http://127.0.0.1:8080/;  # 转发到后端服务
    }
}

---

🔗 三、关键功能实现

1. 路径匹配规则对比

语法	匹配规则	示例
location /path	前缀匹配（任意包含/path的路径）	/path, /path/abc
location ^~ /path	优先前缀匹配（不检查正则）	公司配置中的API代理常用
location ~ .js$	正则匹配（区分大小写）	/script.js

2. 代理相关配置

# WebSocket代理（公司udm项目）
location /udm-api/connection/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://websocket_backend/;
}

# 文件下载服务（公司udm-files）
location /udm-files {
    alias   D:\PROJECT\udm\files;  # Windows路径需转义
    autoindex on;                     # 开启目录列表
}

3. 特殊需求处理

# 跨域支持（CORS）
location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    if ($request_method = 'OPTIONS') {
        return 204;  # 预检请求直接响应
    }
    proxy_pass http://backend;
}

# IP访问限制
location /admin/ {
    allow 192.168.1.0/24;
    deny all;
}

---

⚠️ 四、常见问题记录

问题1：前端路由刷新404

解决方案：

location /app {
    try_files $uri $uri/ /app/index.html;  # Vue/React项目必备
}

问题2： proxy_pass转发后路径错误

原因分析：

• proxy_pass http://backend/; → 去掉匹配的前缀（如/api/foo → /foo）
• proxy_pass http://backend; → 保留完整路径（如/api/foo → /api/foo）

问题3：上传文件大小限制

http {
    client_max_body_size 100M;  # 全局设置
}
server {
    location /upload {
        client_max_body_size 500M;  # 局部覆盖
    }
}

---

📊 五、个人实验记录

实验1：本地模拟多项目代理

目标 ：在本地用Nginx同时运行两个Vue项目（端口3001和3002）
配置片段：

server {
    listen       90;
    location /app1 {
        proxy_pass http://localhost:3001/;
    }
    location /app2 {
        proxy_pass http://localhost:3002/;
    }
}

测试结果：

• ✅ http://localhost:90/app1 → 成功访问3001项目
• ✅ http://localhost:90/app2 → 成功访问3002项目

---