Unable to load css while running django in docker - django

Question

My docker-compose.yml
# pull official base image
FROM python:3.10-alpine
# set work directory
WORKDIR .
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt .
RUN pip install -r requirements.txt
# copy project
COPY . .
My Dockerfile is as follows:
services:
app:
build:
context: .
ports:
- "8000:8000"
command: >
sh -c "python3 manage.py runserver 0.0.0.0:8000"
redis:
image: redis:alpine
celery:
restart: always
build:
context: .
command: celery -A search worker -l info
depends_on:
- redis
- app
The tree structure of my project directory is as follows:
├── Dockerfile
├── Procfile
├── books
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── __init__.py
│ ├── models.py
│ ├── templates
│ │ └── search.html
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── docker-compose.yml
├── manage.py
├── requirements.txt
├── search
│ ├── __init__.py
│ ├── asgi.py
│ ├── celery.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── templates
├── base.html
├── home.html
└── registration
├── login.html
└── logout.html
My settings is as follows:
ALLOWED_HOSTS = ['0.0.0.0', '127.0.0.1', 'localhost']
DISABLE_COLLECTSTATIC = 0
# Application definition
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"books.apps.BooksConfig",
"debug_toolbar",
"corsheaders",
"django.contrib.postgres",
"django_celery_beat",
]
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"corsheaders.middleware.CorsMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
"debug_toolbar.middleware.DebugToolbarMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware",
]
ROOT_URLCONF = "search.urls"
LOGIN_REDIRECT_URL = "home"
LOGOUT_REDIRECT_URL = "home"
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'http://localhost:8000',
'https://localhost:8000',
'http://0.0.0.0:8000',
'https://0.0.0.0:8000',
'http://127.0.0.1:8000',
'https://127.0.0.1:8000'
)
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [BASE_DIR / "templates"],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
STATIC_URL = "/static/"
If I access http://0.0.0.0:8000/admin/, the console says the following and the css does not load.
The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.

Answer 1

You may need to add SECURE_CROSS_ORIGIN_OPENER_POLICY = None to your settings file.
Also, check to see that your middleware is declared in the correct order according to the whitenoise and corsheaders docs. For example:
MIDDLEWARE = [
...
'django.middleware.security.SecurityMiddleware',
'corsheaders.middleware.CorsMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
...
]
The WhiteNoiseMiddleware doesn't look like it should be at the bottom of the list, according to their docs.

Answer 2

In your settings file:
Add like this to load static.
STATIC_URL = '/static/static/'
STATIC_ROOT = '/vol/web/static'

Answer 3

I don't know if this is the best answer but this is what I have after trying a lot of things.
I used https://stackoverflow.com/a/39291292
It finally worked