Serving media files and static files from Amazon S3

Using Django Deployment
1

Hi there,

I’ve got a question about serving media files and static files from an S3 bucket. I’d be extremely grateful if anyone could give some pointers about how to solve the problem.

Background
• I’ve completed a number of tutorials to get a basic idea for how Django works. To cement what I’ve learnt, I’ve decided to repurpose a lot of the concepts into a simple web app and deploy it online.
https://tbdcl-allconf-production.herokuapp.com/
• The site shows a list of conferences, which have a one-to-many relationship with a conference series (e.g. DjangoCon parent with DjangoCon 2019 and DjangoCon 2020 as children).
• The conference series has a logo image as part of its model. The image is displayed as part of a card in a list of all conferences.
• These are all added through the admin, as it’s not intended for users to be able to update the conference list.

Problem
• Everything worked fine when working locally, BUT when I deployed to Heroku the logos would not display (even though the files were visible in the admin view in the deployed app).
• A quick search revealed that Heroku cannot serve media files, so I chose the (seemingly) most common approach – adding boto3 and django-storages to my project, and pointing it at an Amazon S3 bucket.
• I followed a number of popular tutorials to set this up.
• However it looks like the app is still looking at “itself” for the media and static files, not the S3 bucket. I can tell this because:

  1. Simply, the media files and static files are not in the S3 bucket, even though I’ve followed the tutorials and added the AWS credentials to Django.
  2. When I open the developer view in Chrome, the source for the images + CSS files looks like the local path (there’s no reference to “aws” or “s3” in each file’s path).

Possible solutions
• After doing some more digging + basic troubleshooting, I think it could be a couple of things:

  1. Whitenoise is still set up in my project (from when I was working locally with only static files). Should this be removed? Is it conflicting with boto3 and django-storages?
  2. Do I need to update my models in some way (e.g. with the def __save__ method)?
  3. Do I need to migrate the database (or any other database task) to update the URLs for each model’s image file?
  4. Is the fact that the app is running in a Docker container causing an issue with communicating “out” to the S3 bucket?

Although to be honest, I’m completely lost! I can’t find any resources online that explain this issue and how to resolve it.

I’d be extremely grateful for any advice.

I haven’t seen anyone post long tracts of code in this forum, so if you need to see the settings.py, storage_backends.py and conferences/models.py files, they’re in this stack overflow ticket.

Many thanks!

1 Like
2

Hiya. Difficult to know without being able to debug.

But Yes. Disable Whitenoise.
Then run collectstatic and see what happens. If the files aren’t getting to S3 there’s no way they can be served.

In my experience django-storages is great, and works when configured correctly. So I’d say you need to go back to the beginning and double-check that all the settings are in place correctly.

Sorry I can’t be more help.

Kind Regards,

Carlton

3

Hi Carlton, thanks very much for your response. Apologies for the slow reply - I’ve been working on this in my spare time.

You were right, I disabled Whitnoise and set up an S3 bucket for the static files to be served from. Took a lot of tweaking to figure out the correct configuration but it’s all working now.

Many thanks,
Tom

1 Like
4

Hi th-moore, I am also facing the same issue. It would be really helpful if you guide me on how to setup S3 bucket for static and media files.