为什么静态文件和图像不适用于我的 django s3 存储桶项目？

Question

在我的本地 django 项目中尝试使用 s3 存储桶时，它不起作用。将静态文件和图像移动到 s3 存储桶后，它不会渲染它们。

我的项目结构是这样的：

Project
   |-> app-name
   |-> static
   |      |-> img "folder of png images"
   |      |-> app-name
   |              |-> css "folder contain all css files"
   |              |-> js "folder contains all js files"
   |              |-> img "contains images used for styling"
   |-> project name
   |-> manage.py

在settings.py“媒体、静态和s3存储桶设置是这样设置的”：

STATIC_URL = '/static/'

MEDIA_URL = '/img/'

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

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


AWS_ACCESS_KEY_ID = '***************'
AWS_SECRET_ACCESS_KEY = '***************'
AWS_STORAGE_BUCKET_NAME = 'bucket-name'
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None

AWS_S3_HOST = 's3.us-east-2.amazonaws.com'
AWS_S3_REGION_NAME = 'us-east-2'

AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

当我尝试检查元素以查看图像中的 src 或 css 链接时，我可以看到它们是这样的：

“https://bucket-name.s3.amazonaws.com/gallery/css/bootstrap.min.css”或图片“https://bucket-name.s3.amazonaws.com/stockholm_Samit.jpg”

你能帮我解决这个问题吗？

Answer 1

结构在某处搞砸了。根据给出的信息，以下可能会导致问题。

这是不正确的：

STATIC_URL = '/static/' 

应该是：

STATIC_URL = AWS_S3_CUSTOM_DOMAIN + '/static/' 

当您检查元素时，它们应该具有这种格式。：

https://bucket-name.s3.amazonaws.com/app-name/css/bootstrap.min.css

https://bucket-name.s3.amazonaws.com/img/stockholm_Samit.jpg

对于第一个链接，如果应用名称是“画廊”，则格式应该是正确的。如果上面没有解决这个问题，你应该确保你的 BASE_DIR 变量是正确的。

BASE_DIR = Path(__file__).resolve().parent.parent 可能需要： BASE_DIR = Path(__file__).resolve().parent 反之亦然。

此外，当您上传到 S3 时，您不想上传静态文件夹。 （不要这样做）：

|-> static
    |    |-> img "folder of png images"
    |    |-> app-name
    |        |-> css "folder contain all css files"
    |        |-> js "folder contains all js files"
    |        |-> img "contains images used for styling"

您只想上传：

|-> img "folder of png images"
|-> app-name
|-> css "folder contain all css files"
    |-> js "folder contains all js files"
    |-> img "contains images used for styling"

对于第二个链接，

https://bucket-name.s3.amazonaws.com/stockholm_Samit.jpg

您应该转到您的模板并确保您的图像标签指向正确的图像：

src="{% static 'img/stockholm_Samit.jpg' %}

此外，您不希望将媒体根目录放在静态文件夹中。您的静态文件夹应包含静态文件，即不会更改的文件。您应该有一个单独的媒体文件夹来存放动态文件，通常由您的应用程序的用户生成。你可以在这里阅读更多内容：https://browniebroke.com/blog/static-vs-media-in-django/#:~:text=Static%20files%20are%20part%20of,or%20users%20of%20your%20application。

Answer 2

如果您的存储桶名称不是“bucket-name”，请确保在一行中指定您的存储桶的存储桶名称：

AWS_STORAGE_BUCKET_NAME = 'enter-your-bucket-name'