AWS CloudFront

It is always useful to invalidate the cache when doing a new deployment to prevent browsers from retrieving old versions of files from the cache. AWS CloudFront now supports fast cache invalidation, allowing you to instantly deploy updates to your SPA while having the benefit of CDN caching.

Note: As a procedure, you can only invalidate files that have changed in the distribution. For example, if you are using Webpack with the default configuration, it is enough to invalidate the index.html as any modified JS and CSS will have new file names.

You can also use AWS Amplify to simplify cache deployments and invalidations with built-in optimizations.

If you are using an Amazon S3 bucket as the source for a CloudFront distribution, it is essential to restrict public access to S3.

Restricting access prevents someone from bypassing CloudFront and accessing content you want to keep safe via the Amazon S3 URL.

You wonder why it matters since it is the frontend assets that are meant to be public? The reason is that publishing via AWS CloudFront gives you more control, in that

Lambda @ Edge allows you to intercept HTTP requests that go through CloudFront. These functions are performed in CloudFront Edge Locations closer to the user, making it faster to respond or act on content in transit.

Some common use cases of Lamda @ Edge are:

• Dynamically generate customized content based on request or response attributes, such as resizing images based on request attributes.
• To add logic to requests and responses, such as creating eye-catching URLs and managing authentication and authorization for originating requests.
• To increase the cache hit ratio, resulting in improved application performance by avoiding latency caused by a cache failure.
• To manage custom authentication and authorization.

If you need to learn more about Lamda @ Edge, you can consult the documentation provided by AWS.

Note: If you need simple needs like using hashless URLs only, there is a simple follow-up approach. Since the goal is to serve the index.html even a user goes directly to a path, we can set up CloudFront error handling on the index.html server if S3 returns the “resource not found” error with the error code 404.

Another best practice I encourage you to follow is using a compression method. With AWS CloudFront, you can serve your applications using Brotli or GZip and dramatically reduce your content download speed.

Faster downloads, especially for JavaScript and CSS files, can result in faster rendering of your SPA.

Also, because CloudFront’s data transfer costs are based on the total amount of data served, managing compressed files is less expensive than managing uncompressed files.

Brotli is a widely used lossless compression algorithm that often outperforms Gzip in terms of compression ratio. Compared to Gzip, CloudFront’s Brotli edge compression results in files up to 24% smaller.

Compression capabilities can be enabled through the CloudFront console, SDK, and command line interface. EnableAcceptEncodingGzip must be set to true to return Gzip compressed objects and EnableAcceptEncodingBrotli to true to return Brotli compressed objects. CloudFront will use Brotli when the viewer supports both formats.

The Chrome and Firefox web browsers support Brotli compression only when the request is sent over HTTPS. Brotli is not supported with HTTP requests in these browsers.

When performing a new distribution, you can invalidate files or assign them versioned file names to check the versions of files managed by the distribution. If you frequently update your files, we recommend that you use file versioning.

Versioning gives you better control over the content provided by CloudFront.

Versioning makes it easy to analyze the effects of file changes because CloudFront access logs include file names.

Versioning allows you to offer different versions of files to different users.

Versioning makes it easy to roll back and forth between file revisions.

The cost of versioning is lower. You still have to pay CloudFront to transfer new versions of your files to edge locations, but you don’t have to pay to invalidate the files.

slider_v1.js, image_v1.jpg are some versioning names of the sample files that you can use.