Rails asset serve from CloudFront
When it comes to e-commerce sites few main things to note are the SEO and the site load time. When you check the site using online tools few things that it would say is
- Serve images using CDN
- The image needs to be optimized. The size of images needs to be reduced.
Here we will look at how rails can serve images through CDN. Let us assume we have a bucket named cloudfront-test and we want to serve the contents from this bucket through CloudFront distribution.
Step 1 - Create CloudFront distribution
Choose the Get started in the website section
No setting change is required. If a custom domain name is there, then it can be given. Also, create a custom SSL certificate
Click on create a distribution. It will take around 15 mins to create a distribution.
Now that the distribution is created and linked with the S3 bucket, Now we can access the images from CloudFront URL.
Eg S3 URL:
https://BUCKET-NAME.s3.ap-south-1.amazonaws.com/table-cushion.jpgEg Cloudfront URL:
Note: CloudFront URL by default has HTTPS enabled. For custom domains, an SSL certificate needs to be uploaded.
Rails - Paperclip changes
If you are using rails paperclip gem for uploading images and want to change the default S3 URL to a CloudFront URL where the S3 bucket is associated, these are the changes we need to make.
In the staging/production.rb environment file, make the following change.
config.paperclip_defaults = {
storage: :s3,
s3_protocol: :https,
url: ':s3_alias_url',
s3_host_alias: 'd3xxxxxxx.cloudfront.net', # Place custom URL if you have
path: ":class/:attachment/:id_partition/:style/:filename",
s3_credentials: {
bucket: 'BUCKET-NAME',
access_key_id: "S3-ACCESS-KEY",
secret_access_key: "S3-SECRET-KEY",
s3_region: 'eu-west-1',
s3_host_name: "s3-eu-west-1.amazonaws.com",
}
}Note:
Path option will be needed, by default it won't be there. I placed this after checking the paperclip gem.
Without mentioning the path there was a problem.
By default the URL will be like
https://s3-eu-west-1.amazonaws.com/BUCKET-NAME/products/avatar/…/…/…/filename.jpg
By doing the above setting the URL changes to
https://d3xxxxx.cloudfront.net/products/avatar/…/…/filename.jpg
If you notice the URL does not have the bucket name appended. Now all the URLs will be showing the CloudFront URL.
TODO
- Add the settings for ActiveStorage.