AWS not showing images on Django website deployed on heroku - python

I am trying to show my media files on a Django website hosted on Heroku via Amazon AWS S3. Currently, my settings for the AWS is:
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')
AWS_DEFAULT_ACL = None
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400',}
DEFAULT_FILE_STORAGE = 'register.storage_backends.MediaStorage'
And in my storage_backends.py I have:
from storages.backends.s3boto3 import S3Boto3Storage
class MediaStorage(S3Boto3Storage):
location = 'media'
file_overwrite = False
When I open my website and inspect the images I can even the url seems to be correct:
https://mybucket.s3.amazonaws.com/media/defaults/user/default_u_i.png?AWSAccessKeyId=...
However, I still cannot see the image and it shows me the default thumbnail. What am I doing wrong here? I have uploaded the files to my bucket and I have checked multiple times and they are in the correct directory.
Thanks for all the help in advance!

It seems that I had to add my REGION_NAME set as well so I have added:
AWS_S3_REGION_NAME = 'REGION_NAME' to my settings as well.

Related

how to uplaod image in django rest framework with heroku and aws s3 bucket storage

i am using heroku for my django rest framework project and i am using whitenoise storage but the problem with this is that after image uploading image it is disappear after some time
i want permanently image storage with aws s3 bucket help me with that
models.py
class UploadImage(models.Model):
img_id = models.AutoField(primary_key=True)
image = models.ImageField(upload_to='media/images/')
def __str__(self):
return str(self.image)
what changes i have to make to use and store the images in aws s3 bucket
requirements.txt
boto3==1.17.8
django-storages==1.11.1
or you can download using
pip install boto3
pip install django-storages
settings.py
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_ACCESS_KEY_ID = 'YOUR_AWS_ACCESS_KEY_ID'
AWS_SECRET_ACCESS_KEY = 'YOUR_AWS_SECRET_ACCESS_KEY'
AWS_STORAGE_BUCKET_NAME = 'YOUR_AWS_STORAGE_BUCKET_NAME'
AWS_QUERYSTRING_AUTH = False
apply this changes and you will good to go

Connect AWS s3 with django

I'm testing my django project on s3 locally. But when running the server it doesn't seem to be serving static files
AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.getenv('AWS_STORAGE_BUCKET_NAME')
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
# s3 static settings
AWS_LOCATION = 'static'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
But it doesn' t seem working
when I check my browser's console it shows http error code of 403 request forbidden when accessing to my static files. why this happens, should I change my s3 settings.
this error can be of the s3 side. check if you have permission to access objects and buckets. as i see your settings, you are using django-storages. not django-s3-storages. their are some changes in between.
for me personally, in case of django-storages; by adding region name to the setting helped.so make sure that you also included
AWS_S3_REGION_NAME = 'the region here'
hope it works for you too.

Serving static files from S3 bucket not working?

I have configured an S3 bucket to store and serve static and media files for a Django website, currently just trying to get the static files needed for the admin pages and all that.
Here is all the static and AWS config info in my settings file:
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'config.storage_backends.MediaStorage'
#used to authenticate with S3
AWS_ACCESS_KEY_ID = 'AKIAWWJOJKZGFSJO2UPW' #not real one
AWS_SECRET_ACCESS_KEY = 'KNg1z5wXWiDRAIh4zLiHgbD2N3wtWZTK' #not real one
#for endpoints to send or retrieve files
AWS_STORAGE_BUCKET_NAME = 'my-static' #not real bucket name
AWS_DEFAULT_ACL = None
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400',}
AWS_LOCATION = 'static'
STATIC_ROOT = 'static'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'config/static'),
]
Of course I replaced any sensitive variables with fake ones for the purpose of this post. I have gone through many tutorials and other posts and I seem to have my STATIC_URL configured correctly but whenever I runserver and go to the admin pages, none of the css is applied. I do not think it is properly retrieving the static files (they are all uploaded to the S3 bucket) from the bucket, but I am stuck on what to do.
I am sure you might have missed some configurations like public and static file hosting on your s3 bucket.
Please go through this article Using Amazon S3 to Store your Django Site's Static and Media Files
I have personally tried this and it worked for me. The article explains every step.

Upload to S3 from Django admin

I've got my django app setup to use S3 using storages and boto. Using collectstatic, I was able to move my static assets to S3. However, I need to also store the image files uploaded from Django Admin to S3.
I used the django-s3direct package from here. I was able to set it up correctly and the upload seems to work. However, on loading the template, the uploaded image is not served.
My Settings.py:
STATICFILES_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
AWS_ACCESS_KEY_ID = 'ACCESS_KEY'
AWS_SECRET_ACCESS_KEY = 'SECRET_KEY'
AWS_STORAGE_BUCKET_NAME = 'bucketname'
S3DIRECT_ENDPOINT = 's3.amazonaws.com' # http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region
S3DIRECT_DIR = 's3direct' # (optional, default is 's3direct', location within the bucket to upload files)
S3DIRECT_UNIQUE_RENAME = False # (optional, default is 'False', gives the uploaded file a unique filename)
Models.py:
class BannerAds(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=255)
phone = models.BigIntegerField(max_length=20)
image = S3DirectField(upload_to='s3direct')
What you need to do is set up media files, which include uploades.
There are several ways to do this, I used django-storages
Among other things, you have to change your urls.py:
urlpatterns = [
...
] + + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and yes you have to add a setting for MEDIA_ROOT as well.
But the big thing is media files, google that and you'll be on your way.

Error when trying to compress static files when using django-storages and django-compressor together

I have setup an AWS S3 bucket in order to transfer my static files in a remote CDN using the application django-storages,
everything worked fine until I tried to compress my static files before uploading to S3 using django_compressor.
I have setup all the variables according django_compressor documentation for django-storages (https://django_compressor.readthedocs.org/en/latest/remote-storages/index.html)
I uploaded all the files in S3 using 'manage.py collectstatic' then:
When I do 'manage.py compress' I get this error:
CommandError: An error occured during rendering ../templates/base.html: 'https://my_bucket.s3.amazonaws.com/css/bootstrap.2.3.1.css' isn't accessible via COMPRESS_URL ('https://my_bucket.s3-external-3.amazonaws.com/') and can't be compressed
What's wrong with my setup?
Here is my settings.py configuration for django-storages and django_compressor:
COMPRESS_URL = 'https://mybucket_name.s3-external-3.amazonaws.com/'
STATIC_URL = COMPRESS_URL
DEFAULT_FILE_STORAGE = 'my_project.boto_custom.CachedS3BotoStorage'
AWS_ACCESS_KEY_ID = 'XXX'
AWS_SECRET_ACCESS_KEY = 'XXX'
AWS_STORAGE_BUCKET_NAME = 'mybucket_name'
COMPRESS_ROOT = STATIC_ROOT
COMPRESS_STORAGE = 'my_project.boto_custom.CachedS3BotoStorage'
STATICFILES_STORAGE = 'my_project.boto_custom.CachedS3BotoStorage'
COMPRESS_OFFLINE = True
Thanks for your help
I fixed it by adding one variable and it worked:
AWS_S3_CUSTOM_DOMAIN = 'my_bucket.s3-external-3.amazonaws.com'
If you have separate S3 buckets for static and media you can also put it in your subclass of S3BotoStorage like so:
class CachedS3BotoStorage(S3BotoStorage):
custom_domain = 'my_bucket.s3-external-3.amazonaws.com'
(or better yet set it to settings.AWS_S3_CUSTOM_STATIC_DOMAIN or something)

Categories