Rails S3 CloudFront Linking
🚂

Rails S3 CloudFront Linking

Created
Apr 8, 2022 8:13 AM
Department
Engineering
Category
Efficient
Technology
Ruby on Rails
Tags
Date
URL

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

  1. Serve images using CDN
  2. 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.jpg

Eg 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

  1. Add the settings for ActiveStorage.