如何使 django 上传的图像显示在 CloudFront 前端 + Beanstalk 后端答案

【问题标题】：How to make django uploaded images to display in CloudFront frontend + Beanstalk Backend如何使 django 上传的图像显示在 CloudFront 前端 + Beanstalk 后端
【发布时间】：2020-10-26 03:02:20
【问题描述】：

我创建了一个使用 AWS Beanstalk 的后端 django 应用程序，以及一个使用 cloudfront（加上 S3）部署的前端 reactjs 应用程序

我在后端有一个模型

class EnhancedUser(AbstractUser):
    # some other attributes
    picture = models.ImageField(blank=True)

我的 settings.py 有

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

由于我使用的是 cloudfront，如果我只是将 MEDIA_URL 设置为 /media/，它只会将 /media/ 附加到我的 cloudfront url，所以我必须将它硬编码到我的后端 url

然后，按照 django 文档，我将静态部分添加到我的 urls.py 中

urlpatterns = [
    path('admin/', admin.site.urls),
    # some other urls
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

请注意，django 文档确实提到我们不能为MEDIA_URL 使用绝对网址，但我目前没有其他解决方案

当我上传我的图片时，它没有存储在正确的位置，但我无法使用 url 打开它。它返回一个 404 表示 img 的 url 不是 urls 列表的一部分

我的问题是：

如何设置才能显示图片
由于图像将通过用户/管理员进行更新，因此这些图像将存储在 beanstalk 中创建的 EC2 实例中，因此每次部署时，我认为它们都会被擦除。如何防止这种情况发生？

【问题讨论】：

你检查过 django-storage 吗？ django-storages.readthedocs.io/en/latest
这篇关于如何在 S3 中保存和提供 django 图像的教程应该会有很大帮助：testdriven.io/blog/…

标签： django amazon-web-services amazon-elastic-beanstalk

【解决方案1】：

看看使用django-storages 来保存您的上传。我使用 S3 存储 django/docker/EB 部署的上传，并包含看起来像这样的 django 设置（我将它们保存在settings/deployment.py）：

if 'AWS_ACCESS_KEY_ID' in os.environ:
    # Use Amazon S3 for storage for uploaded media files
    # Keep them private by default
    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
    # Amazon S3 settings.
    AWS_ACCESS_KEY_ID = os.environ["AWS_ACCESS_KEY_ID"]
    AWS_SECRET_ACCESS_KEY = os.environ["AWS_SECRET_ACCESS_KEY"]
    AWS_STORAGE_BUCKET_NAME = os.environ["AWS_STORAGE_BUCKET_NAME"]
    AWS_S3_REGION_NAME = os.environ.get("AWS_S3_REGION_NAME", None)
    AWS_S3_SIGNATURE_VERSION = 's3v4'
    AWS_AUTO_CREATE_BUCKET = False
    AWS_HEADERS = {"Cache-Control": "public, max-age=86400"}
    AWS_S3_FILE_OVERWRITE = False
    AWS_DEFAULT_ACL = 'private'
    AWS_QUERYSTING_AUTH = True
    AWS_QUERYSTRING_EXPIRE = 600
    AWS_S3_SECURE_URLS = True
    AWS_REDUCED_REDUNDANCY = False
    AWS_IS_GZIPPED = False

    MEDIA_ROOT = '/'
    MEDIA_URL = 'https://s3.{}.amazonaws.com/{}/'.format(
        AWS_S3_REGION_NAME, AWS_STORAGE_BUCKET_NAME)
    USING_AWS = True

【讨论】：