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

🔧 一、全局配置解析

1. 核心配置块

bash 复制代码
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端口)

bash 复制代码
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端口)

bash 复制代码
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. 代理相关配置

bash 复制代码
# 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. 特殊需求处理

bash 复制代码
# 跨域支持(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

解决方案

bash 复制代码
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:上传文件大小限制

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

📊 五、个人实验记录

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

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

bash 复制代码
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项目

相关推荐
青靴3 小时前
关于NGINX,你了解多少?
运维·nginx
5pace6 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Justin_1913 小时前
Galera Cluster部署
linux·服务器·nginx
苹果醋318 小时前
学习札记-Java8系列-1-Java8新特性简介&为什么要学习Java8
java·运维·spring boot·mysql·nginx
qyhua21 小时前
从零部署自维护版 Uptime Kuma:Node.js + PM2 + Nginx 全链路实战指南
运维·nginx·node.js
睡不醒的猪儿1 天前
nginx日志同步阿里云datahub后写入数据库
数据库·nginx·阿里云
耿雨飞1 天前
Nginx代理服务应用实战:HTTP代理模块、正向代理、反向代理与TCP/UDP代理详解
nginx
安卓开发者2 天前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
妹妹够啦2 天前
宝塔部署-Nginx配置
运维·nginx·junit
stark张宇3 天前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php