Nginx入门教学+实战

一、Nginx 是什么？（先有个画面感）

👉 一句话：

Nginx = 高性能 Web服务器 + 反向代理 + 负载均衡器

它最常干的三件事：

复制代码

1. 托管前端页面（HTML / Vue / React）
2. 转发后端请求（解决跨域）
3. 分发请求（多台服务器）

二、安装 Nginx（Linux / Windows）

🐧 Linux（推荐，企业环境）

复制代码

# 安装
yum install nginx -y

# 启动
systemctl start nginx

# 设置开机启动
systemctl enable nginx

🪟 Windows（适合学习）

去官网下载：
👉 https://nginx.org/en/download.html
解压后运行：

nginx.exe
浏览器访问：

http://localhost

看到欢迎页说明成功 🎉

三、Nginx 核心配置结构（必须看懂🔥）

配置文件：

复制代码

nginx.conf

核心结构长这样：

复制代码

events {}

http {
    server {
        listen 80;

        location / {
        }
    }
}

🧠 理解三层结构

层级	作用
http	所有请求的总入口
server	一个网站
location	路由规则

👉 类比：

复制代码

http = 商场
server = 店铺
location = 柜台

四、第一个实战：部署前端页面 🌐

⚙️ 配置

复制代码

server {
    listen 80;
    server_name localhost;

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

📂 把你的前端文件丢进去：

复制代码

/usr/share/nginx/html

👉 访问：

复制代码

http://服务器IP

五、第二个实战：反向代理（重点🔥）

👉 目标：

复制代码

前端 → /api → Nginx → 后端(SpringBoot)

⚙️ 配置

复制代码

server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://localhost:8081/;
    }
}

🧪 测试

前端请求：

复制代码

axios.get("/api/user")

👉 实际转发：

复制代码

http://localhost:8081/user

🎯 作用

✔ 解决跨域

✔ 隐藏后端地址

✔ 统一入口

六、第三个实战：负载均衡（进阶一点）

👉 场景：

复制代码

后端有2台服务器

⚙️ 配置

复制代码

http {
    upstream backend {
        server localhost:8081;
        server localhost:8082;
    }

    server {
        listen 80;

        location /api/ {
            proxy_pass http://backend;
        }
    }
}

🎯 效果

复制代码

请求1 → 8081请求2 → 8082请求3 → 8081

👉 自动分流 🚦