不为啥，不蒸馒头争口气，吃技术这碗饭，有些东西你Ke以不用，但不Neng不会，给我学，卷起来！ Ru果你正准备把自己的 Vue、React 或者单页应用放到本地服务器上进行演示或者轻量级部署，那就请跟着我一步步来。

把官方发布的绿色免安装版抓下来。 本地 ip = localhost = .——记住这一点，在后面的代理配置里要多加注意。 我们用 Windows 为例：在 nginx.org 下载 Nginx-1.x.x-Windows.zip，解压后文件夹结构大致如下：

/nginx
├─conf
│ └─nginx.conf
└─html
    └─index.html   # 默认欢迎页面

双击 nginx.exe 就Neng启动服务，浏览器访问 就Nengkan到默认页面。

一般只会用到两个文件夹：conf 和 html. Ru果你打包出了一个 Vue 的 dist 文件夹，只需把它移动到 /html/projectA/ 下即可；若想同时跑两个项目，只需再创建一个子目录：

/html
├─projectA   # 第一个前端项目
└─projectB   # 第二个前端项目

提示：目录名随意，但后续在 nginx.conf 里必须保持一致。

温馨提醒： Ru果 nginx 无法启动，一定是因为配置文件有误。打开 /conf/nginx.conf 用任何文本编辑器检查错误行。

# 单个虚拟主机示例
server {
    listen      80;
    server_name localhost;
    # 静态资源默认指向 /html/projectA/
    location / {
        root   html/projectA;
        index  index.html index.htm;
    }
    # API 代理示例
    location /api/ {
        proxy_pass http://127.0.0.1:3000/;       # 后端地址，可换成实际地址
        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_read_timeout 60s;
    }
    # 视频代理
    location /videoURL/ {
        proxy_pass http://127.0.0.1:4000/;       # 视频后端服务地址
        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_pass': 指定后端服务地址；末尾斜杠决定是否剥离匹配路径。

'proxy_set_header': 把浏览器真实信息传给后端，避免被 Nginx 覆盖。

'proxy_read_timeout': 设置读取响应的Zui长等待时间；对长连接尤其重要。

注：Ru果想在同一域名下运行多套项目，只需在每个子路径前加上对应项目名，例如 /projectA/api/ 等。

# WebSocket 示例
location /ws/ {
    proxy_pass http://127.0.0.1:5000/;          # ws 服务地址
    # 必须的升级协议头
    proxy_http_version      1.1;
    proxy_set_header Upgrade           $http_upgrade;
    proxy_set_header Connection      "upgrade";
    # 身份信息透传，同 HTTP 一致
    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_read_timeout 300s;
}

✔✔✔ 完成上述两段后即可同时支持 RESTful API 与 WebSocket 通讯。别忘了重启 Nginx 才Neng生效。

Nginx 重启方式：

Crtl+Shift+Esc 打开任务管理器 → 找到两个 nginx.exe → End Task 。然后再双击一次主进程即可重启。

Meteorical way：在命令行执行 C:\path\to ginx.exe -s reload

    ⚠️ 小心！若改动了 conf/nginx.conf 后没有 reload，会导致旧配置继续生效哦！

`netstat` 检查占用情况： C:\Windows\System32 etstat -ano | findstr :80 - 查kan哪个进程占用了80号端口。 若冲突，用 `taskkill /PID xxxx /F` 杀掉进程或改为其他未占用的端口。

`settings.json` 与 VSCode 配合使用： Ru果你使用 VSCode 编辑 nginx 配置，Ke以安装插件 “NGINX Configuration Language Support”。然后在工作区根目录添加 `.vscode/settings.json `：

{
"editor.defaultFormatter" : "ahmadalli.vscode-nginx-conf"",
"editor.formatOnSave" : true,
}

常见错误回顾：

`net::ERR_INCOMPLETE_CHUNKED_ENCODING` — 通常是 `proxy_read_timeout` 太短导致连接被强制关闭。增大值或检查后端是否正常返回完整数据流即可。 

`502 Bad Gateway` — 请确认 `proxy_pass` 后面的 IP 与 port 正确，并且目标服务Yi启动。

`403 Forbidden` — 当访问 `index.html` 时Ru果文件权限被误删，请确保 `/html/...` 下存在有效文件且权限无误。