Heroku + Rails4.2 : Cloudfront setup

Question

I am trying to setup Cloudfront for my heroku app. The documentation seems to be lacking to stand independently.

Here are the steps I followed:

 1. Setup Cloudfront in AWS console
 2. Added cloudfront domain name to production.rb `config.action_controller.asset_host = 'XXXX.cloudfront.net'`
 3. Set `config.assets.compile = true` in production.rb
 4. Verified AWS_SECRET_ACCESS_KEY is correct in heroku config
 5. I have added `gem 'rails_12factor', group: :production`

None of assets load anymore. Any step I am missing in the setup?

---

Update1:

In the chrome debugger the asset is correctly requested from cloudfront from this url: http://XXXXX.cloudfront.net/assets/application-22c7c249df1a24541d86603b0715eefe.css

However in the request header see a Status Code:302 Moved Temporarily. I am wondering if I have a redirect loop and how I can debug it.

Update2

Thanks everyone for the suggestions. Some more info:

1. When I try to download the asset from my app, I get a redirect to home page on browser but using curl I am able to get the asset. ex: curl 'http: //www.myapp.com/assets/application-c9a778bb55ad4152d956fd34fe6f7839.css'
2. The app doesnt use SSL. However I have still set Origin Protocol Policy to Match Viewer as per @Omar's suggestions
3. I tried to download the asset from my app on browser and am able to access the assets. ex: 'http: //www.myapp.com/assets/application-c9a778bb55ad4152d956fd34fe6f7839.css' However trying to access the assets directly on cloudfront (d1ax5oefcdtdki.cloudfront.net/assets/application-c9a778bb55ad4152d956fd34fe6f7839.css) redirects it to myapp.com
4. Screenshots for cloudfront DS:

https://www.dropbox.com/s/bkg480d4it6zl2r/Screenshot%202015-12-06%2014.01.28.png?dl=0

http://glui.me/?i=7ah73hffrhvmpt7/2015-12-06_at_2.02_PM.png/

https://www.dropbox.com/s/dd4wwgm3md8w7qn/Screenshot%202015-12-06%2014.05.20.png?dl=0

Answer 1

For anyone else having issues debugging cloudfront.

The problem was Cloudfront had cached redirects (prob bec of wrong setup). After invalidating the cache I was able to force CF to fetch assets from my app and serve them.

Answer 2

When you request the asset for the first time, cloudfront checks whether the file is cached or not so for example you request:

http://XXXXX.cloudfront.net/assets/application-22c7c249df1a24541d86603b0715eefe.css

for the first time cloudfront will give a cache miss and then it will pull the file from it equivalent path from rails. So that the next time you request the same file, it will be already cached.

In order for this to work you need to make sure that you have everything setup correctly.

From rails side there is nothing much to do except setting the assets_host in production.rb. As you already have the rails_12factor gem there is no need to add the config.assets.compile = true. From the documentation of the gem you can see in the how section that it add serving static assets "the documentation".

From cloudfronts side that is where I think you are facing a problem, you need to set some settings to let cloudfront know how it can communicate with your rails app when the cache misses. In the cloudfront setting you need to check the

Origin Domain Name to be the url of your rails app.

Origin Protocol Policy to Match Viewer

Distribution State to Enabled

Also there are some other settings there that can help you optimize your content delivery caching.