docker nginx 部署前端踩坑记录

诸葛老刘2025-07-22 11:16

文章目录

[坑点1：localhost 与127.0.0.1](#坑点1：localhost 与127.0.0.1)

坑点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.1
    proxy_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/