Django staticfiles not loading

I am using s3 to serve my static files. The files are present on the s3 bucket but when i run my website those files do not load up. I have installed django-storages and boto3 for this.
This is what is see


when i inspect the image i can see that the image url is pointing towards the s3 aws bucket but for some reason the css and images are not being shown on the website itself.
here is my setting.py

"""
Django settings for vedicmiracles project.

Generated by 'django-admin startproject' using Django 3.1.4.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'wzt6me7kvq5-x+%ni89_ikv$xm*-qk=-45=w93c1im6f5zx3yu'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',
    'accounts',
    'blog',
    'tinymce',
    'storages',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    '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',
]

ROOT_URLCONF = 'vedicmiracles.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(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',
            ],
        },
    },
]

WSGI_APPLICATION = 'vedicmiracles.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

# STATIC_ROOT = os.path.join(BASE_DIR, 'assets')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'static/media')

AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = ''

AWS_S3_REGION_NAME = 'ap-south-1'
AWS_SIGNATURE_VERSION = 's3v4'

AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

TINYMCE_DEFAULT_CONFIG = {
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 20,
    'selector': 'textarea',
    'theme': 'silver',
    'plugins': '''
            textcolor save link image media preview codesample contextmenu
            table code lists fullscreen  insertdatetime  nonbreaking
            contextmenu directionality searchreplace wordcount visualblocks
            visualchars code fullscreen autolink lists  charmap print  hr
            anchor pagebreak
            ''',
    'toolbar1': '''
            fullscreen preview bold italic underline | fontselect,
            fontsizeselect  | forecolor backcolor | alignleft alignright |
            aligncenter alignjustify | indent outdent | bullist numlist table |
            | link image media | codesample |
            ''',
    'toolbar2': '''
            visualblocks visualchars |
            charmap hr pagebreak nonbreaking anchor |  code |
            ''',
    'contextmenu': 'formats | link image',
    'menubar': True,
    'statusbar': True,
}






EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''

Does this mean that they’re retrieving the images directly from AWS and not through your site? If so, do you have your s3 bucket configured for “Static Website Hosting” as being enabled?

(Can you share one of the URLs attempting to be referenced? Any one would provide a good example.)

My bucket policy is

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::vedicmiracles-staticfiles/*"
        }
    ]
}

and the cors files is

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

the url for the image is https://vedicmiracles-staticfiles.s3.amazonaws.com/Image/logo.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASFF7NV6BDU62DBB4%2F20201225%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20201225T182755Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=2487e1259b2236eed264b11ad7f541590bfec826143162c730af21aad55d80d7
and for the css file is
https://vedicmiracles-staticfiles.s3.amazonaws.com/style.css?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASFF7NV6BDU62DBB4%2F20201225%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20201225T182755Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=9c976ea13e83a018ab208ecfbd054a3cb49e61393420b2dd21d98344d996ff9d

I don’t really understand what is happening because when I run python manage.py collectstatic all the static files are being uploaded to the s3 bucket normally it is just when I try to run the server using python manage.py runserver those css and images files do not work.

If you look at your browser’s developer tools, the network requests for those files, what do you see?

For example, your links have expired, so the links you posted a couple hours ago no longer work. If I go to one of those links directly, I get:

<Error>
<Code>AccessDenied</Code>
<Message>Request has expired</Message>
<X-Amz-Expires>3600</X-Amz-Expires>
<Expires>2020-12-25T19:27:55Z</Expires>
<ServerTime>2020-12-25T21:21:14Z</ServerTime>
<RequestId>314CBBF2733D83A7</RequestId>
<HostId>6/hFilKjyLgtNBgL22k7KyM+ZlGZmwAuZTSc6bmiWY1+sBdwdOmIh4CHZhvMd4P8CbgC6TIm5Fo=</HostId>
</Error>

You should be able to see some type of error message either in your browser’s tools, or, if you copy/paste the url to a different tab to make that an individual request, get the full error message there.