How to redirect URL paths in CloudFront with S3 Bucket?

Question

How can I configure CloudFront with an S3 bucket to redirect the URL path of my website? Currently, I have my website hosted on S3 and CloudFront, and the URL structure uses .html files (e.g., example.com/service.html). I would like to set it up so that example.com/service works without the .html extension and still points to the same file. What is the best way to achieve this? Thanks!

Karina Lazova · Accepted Answer

I found the below to be the easiest way. I simply changed my service.html to service and  changed metadata of the object to 'text/html' https://stackoverflow.com/questions/23463679/s3-static-pages-without-html-extension

re:Post Agent · Answer

To redirect URL paths in CloudFront with an S3 bucket and remove the .html extension from your URLs, you can use a combination of CloudFront and S3 features. Here's how you can achieve this:

1. S3 Redirection Rules:
In your S3 bucket, you can set up redirection rules to handle requests for URLs without the .html extension. This can be done by adding a routing rule in the bucket's static website hosting configuration. The rule would redirect requests from "/service" to "/service.html".

2. CloudFront Origin Custom Headers:
You can configure CloudFront to add a custom header to requests sent to your S3 origin. This header can indicate that the request should be handled as if it were for a .html file, even if the extension is not present in the URL.

3. CloudFront Cache Behavior:
Set up a cache behavior in your CloudFront distribution that matches requests for paths without file extensions. This behavior should forward the custom header to S3.

4. CloudFront Function or Lambda@Edge:
For more complex URL rewriting, you can use a CloudFront Function or Lambda@Edge. These allow you to modify the request URL before it reaches your S3 origin. You could write a function that adds the .html extension to requests for paths that don't have a file extension.

5. S3 Website Configuration:
Ensure your S3 bucket is configured for static website hosting. This allows S3 to handle the redirection rules and serve the correct content.

By implementing these steps, you can create a setup where example.com/service will effectively serve the content from service.html without requiring the .html extension in the URL. This approach provides a cleaner URL structure for your website while maintaining the underlying file organization in your S3 bucket.

Remember to test thoroughly after implementation to ensure all your pages are accessible and redirecting correctly. Also, consider updating any internal links on your website to use the new URL format without the .html extension for consistency.  
**Sources**  
[(Optional) Configuring a webpage redirect - Amazon Simple Storage Service](https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html)  
[Get started with a basic CloudFront distribution - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html)  
[Customize the URL format for files in CloudFront - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LinkFormat.html)

How to redirect URL paths in CloudFront with S3 Bucket?

Add your answer

Relevant content