Frontend in Docker container can't reach localhost:8000 on the host.
Implemented Docker networking fix using host.docker.internal.
Changes:
• Updated frontend/src/App.tsx to use host.docker.internal:8000 in production
- Automatically switches between localhost:8000 (dev) and host.docker.internal:8000 (Docker)
• Added frontend/.env.example with API configuration
• Updated docker-compose.yml frontend environment:
- Added VITE_API_URL=http://host.docker.internal:8000
- Added comments explaining the networking approach
• Enhanced DOCKER_QUICK_START.md troubleshooting section
- Added detailed networking explanation
- Instructions for verifying host.docker.internal works
- Linux-specific workarounds
How it works:
• Docker Desktop automatically maps host.docker.internal to localhost on the host machine
• Frontend (running in Docker) uses host.docker.internal:8000
• API & Consumer (running on host) listen on localhost:8000
• Both reference the same service, just from different network contexts
Workflow remains:
Terminal 1: docker compose up (infra + frontend in Docker)
Terminal 2: uvicorn api.main:app --reload (your host machine)
Terminal 3: cd consumer && python pipeline.py (your host machine)
Frontend automatically reaches API at http://host.docker.internal:8000
without any manual configuration needed.
Co-authored-by: Copilot <[email protected]>
82 lines
2.0 KiB
YAML
82 lines
2.0 KiB
YAML
version: "3.8"
|
|
|
|
services:
|
|
zookeeper:
|
|
image: confluentinc/cp-zookeeper:7.5.0
|
|
environment:
|
|
ZOOKEEPER_CLIENT_PORT: 2181
|
|
ZOOKEEPER_TICK_TIME: 2000
|
|
ports:
|
|
- "2181:2181"
|
|
networks:
|
|
- payguard-network
|
|
|
|
kafka:
|
|
image: confluentinc/cp-kafka:7.5.0
|
|
depends_on:
|
|
- zookeeper
|
|
ports:
|
|
- "9092:9092"
|
|
environment:
|
|
KAFKA_BROKER_ID: 1
|
|
KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
|
|
KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:29092,PLAINTEXT_HOST://localhost:9092
|
|
KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
|
|
KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
|
|
KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
|
|
KAFKA_AUTO_CREATE_TOPICS_ENABLE: "true"
|
|
networks:
|
|
- payguard-network
|
|
healthcheck:
|
|
test: kafka-broker-api-versions --bootstrap-server localhost:9092
|
|
interval: 10s
|
|
timeout: 5s
|
|
retries: 5
|
|
|
|
redis:
|
|
image: redis:7.2-alpine
|
|
ports:
|
|
- "6379:6379"
|
|
networks:
|
|
- payguard-network
|
|
healthcheck:
|
|
test: redis-cli ping
|
|
interval: 10s
|
|
timeout: 5s
|
|
retries: 5
|
|
volumes:
|
|
- redis_data:/data
|
|
|
|
frontend:
|
|
build:
|
|
context: ./frontend
|
|
dockerfile: Dockerfile
|
|
ports:
|
|
- "3000:3000"
|
|
networks:
|
|
- payguard-network
|
|
depends_on:
|
|
kafka:
|
|
condition: service_healthy
|
|
redis:
|
|
condition: service_healthy
|
|
healthcheck:
|
|
test: wget --quiet --tries=1 --spider http://localhost:3000 || exit 1
|
|
interval: 10s
|
|
timeout: 5s
|
|
retries: 5
|
|
environment:
|
|
- NODE_ENV=production
|
|
- VITE_API_URL=http://host.docker.internal:8000
|
|
restart: unless-stopped
|
|
# NOTE: Frontend connects to API running on host machine via host.docker.internal
|
|
# This allows docker compose up to start infrastructure + frontend,
|
|
# while API and Consumer run locally on the same machine
|
|
|
|
volumes:
|
|
redis_data:
|
|
|
|
networks:
|
|
payguard-network:
|
|
driver: bridge
|