Django static files are not loaded when deploying on Heroku using Docker and Whitenoise

Question

I'm trying to deploy a django app on Heroku (using Whitenoise), and all works fine except for the static files. The sample project just shows a header "Home" on the front page. If the css file is loaded correctly then the header will have the red colour, otherwise it will be black.

I got the above project to work in a virtualenv, a Docker container, with DEBUG=False, but I could not make it work on Heroku for some reason (The header would be Red if the CSS loaded correctly).

I tried to use the django-heroku as suggested by the Heroku docs but it starts throwing 500 server error, and when checking the heroku logs it says manifest not found for the css file, which seems to be because it sets STATICFILES_STORAGE to a different value.

Is there something setup incorrectly in the settings or the yml files? Or perhaps because I'm deploying a Docker file (as opposed to a Procfile) I need to use different settings?

Update 1:

As suggested in the comments. I tried to follow what's done in this tutorial, which has two additional things done:

1. Setting STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
2. Running heroku plugins:install @heroku-cli/plugin-manifest

When doing this, now I get a different HTTP 500 error:

/usr/local/lib/python3.7/site-packages/whitenoise/base.py:115: UserWarning: No directory at: /django-heroku-staticfiles/staticfiles/

Now I think the problem is clear. So I started running some commands on the heroku instance:

$ heroku run ls -l /django-heroku-staticfiles
Running ls -l /django-heroku-staticfiles on ⬢ evening-lowlands-39080... up, run.5553 (Free)
total 160
-rw------- 1 u35232 dyno    179 May 30 12:21 Dockerfile
-rw------- 1 u35232 dyno 131072 May 30 12:21 db.sqlite3
-rw------- 1 u35232 dyno    235 May 30 12:21 docker-compose.yml
drwx------ 2 u35232 dyno   4096 May 30 12:21 hello_project
-rw------- 1 u35232 dyno    182 May 30 12:21 heroku.yml
-rwx------ 1 u35232 dyno    633 May 30 12:21 manage.py
drwx------ 4 u35232 dyno   4096 May 30 12:21 pages
-rw------- 1 u35232 dyno     93 May 30 12:21 requirements.txt
drwx------ 2 u35232 dyno   4096 May 30 12:21 templates

$ heroku run python manage.py collectstatic --clear --noinput
Running python manage.py collectstatic --clear --noinput on ⬢ evening-lowlands-39080... up, run.9686 (Free)

131 static files copied to '/django-heroku-staticfiles/staticfiles', 413 post-processed.

$ heroku run ls -l /django-heroku-staticfiles
Running ls -l /django-heroku-staticfiles on ⬢ evening-lowlands-39080... up, run.3303 (Free)
total 160
-rw------- 1 u20456 dyno    179 May 30 12:21 Dockerfile
-rw------- 1 u20456 dyno 131072 May 30 12:21 db.sqlite3
-rw------- 1 u20456 dyno    235 May 30 12:21 docker-compose.yml
drwx------ 2 u20456 dyno   4096 May 30 12:21 hello_project
-rw------- 1 u20456 dyno    182 May 30 12:21 heroku.yml
-rwx------ 1 u20456 dyno    633 May 30 12:21 manage.py
drwx------ 4 u20456 dyno   4096 May 30 12:21 pages
-rw------- 1 u20456 dyno     93 May 30 12:21 requirements.txt
drwx------ 2 u20456 dyno   4096 May 30 12:21 templates

Why is staticfiles not getting created? Maybe I need to run the command through Docker? Sorry I'm new to Docker, Django, and Heroku, so I might be missing something obvious.

Answer 1

Thanks to @Original BBQ Sauce, this SO question, and this Reddit post the problem is finally solved. It's related to where/when we run collectstatic. Initially I was running it as a release command in the heroku.yml file, which was not creating the staticfiles directory for some reason. I was doing it this way as is done in the Django for Professionals book.

Now, if that command is run in the Dockerfile instead, the staticfiles directory is created and all should work fine. The repo now has the new, working settings.