在 Elastic Beanstalk Aws React Django 上托管站点时如何从单独的 S3 存储桶加载 static 文件

Question

Setup: React+Django hosted on Elastic Beanstalk. Static files hosted on separate S3 Bucket.

I'm trying to load an image using src="/static/images/logo.png" .

In development it works perfectly, but in production it sends a request to XXX.elasticbeanstalk.com/static/images/logo.png while it should be requesting Bucket.amazonaws.com/static/images/logo.png .

Meanwhile the user uploaded media is working perfectly for both POST and GET requests, images are stored and fetched from the Bucket /media/ path. I want to avoid conditionally coding the absolute url path depending on the environment.

I have a django production_settings.py file:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_ROOT = os.path.join(BASE_DIR, "..", "www", "static")
STATIC_URL = '/static/'

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

AWS_STORAGE_BUCKET_NAME = '****************'
AWS_S3_REGION_NAME = '****************' 
AWS_ACCESS_KEY_ID = '****************'
AWS_SECRET_ACCESS_KEY = '****************'


AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME



STATICFILES_LOCATION = 'static'
STATICFILES_STORAGE = 'custom_storages.StaticStorage'

MEDIAFILES_LOCATION = 'media'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'

custom_storages.py :

from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage


class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATION


class MediaStorage(S3Boto3Storage):
    location = settings.MEDIAFILES_LOCATION

Thanks

Answer 1

It seems like your STATIC_URL set incorrectly. It refers to your web app project path instead of S3 bucket URL. You can try using this below:

STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, STATICFILES_LOCATION)

Answer 2

What you can try..

1. Make sure you have the right S3 Permissions and Policy in place. Access 'Policy' via permissions tab in AWS S3 console for your specific bucket.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/*"
        },
        {
            "Sid": "Statement2",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/images/"
        }
    ]
}

2. Install WhiteNoiseMiddleware & django-storages in your project environment.

pip install whitenoise
pip install django-storages

3. Add the following to MIDDLEWARE= in settings.py

'whitenoise.middleware.WhiteNoiseMiddleware',

4. Following additions in settings.py are required to handle URLs from S3 correctly. The handling is done by django middleware & django-storages automatically

STATICFILES_LOCATION = 'static'
MEDIAFILES_LOCATION = 'media'

AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % os.environ['BUCKET_NAME']
AWS_ACCESS_KEY_ID = os.environ['AWS_KEY']
AWS_SECRET_ACCESS_KEY = os.environ['AWS_ACC_KEY']
AWS_STORAGE_BUCKET_NAME = os.environ['BUCKET_NAME']
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3StaticStorage'

MEDIA_ROOT = os.path.join (BASE_DIR, 'static/images/')
STATIC_ROOT = os.path.join (BASE_DIR, 'static')

STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, STATICFILES_LOCATION)
MEDIA_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, MEDIAFILES_LOCATION)

5. For aiming uploads into a precise S3 Bucket folder. (Additional)

In setting.py set media root:

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

In models.py use ImageFiled and add upload_to= takes in a folder name and creates it with the first upload::

image_variable = models.ImageField(null=True, default="{default_filename)", upload_to='uploads/') 

Reference: django-storages , whiteNoiseMiddelware , S3 Access Troubleshooting

Answer 3

You have already extended S3Boto3Storage and you could see there is multiple parameters, you could set additional env key for static storage class:

class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATION
    custom_domain = setting('AWS_S3_CUSTOM_DOMAIN_STATIC')