Hosting Static Assets on Amazon CloudFront

Hi,

I would like to host my app’s static assets on Amazon CloudFront.

Those files are obviously not uploaded by the user, they’re the files usually processed by Brunch on most installs.

I’m looking for documentation, tutorials and other references of people who previously build this.

So far I’ll probably be using exAWS and the :static_url setting, but as a newbie I would be more comfortable following on the steps of previous people :slight_smile:

1 Like

Your post does not say it, but the title does that your end goal is to serve assets using CloudFront. I do exactly the same, skipping the S3 for assets altogether.

You can create a distribution with origin being your own server, and not S3, and you can configure it to be cached on CloudFront. Effectively the asset is then downloaded to CF once, cached there, and your app does not need to do anything special. Maybe that suits your use case too :slight_smile:

2 Likes

Yup. That’s it.

Found this interesting article: https://shift.infinite.red/how-to-set-up-a-cdn-in-phoenix-af89074e0a62

4 Likes

Yes this is precisely how I have it set up and I am quute happy about it.

1 Like

Are you using SSL?

I’m possibly having the same issue described here.

CloudFront wasn’t able to connect to the origin.

1 Like

I am, with LetsEncrypt SSL and had no such issue…

2 Likes

I sorted it out dabbling with some CloudFront settings. Thank you :slight_smile:

1 Like

@hubertlepicki @jaysoifer Could you please shed some light on the method of using Cloudfront without uploading the assets on S3? When I go to the “Create distribution page”, from the “Origin Domain Name” dropdown, I am only given the options to select an existing S3 bucket, or an Elastic Load Balancer (which I don’t have). I’m currently using Heroku. Thanks a lot!

1 Like

TL;DR:
Not yet able to help you.

Long Version

This used to be my setup:
01. CloudFlare as a proxy.
02. CloudFront as a CDN.
03. S3 as Static Assets holding (planned, not yet).

My current setup:
01. CloudFlare as both a Proxy as well as a CDN.

So I ditched CloudFront in favor of the CloudFlare CDN and I’m not yet using Amazon’s S3.

So I cannot help you right now :slight_smile: I never tried using both S3 and CloudFront together…

Question:

Are you using S3 to store user uploaded content? OR do you have a deploy script that takes assets and uploads it to S3?

1 Like

I see. To answer your question: I have none of these. Assets are just bundled with the app and are served statically from the same Heroku instance. I do have a ServiceWorker that caches the assets locally, so I’m simply interested in optimising the first hit for users without SW cache.

After a bit of research, it seems that Heroku discourages uploading to S3:

https://devcenter.heroku.com/articles/using-amazon-cloudfront-cdn

Many developers make use of Amazon’s S3 service for serving static assets that have been uploaded previously, either manually or by some form of build process. Whilst this works, this is not recommended as S3 was designed as a file storage service and not for optimal delivery of files under load. Therefore, serving static assets from S3 is not recommended.

Interestingly, in the same article, they say:

You should type the domain name for your application as the 'Origin Domain Name’. By default, Amazon shows a list of your S3 buckets. This value can be overtyped.

I’m going to give that a go when I have a chance and will post if I make it work.

Two topics on a single question :smiley:

Storing x Serving

  1. Assets can be stored on Amazon S3, that’s fine.

  2. Assets should not be served from Amazon S3.

  3. Assets should be served from a CDN like Amazon CloudFront or CloudFlare.

3 Likes