To make everything work, you need to create a config for your server (caddy, nginx) where the main domain will be "docker.for.mac.localhost". For this replace in baseURL "http://localhost/api" on "http://docker.for.mac.localhost/api"
docker-compose.yml
backend:
restart: always
image: backend
build:
dockerfile: backend.Dockerfile
context: .
environment:
# add django setting.py os.getenv("var") to bd config and ALLOWED_HOSTS CORS_ORIGIN_WHITELIST
DJANGO_ALLOWED_PROTOCOL: http
DJANGO_ALLOWED_HOSTS: docker.for.mac.localhost
POSTGRES_PASSWORD: 123456
POSTGRES_USER: user
POSTGRES_DB: bd_name
WAITDB: "1"
volumes:
- backend_static:/app/static
- backend_media:/app/media
depends_on:
- db
frontend:
restart: always
build:
dockerfile: frontend.Dockerfile
context: .
image: frontend
environment:
# replace baseURL for axios
API_URL: http://docker.for.mac.localhost/b/api
API_URL_BROWSER: http://docker.for.mac.localhost/b/api
NUXT_HOST: 0.0.0.0
depends_on:
- backend
caddy:
image: abiosoft/caddy
restart: always
volumes:
- $HOME/.caddy:/root/.caddy
- ./Caddyfile.local:/etc/Caddyfile
- backend_static:/static
- backend_media:/media
ports:
- 80:80
depends_on:
- frontend
- backend
- db
Caddyfile.local
http://docker.for.mac.localhost {
proxy /b backend:5000 {
header_upstream Host {host}
header_upstream X-Real-IP {remote}
header_upstream X-Forwarded-For {remote}
header_upstream X-Forwarded-Port {server_port}
header_upstream X-Forwarded-Proto {scheme}
}
proxy / frontend:3000 {
header_upstream Host {host}
header_upstream X-Real-IP {remote}
header_upstream X-Forwarded-For {remote}
header_upstream X-Forwarded-Port {server_port}
header_upstream X-Forwarded-Proto {scheme}
}
root /
log stdout
errors stdout
gzip
}
http://docker.for.mac.localhost/static {
root /static
}
http://docker.for.mac.localhost/media {
root /media
}
django settings.py
ALLOWED_HOSTS = [os.getenv("DJANGO_ALLOWED_HOSTS")]
CORS_ORIGIN_WHITELIST = [f'{os.getenv("DJANGO_ALLOWED_PROTOCOL")}://{os.getenv("DJANGO_ALLOWED_HOSTS")}']
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql_psycopg2",
"NAME": os.getenv("POSTGRES_DB"),
"USER": os.getenv("POSTGRES_USER"),
"PASSWORD": os.getenv("POSTGRES_PASSWORD"),
"HOST": "db",
"PORT": "5432",
}
}
nuxt.config.js (the baseURL variable will override API_URL of environment)
axios: {
baseURL: 'http://127.0.0.1:8000/b/api'
},