Problems serving .js and .css assets cloudfront CDN Heroku Rails 4 App

Question

I am trying to host the assets of my Rails 4 App over Cloudfront CDN. I used to use asset_sync and s3 but I wanted to switch over to a CDN.

When I go to my Heroku App, I see that all the pages are just bare HTML. None of the JS or CSS is being loaded.

These are the errors I am getting from my Console:

Screenshot of console errors: http://i61.tinypic.com/15rxdsj.jpg

Also, I am not sure if I have set up my Origin Domain Name and Origin Path correctly on the Cloudfront Origin Settings. Currently I am using my heroku app url as the Origin Domain Name and "/production/assets" as the Origin Path.

Production.rb file: http://pastebin.com/2dzLpGfE

I have been trying unsuccessfully for the past week to get the Heroku app to display the CSS and JS. I would greatly appreciate any insight. Thanks in advance!

Answer 1

Moving to Cloudfront isn't as drastic as change as you seem to think if you had everything working from S3. After all, Cloudfront simply distributes the contents of your S3 bucket to edge locations. This means you just have to let Rails know to look for the CDN and not S3.

There are a lot of things that could be going on. You could have misconfigured Cloudfront, which should be pointing to your S3 bucket as the origin. You should test that setup by checking to see an asset in the browser by using the Cloudfront URL. The main point is that Cloudfront should have no idea about your Rails app.

Meanwhile, you can still use AssetSync to push your assets to S3 "underneath" an assets path. You must also configure config.action_controller.asset_host as described here .