从前端视角玩转 Nginx：反向代理、负载均衡... 通通拿下！

最近新项目上线，我这个前端竟然要手搓 Nginx 配置！虽然略有不爽，但为了成为合格的“大前端”，硬着头皮也要上。本文就从前端的视角出发，带你轻松玩转 Nginx，理解核心配置，还能顺手解决几个常见问题。

一、Nginx 是个啥？

Nginx 可是一个高性能的 HTTP 和反向代理 Web 服务器。简单来说，它就是一个服务器。但这里有两个关键点：什么是反向代理？Nginx 的高性能体现在哪里？

先来搞懂几个服务器相关的概念。

Web 服务器:就像一个勤劳的接待员，接收客户端的 HTTP 请求，然后返回 HTML、图片、JavaScript 等资源，典型的“一问一答”机制。

代理服务器:它是网络世界中的“中间人”，位于本地网络和互联网之间。它代表客户端向目标服务器发送请求，再把结果返回给客户端。

代理服务器的作用：

•保护隐私：隐藏你的真实 IP 地址。

•内容过滤：拦截不良信息，像个网络保安。

•网络加速：缓存常用资源，下次访问直接从缓存取。

•负载均衡：把请求分发到多台服务器，避免单点 overload。

二、正向代理 vs. 反向代理

代理服务器根据功能分为正向代理和反向代理。

正向代理：代表用户发起请求。用户将请求发送到代理服务器，代理再将请求转发到目标服务器。

反向代理：代表服务器接收请求。用户将请求发送到反向代理，反向代理再将请求转发到一个或多个后端服务器。

关键区别

•请求方向：正向代理关注的是用户的请求，反向代理关注的是后端服务器的请求。

•数量：正向代理通常只转发到一个特定的目标服务器，而反向代理可以分发请求到多个真实服务器。

1730547970909.png

三、实战演练：Nginx 配置

3.1 正向代理配置

Nginx 的配置文件一般在/etc/nginx/nginx.conf或/etc/nginx/conf.d/目录下。

image.png

proxy_pass指令指定目标服务器地址。proxy_cache_path配置缓存路径，proxy_cache开启缓存，proxy_cache_valid设置缓存有效期。

3.2 反向代理配置

image.png

这里使用了upstream指令定义后端服务器组，实现了负载均衡，并通过weight参数设置权重。

四、问题排查：502 和 504

502 Bad Gateway：Nginx 没能从后端服务器拿到有效响应。可能后端服务挂了、网络不通、proxy_pass地址写错了。排查思路：检查 Nginx 配置、telnet测试后端服务器连通性，查看后端服务器日志。

504 Gateway Timeout：Nginx 等后端服务器响应超时了。可能网络延迟高、后端处理太慢、Nginx 超时设置太短。可以调整proxy_connect_timeout、proxy_send_timeout、proxy_read_timeout参数。

image.png

码字不易，如果觉得有用，点个赞、收藏、分享支持一下小墨吧！我会持续分享有趣有料的前端干货，一起探索前端的奇妙世界！