API Gateway and Cloud Front in the same domain with different path

This is a very useful feature where we can have both cloudfront and api gateway in the same domain.

This will reduce the CORS issue and easily maintainable as there will be only single route53 entry of cloudfront.

If we have 2 separate domains for api gateway and cloudfront then we need to have multiple entries in route53.

This is in assumption that already api gateway and cloudfront is created along with route53 configurations.

Cloudfront has a beautiful feature of origins and behavior with which we can redirect to specific resource based on certain pattern.

In this example we will have default behavior pointing to S3 and /api/*  pointing to api gateway.

With that being said let's create origins and behavior.

First we will create origin for pointing to S3 bucket.

Make sure that select the correct S3 bucket.

Save the configurations.

Later verify that we have new S3 origin.

Let's create another origin pointing to api gateway.

Using the api gateway id search for that api gateway.

Final origins will look like this

Once the origins are created, we will now create the behavior and attach the origin to it.

First we will create the /api/* behavior, and select the origin and origin group as api gateway origin which we created earlier.

Cache policy will be based on the product requirement.

Here I have created custom origin policy, example  .

Default(*) will be automatically created while creating the distribution. But here are my config

Finally all my path patterns will look like this.

Now that we have setup all the required configurations. Let's test and see if it's working.

You can either use the cloudfront URL or alternate domain URL.

This has routed to default behavior pattern.

Now let's call the api.

We have successfully navigated to cloudfront S3 and api gateway using the same domain. 👍