docker nginx 部署前端踩坑记录

文章目录

  • [坑点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://【宿主机IP地址】:8000/backend/
    • http://【后端容器名称或服务名称或hostname】:8000/backend/
相关推荐
Zuckjet_42 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801461 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
Lin_Aries_04214 小时前
容器化简单的 Java 应用程序
java·linux·运维·开发语言·docker·容器·rpc
脑花儿4 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
岁岁种桃花儿4 小时前
详解 Kubernetes 命令:kubectl exec -it nginx -- bash 及实战场景
运维·nginx·kubernetes
VueVirtuoso4 小时前
前后端部署 + Nginx 配置 + Cloudflare 全攻略(通俗易懂版)
运维·nginx
小白银子5 小时前
零基础从头教学Linux(Day 42)
linux·运维·服务器·网络·nginx