简体   繁体   中英

Heroku problems serving static files with Django

I have been trying for a while to serve the static files during production with heroku but it won't work.

I'm using Django 1.8 with python 2.7.

I have tried many things:

  • Changing the route for the statics
  • I have used a server with AWS s3, it will send the staticfiles with collect static to the server, however when you open the page it won't load.
  • I have followed the django documentation as well as herokus.

And I have tried these solutions:

And many others.

My current settings for statics is

AWS_STORAGE_BUCKET_NAME = 'BUCKET_NAME'
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_PRELOAD_METADATA = True
AWS_S3_SECURE_URLS = True
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
STATIC_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN
STATICFILES_STORAGE = 'storages.backends.s3boto.S3BotoStorage'

Example of templates

<!DOCTYPE html>
{% load static from staticfiles %}
<html>

<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>

<body>

  <img src="{% static "images/404.jpg" %}" alt="Page Not Found (404)."  style="position: absolute; left: 50%; top: 50%; margin-left: -285px; margin-top: -190px;">
  <img src="{% static "medcstatic/images/404.jpg" %}" alt="Page Not Found (404)." style="position: absolute; left: 50%; top: 50%; margin-left: -285px; margin-top: -190px;">

</body>

</html>

My urls looks like this

urlpatterns = [..
]
if not settings.DEBUG:
    urlpatterns += (r'^static/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': settings.STATIC_ROOT}),

If anybody could help me I would really appreciate it.

So I finally fix it and figure that I should leave the answear here. I essentially redid the whole thing and follow this link https://www.caktusgroup.com/blog/2014/11/10/Using-Amazon-S3-to-store-your-Django-sites-static-and-media-files/

Just make sure that from the beggining you set the permissions right in AWS.

{
"Statement": [
    {
      "Sid":"PublicReadForGetBucketObjects",
      "Effect":"Allow",
      "Principal": {
            "AWS": "*"
         },
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::BUCKET-NAME/*"
      ]
    },
    {
        "Action": "s3:*",
        "Effect": "Allow",
        "Resource": [
            "arn:aws:s3:::BUCKET-NAME",
            "arn:aws:s3:::BUCKET-NAME/*"
        ],
        "Principal": {
            "AWS": [
                "USER-ARN"
            ]
        }
    }
]

}

And the right cors settings:

   <CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
   </CORSConfiguration>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM