I followed this article on Heroku to enable CloudFront on my Rails 5 app hosted on Heroku. However, it doesn't seem to be working for my images (which are hosted on S3).
I have tried setting the Origin Domain Name in AWS to both by S3 bucket (selected from the dropdown), as well as my app's domain name.
However, when I look at the source code, the images are still using the S3 URL instead of the being prefaced with the CloudFront URL which leads me to believe that something is not set-up right.
When I look at the source, I can see the some things are using the preface, such as my favicon https://mycloudfront.cloudfront.net/assets/favicon-28fde7db6babda6b94460b806d567abe4521f8dd77bc3741debadbf30eeecb19.ico.
I saw this post
Rails Cloudfront assets not served, but I'm using image_tag on the images showing the S3 URL in the source code.
in production.rb
config.action_controller.asset_host = "https://mycloudfront.cloudfront.net/"
Related
I'm using refile gem for file uploading and I'm uploading files directly to my amazon s3 public bucket. The files are being uploaded just fine to following URL:
https://s3.amazonaws.com/{bucket-name}/store/6309035935359dca1ef549170e7facac9ab3553ad53946cea0bcb8335475
I'm using amazon cloudfront to serve these assets from s3, so the cloudfront url, for the asset given above, is something like this:
https://{distribution-name}.cloudfront.net/store/6309035935359dca1ef549170e7facac9ab3553ad53946cea0bcb8335475
The both urls when accessed directly through browser works fine. To display this asset in my app view file I'm using refile gem following helper function:
attachment_image_tag(#post, :profile_img, :fill, 350, 350)
Now the issue is, this helper method prints a URL something like this:
https://{distribution-name}.cloudfront.net/attachments/5845d0a97dc77a57b5b05742a1eb26d629d7cdaa/store/fill/350/350/6309035935359dca1ef549170e7facac9ab3553ad53946cea0bcb8335475/file
As this URL is different from above cloudfront URL, it is not displaying the image. How do I force attachment_image_tag function to print the correct cloudfront URL?
The issue was resolved. The issue was pointed out by another guy on github: https://github.com/refile/refile/issues/500#issuecomment-239784247
It sounds like you may have set up your Cloudfront distribution with
your S3 bucket as its origin? Refile, however, does not generate URLs
directly to files on S3 (see README section 3. Rack Application).
You'll therefore want to set your Cloudfront distribution's origin to
be the URL of your application. That way, files will be streamed from
your application on the first request, and cached by Cloudfront for
future requests.
I've got my application working fine with Refile and uploading images to S3. I've read that you should put a CDN in front of the application to make it more efficient and secure.
Is there any place I can read to set it up properly? I've look at the github repo and tried following the instructions but I feel like I did it wrong.
This is what I did:
Create a AWS CloudFront distribution where origin domain name points to my S3 instance (bucket_name.s3.amazonaws.com).
Create a CNAME with Route 53 to add a custom domain name "cdn.mydomain.com" that points to the CloudFront domain name "xxx.cloudfront.net".
Go to my /config/initializers/refile.rb and added the line:
Refile.cdn_host = "https://cdn.myappname.com".
Commit and push to Heroku
All my image links are broken now.
What did I do wrong?
The way I did this was to put a put Cloudfront in front of the whole site and not the bucket itself.
Create AWS CloudFront distribution setting the origin to my domain (www.example.com)
Create CNAME (cloud.example.com) that points to xxx.cloudfront.net
Go to config/environments/production.rb and add the line config.action_controller.asset_host = 'http://cloud.example.com'
Go to config/initializers/refile.rb and add the line Refile.cdn_host = 'http://cloud.example.com'
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!
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.
I'm using this gem to integrate CKEditor into my Rails app, with paperclip to handle image uploading.
I no longer want Heroku to serve my CKEditor-uploaded images anymore, so I'm switching to Cloudfront and found this tutorial.
As I understood (from the tutorial), I can use Cloudfront without using an S3 bucket, as Cloudfront will automatically fetch my precompiled static assets stored on Heroku. But I'm so confused:
Will image uploaded via CKEditor be included in the asset pipeline? So that when precompiled, will be served by Cloudfront?
The tutorial said I need to change all image links to <%= image_tag('...') %> so that it'll point to Cloudfront and work. But this is only possible when I hard-coded the image, not the case when a user uploaded one in his text and stored in the database. Am I wrong and how to solve it?
Will this method (not using S3 bucket) work for other "dynamic" images such as User's avatars, post's cover images, etc...?
I don't want to use S3 bucket as it will involve the use of asset_sync. Any help is appreciated, thanks!
I have a rails site that utilizes ckeditor so the user can build pages on the site. Generally they develop pages on a staging site and push the changes to a production server. Before the user was hosting the site and any images on a private server, so ckeditor was using relative paths for images. For example, in the content field of ckeditor created asset:
img src=\"/uploads/images/mypic.jpeg\"
However, we're now transitioning to Heroku and we're using Amazon S3 to host the files. As a result, ckeditor has to use absolute paths. For example:
img src=\"http://mybucket_staging.s3.amazonaws.com/uploads/images/mypic.jpeg\"
This makes deploying from staging to production problematic because even tho the correct picture is in the production bucket, the content field of the ckeditor assets will still be pointing at the staging bucket when the database is pushed to production. Is there anyway to make this more dynamic?
How about using a config var - one that's set differently on production and staging - and populate the path from the value of this variable?