Docker部署Angular+Django+PostgreSQL栈：前端无法访问求助

1. 端口映射与网络连通性验证 #

• 核对docker-compose.yaml中前端服务的端口映射规则，确保宿主机端口（如4200）与容器端口正确绑定，示例：

  frontend:
    build: ./frontend
    ports:
      - "4200:4200" # 确认宿主机该端口未被占用，且容器内服务监听4200端口
    networks:
      - app-network
  

• 执行docker ps查看前端容器的端口状态，确认存在0.0.0.0:4200->4200/tcp或localhost:4200->4200/tcp的映射记录
• 在宿主机终端执行curl localhost:4200或telnet localhost 4200：
  • 若返回连接拒绝，说明容器内服务未正常启动或未监听指定端口
  • 若返回HTML内容但浏览器无法渲染，检查浏览器控制台的网络请求错误日志

2. Angular容器内服务启动配置检查 #

• 查看前端Dockerfile，确认启动命令绑定到0.0.0.0（仅绑定localhost会导致容器外部无法访问）：

  CMD ["ng", "serve", "--host", "0.0.0.0", "--port", "4200"]
  

• 检查angular.json中serve配置的host字段是否为0.0.0.0，避免服务仅监听容器内部回环地址

3. 跨域与后端接口适配 #

• Docker环境下前后端处于不同容器，需修改Angular环境配置environment.ts，将API请求地址指向后端服务的容器名（而非localhost）：

  export const environment = {
    production: false,
    apiUrl: 'http://backend:8000/api/' // backend为docker-compose中后端服务的名称
  };
  

• 检查Django的settings.py是否配置CORS允许前端访问：

  INSTALLED_APPS = [
      # ...
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ...
  ]
  
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:4200",
      "http://frontend:4200", // 容器间通信的域名
  ]
  

4. 容器日志与服务状态排查 #

• 查看前端容器日志，排查编译或启动错误：

  docker logs <frontend-container-id>
  

• 查看后端容器日志，确认Django服务启动正常、数据库连接成功：

  docker logs <backend-container-id>
  

• 进入前端容器内部，验证服务是否正常运行：

  docker exec -it <frontend-container-id> bash
  curl localhost:4200 # 容器内部访问，确认服务是否启动
  

5. Docker网络配置校验 #

• 确认docker-compose.yaml中所有服务都加入同一自定义网络：

  networks:
    app-network:
      driver: bridge
  

• 执行docker network inspect <network-name>，检查前后端容器是否在同一网络内，且可通过容器名互相访问

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