docker nginx 部署前端踩坑记录

坑点1：localhost 与127.0.0.1

server {listen       80 default_server;client_max_body_size 20M;# 记录访问日志和错误日志access_log  /var/log/nginx/host.access.log  main;error_log  /var/log/nginx/error.log  warn;  # 降低日志级别至warn，减少非关键错误记录# 支持HTTP/1.1proxy_http_version 1.1;# 禁止Nginx自动添加Connection: close头部，保持长连接proxy_set_header Connection "";# 静态资源服务配置location / {alias /etc/nginx/www-data/dist/;index  index.html;try_files $uri $uri/ /index.html =404;  # 添加=404表示找不到文件时返回404状态码}# API 代理转发配置location /backend/ {proxy_pass http://192.168.102.76:8000/backend/;  ### 这是一个正确示例，但这里一定不能写localhost和127.0.0.1# 建议启用请求超时设置以防止长时间无响应proxy_connect_timeout 60s;proxy_send_timeout 60s;proxy_read_timeout 60s;# 关闭请求缓冲，适合文件上传场景proxy_request_buffering off;# 设置转发头信息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_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}}

这个nginx的配置文件最终是挂载到了nginx容器内部，所以此处的 proxy_pass 配置为http://127.0.0.1:8000/backend/; 则是在容器内部的回环地址， 而不是你所期望的宿主机的回环地址，所以前端连不上后端。

• 若前端使用nginx容器代理请求，则一定不能填写的示例有：
  • http://127.0.0.1:8000/backend/
  • http://localhost:8000/backend/
• 若 后端服务 同样是容器启动的， 那么这里可以写的示例有：
  • http://【宿主机IP地址】:8000/backend/
  • http://【后端容器名称或服务名称或hostname】:8000/backend/