Docker化Django+React应用跨设备访问返回undefined及公网部署咨询

一、本地跨设备访问问题修复 #

1. 前端请求地址硬编码问题 #

你当前React代码里直接写死了http://127.0.0.1:8000/bucket-size/，当其他设备访问前端时，这个请求会发向设备自身的127.0.0.1，而不是你的服务器IP，所以必然拿不到数据。

修复方法：
使用相对路径替代绝对地址，修改Axios请求代码：

const handleButtonClick = () => {
  setLoading(true);
  axios
    .get("/api/bucket-size/")  // 改成相对路径
    .then((response) => {
      const size = response.data.bucketsize;
      const unit = response.data.unit;
      setOutput(size + " " + unit);
    })
    .catch((error) => {
      console.error(error);
    })
    .finally(() => {
      setLoading(false);
    });
};

2. 前端Nginx配置新增反向代理 #

修改前端的nginx.config，添加对/api路径的代理，把请求转发到后端Nginx服务：

server {
    listen       ${PORT:-60};
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    # 新增：代理/api开头的请求到后端Nginx
    location /api/ {
        proxy_pass http://nginx_backend_server:8000/;  # 注意末尾的斜杠，保证路径正确转发
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
        try_files $$uri /index.html;
    }
}

3. 调整Django配置 #

检查后端Django的settings.py，确保ALLOWED_HOSTS包含服务器的局域网IP（192.168.1.53）或者设置为["*"]（仅开发环境建议，生产环境需指定具体地址）：

# Django settings.py
ALLOWED_HOSTS = ['192.168.1.53', 'localhost', '127.0.0.1']

此时同一网络设备用http://192.168.1.53:60访问，前端请求会通过Nginx转发到后端，就能正常获取数据了。

二、云服务商部署步骤 #

1. 选择云服务器 #

购买一台云服务器（比如ECS、轻量应用服务器），系统优先选Ubuntu或CentOS，配置根据应用规模选择（最低配足够测试）。

2. 服务器基础配置 #

• 登录服务器，安装Docker和Docker Compose：

  # Ubuntu系统示例
  sudo apt update && sudo apt install docker.io docker-compose -y
  sudo systemctl enable docker --now
  

• 配置安全组/防火墙：开放60端口（前端访问），如果后续用域名+HTTPS，还需开放80和443端口。

3. 部署应用 #

• 将项目代码（backend、frontend、nginx_backend_server、docker-compose.yml等）上传到服务器，可通过scp或Git克隆实现。
• 进入项目根目录，启动容器：

  sudo docker-compose up -d
  

4. 生产环境优化 #

• Django配置调整：
  • 设置DEBUG = False
  • ALLOWED_HOSTS添加云服务器的公网IP或你的域名
  • 执行python manage.py collectstatic收集静态文件，并在后端Nginx配置中添加静态文件处理规则
• 域名与HTTPS：
  • 注册域名并解析到云服务器公网IP
  • 用Certbot申请免费SSL证书，修改Nginx配置支持HTTPS，将前端和后端访问切换为HTTPS
• 移除开发挂载卷：生产环境删除docker-compose.yml中./backend:/app和./frontend:/app的挂载配置，避免代码意外修改

5. 验证访问 #

使用云服务器的公网IP（或域名）访问http://<公网IP>:60，测试前端能否正常请求后端数据。

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