MacOS下Nginx启动443端口占用冲突原因及location块作用问询

端口冲突产生原因 #

你此前启动React开发服务时，通过PORT=443参数指定了该服务占用本机443端口。而你的Nginx配置中，server块明确配置了listen 443 ssl，需要监听443端口提供HTTPS服务。
同一台主机的同一端口同一时间只能被一个进程绑定监听，因此Nginx尝试绑定443端口时会触发「地址已被占用」的报错。
你可以执行sudo lsof -i :443查看当前占用443端口的进程信息，确认就是你启动的React开发服务进程。
如果要同时运行两个服务，只需要修改React启动命令中的端口参数为其他未被占用的端口（例如3000），同时把Nginx配置中location /块下的proxy_pass地址改为https://localhost:3000/即可。

location / { ... } 配置块作用 #

这个配置块是Nginx的默认请求匹配规则，所有没有匹配到其他更具体location规则（比如你配置的/socialLoginSuccess、/auth/(.*)规则）的请求，都会进入这个块处理，核心作用是作为反向代理层转发请求到你的React开发服务，具体配置项作用如下：

• 多个proxy_set_header配置：
  • 将原始请求的域名Host、客户端真实IPX-Forwarded-For、请求协议X-Forwarded-Proto等信息透传给后端React服务，避免后端服务只能拿到Nginx节点的请求信息，保证服务逻辑正常运行
  • proxy_set_header Accept-Encoding ""清空请求的压缩编码标识，避免Nginx自动处理响应压缩导致前端资源解析异常
  • proxy_set_header Proxy ""清空代理相关请求头，避免干扰后端服务逻辑
• proxy_pass https://localhost/：将所有匹配到的请求转发到本机对应的HTTPS服务上
• 最后三行proxy_http_version 1.1、Upgrade、Connection相关配置：适配React开发服务的热更新依赖的socket.io通信逻辑，支持HTTP协议升级为WebSocket协议，避免热更新功能报错

内容的提问来源于stack exchange，提问作者SoftTimur