生产环境中Vue+Django DRF项目API端点与Nginx配置问题求助

AI 小北

2026-9-27

错误原因排查

前端硬编码请求地址0.0.0.0:8000，生产环境部署后地址动态变化，请求自然无法命中后端。
之前的Nginx配置逻辑错误：将根路径请求代理到容器内的localhost:8080，但前端容器内仅Nginx监听80端口，没有服务运行在8080，所以直接抛出连接拒绝错误。
Docker Compose前端端口映射错误：前端容器内Nginx监听80端口，原配置映射8080:8080无法对应容器内服务端口。

正确配置方案

1. 修改前端请求代码

删除硬编码的完整URL，改用相对路径，请求会自动适配当前部署环境的域名、端口，无需关心Azure的动态端口分配：

fetchSkillData: function () {
      // 改用相对路径，自动适配部署环境
      const apiUrl = "/api/skills";
      axios
        .get(apiUrl)
        .then((values) => {
          values.data.forEach((data) => {
            this.technologies.push(data);
          });
          // 加载动画关闭逻辑放到请求成功回调内，避免请求还未完成就关闭动画
          this.hideSpinner();
        })
        .catch(console.error);
    }

2. 修正Nginx配置

Nginx核心逻辑为：静态资源直接返回，/api开头的请求代理到后端Django服务，同一Docker网络下可直接通过Docker Compose的服务名django-backend访问后端：

events {
    worker_connections 1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;

        # 处理前端静态资源请求
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            # 适配Vue路由history模式，解决刷新404问题，使用hash路由可省略该行
            try_files $uri $uri/ /index.html;
        }

        # 代理API请求到后端Django服务
        location /api/ {
            # Docker内部网络直接用服务名访问，端口为后端容器内暴露的8000
            proxy_pass http://django-backend:8000/;
            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;
        }
    }
}

3. 修正Docker Compose配置

修正端口映射，关闭非必要的公网端口暴露，提升生产环境安全性：

version: "3"
services:
  vue-frontend:
    image: burakhanaksoy/vue-frontend:1.0
    ports:
      # 容器内Nginx监听80端口，映射到宿主机8080
      - 8080:80
    depends_on:
      - django-backend
  django-backend:
    image: burakhanaksoy/django-backend:1.0
    # 生产环境无需对外暴露8000端口，前端通过内部网络即可访问
    # ports:
    #   - 8000:8000
    depends_on:
      - mongodb
  mongodb:
    image: mongo
    # 生产环境禁止暴露数据库端口到公网
    # ports:
    #   - 27017:27017
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=password
    volumes:
      - mongo-data:/data/db
  # 生产环境建议删除mongo-express，避免数据库管理界面暴露到公网
  # mongo-express:
  #   image: mongo-express
  #   ports:
  #     - 8081:8081
  #   depends_on:
  #     - mongodb
  #   environment:
  #     - ME_CONFIG_MONGODB_ADMINUSERNAME=admin
  #     - ME_CONFIG_MONGODB_ADMINPASSWORD=password
  #     - ME_CONFIG_MONGODB_SERVER=mongodb
volumes:
  mongo-data:
    driver: local

附加生产环境优化建议

Django自带的runserver仅用于开发调试，生产环境建议替换为Gunicorn、uWSGI等生产级WSGI服务器，性能和稳定性更高。
Django配置中的ALLOWED_HOSTS需要添加你Azure部署的实际域名，禁止使用*通配符降低安全风险。
生产环境建议配置HTTPS，可通过Nginx加装SSL证书实现。

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