How do I optimize CloudFront to serve my single-page application?

Resolution

Note: In the following Resolution, the example origin server is an Amazon Simple Storage (Amazon S3) bucket.

Configure secure communication between your viewers and CloudFront

Take the following actions:

• Require HTTPS for viewer communication between your viewers and CloudFront. Configure CloudFront to automatically redirect HTTP requests to HTTPS, or reject HTTP requests.
• For secure connections with your domain name, get an SSL/TLS certificate either from AWS Certificate Manager (ACM) or a third party.
• Choose a security policy with ciphers and protocols that your viewer connections support.

Restrict access to your AWS origin

If you use Amazon S3 as your AWS origin, then restrict public access to the S3 bucket.

Note: It's a best practice to use the origin access control (OAC) setting to secure your origin.

To restrict access to other origins, see Restrict access to an AWS origin.

Resolve issues with SPA client-side routing

A 403 or 404 HTTP status code error occurs when you navigate to a route other than the index.html, for example https://example.com/about-us, and then subsequently refresh the page. The S3 buckets don't have a path or prefix for /about-us.

Note: When the bucket policy for OAC doesn't include the s3:ListBucket permission, Amazon S3 returns a 403 error.

When Amazon S3 returns a 403 or 404 error, CloudFront serves the index.html file that's a valid route for the SPA. To resolve these issues, configure an error response for both 403 and 404 errors.

Complete the following steps:

1. Open the CloudFront console.
2. In the navigation pane, choose Distributions, and then select your distribution.
3. Choose the Error pages tab.
4. Choose Create custom error response.
5. For HTTP error code, select either 403: Forbidden or 404: Not Found.
6. For Error caching minimum TTL, you can enter 0 or your preferred value.
7. For Customize error response, choose Yes.
8. For Response page path, enter /index.html.
9. For HTTP Response code, choose 200: OK.
10. Choose Create custom error response.
11. Choose the General tab, and then wait for the deployment to complete.

Implement caching strategies

To balance the content freshness and delivery speed of your SPA, take the following actions:

• Implement a long cache duration for immutable assets, such as JavaScript and CSS files. For example, to cache resources for 1 year, use a Cache-Control header in the S3 object metadata with the value of public, max-age = 31536000.
• For the index.html file, use a short time to live (TTL) such as public, max-age = 60 to cache files for 60 seconds. Use the short TTL with stale-while-revalidate = 2592000 so that CloudFront can serve expired cached versions for up to 30 days during background revalidation.
• Use an appropriate CloudFront cache policy that accommodates both short TTLs for frequently updated content and long TTLs for static assets. For example, you can use the Managed-CachingOptimized policy.

For more information, see Host single page applications (SPA) with tiered TTLs on CloudFront and S3.

Choose an appropriate CloudFront price class

To lower the costs to deliver your content, select a price class that aligns with your users' locations. To determine where a majority of your users are located, review your CloudFront usage report. If your users are primarily in one AWS Region, then choose price class 200 or 100. However, if performance is important, then keep the default price class "All" to deliver your content to a global audience. For information about the Regions that each price class serves, see Price class.

Related information

Deploy a react-based single-page application to Amazon S3 and CloudFront