S3 + Cloudfront/CDN

Sharetribe Go Community Edition
1

Have set up Heroku deploy - struggling with S3 + CDN for assets.

config.yml:

  s3_upload_bucket_name: "bucket_name_uploads"
  s3_bucket_name: "bucket_name"
  aws_access_key_id: "MY_KEY"
  aws_secret_access_key: "MY_SECRET"
  asset_host: 'my-cloudfront-cdn-1.cloudfront.net'
  user_asset_host: 'my-cloudfront-cdn-2.cloudfront.net'

Without CDN, I was able to upload and get assets from my s3 buckets :smile:

With CDN, I’m getting console errors for assets such as:

GET https://images/listing_images/images/2/small_3x2/red-dress.jpg?1476304034 net::ERR_NAME_NOT_RESOLVED

So my CDN isn’t be prepended to the GET request.

I’m also getting error:

(index):1 Font from origin 'https://my-cloudfront-cdn-1.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-app.herokuapp.com' is therefore not allowed access.

So I think I’m setting up my Cloudfront distributions wrong. Can anyone assist in setting these up properly?

Cloudfront for ASSET_HOST :

Pasted image1940×523 45.9 KB

Cloudfront for USER_ASSET_HOST :

Pasted image1943×536 45.6 KB

I understand the headers I’ve put in are very open, just to try to get it to work based on this answer.

But are my origins wrong? Does one CDN need to point to a bucket and one to the site? Do they both need to point to buckets? Do they need to point to different buckets? Perhaps I am confused as to the asset process…

  • Assets upload direct to s3 buckets.
  • Assets are delivered via CDN to the browser, from the buckets. So does my CDN need to point to a bucket then?

Thanks for any help!

1 Like
2

Hi Jarvis,

The user_asset_host needs to be given as full URL, with http(s):// prepended. So in your case it should be https://my-cloudfront-cdn-2.cloudfront.net.

Is you have S3 uploads configured, then the origin for the user assets must be the S3 bucket, configured in s3_bucket_name. For CloudFront, you can easily do that by using “S3 Origin”, instead of custom one.

@rap1ds can you comment more about the font side of this?

Cheers,
Boyan

1 Like
3

Great thanks @blade, very helpful.

I’ll try changing that user_asset_host to the full URL and see how we go.

I did manage to get this working without the user_asset_host defined.

I pointed both Cloudfront distributions back to the site itself, but I’ll try pointing their origins to the s3 bucket and see how that goes.

Have not got the Cross-Origin Font thing figured out though, would definitely be keen to hear from @rap1ds. Have tried adding an nginx.conf with cross-origin headers as per this answer but still no joy.

Thanks guys.

4

Hi,

The origin of the first distribution (the one you use as asset_host) should be the heroku app. Only the second one should have the S3 bucket as origin.

Cheers,
Boyan

1 Like
5

Ah! that clears up a lot of confusion. I get it now :smile:

Thanks Boyan

1 Like