Skip to content

Anyone using backend and frontend on same domain using cloudfront behaviors?

0

Looking for someone who has been successfully running their frontend and backend on the same domain in AWS but the request segregation is happening in cloudfront through behaviors.

For example all the requests to mydomain.com will hit the S3/EC2 to load the static UI resources and all the requests to mydomain.com/api will be routed to the API gateway for backend calls

I am able to successfully use the domain and subdomain like mydomain.com and api.mydomain.com for frontend and backend but unable to run on mydomain.com & mydomain.com/api. Any inputs are highly appreciated. I am getting 403 and 404 errors. The backend requests are not reaching the API gateway

3 Answers
2

Hello.

Is it possible to successfully access API Gateway as below?

curl https://yyyyyyy.execute-api.ap-northeast-1.amazonaws.com/api/hello

I am able to successfully use the domain and subdomain like mydomain.com and api.mydomain.com for frontend and backend but unable to run on mydomain.com & mydomain.com/api.

Are you sure that the domain "mydomain.com" is configured for CloudFront?
In other words, I understand that the domain settings are as follows.

  • CloudFront
    • Domain: mydomain.com
  • S3
    • Domain: s3.amazonaws.com
  • API Gateway
    • Domain: yyyyyyy.execute-api.ap-northeast-1.amazonaws.com

I tried it in my environment with the above settings, and the request can be made successfully.
a

a

a

a

If the domain settings are as shown below and API Gateway is also "mydomain.com", it is impossible to configure.
To set it up, you need to change the API Gateway domain to something else.

  • CloudFront
    • Domain: mydomain.com
  • S3
    • Domain: s3.amazonaws.com
  • API Gateway
    • Domain: mydomain.com
EXPERT

answered 2 years ago

EXPERT

reviewed 2 years ago

EXPERT

reviewed 2 years ago

  • Note also that the cache behaviours for the different paths are evaluated in ascending order by "precedence", not by path length or specificity. You'd likely get a 404 error if the requests meant for the API gateway went to your S3 bucket.

  • Are you using the HTTP API or REST API? is "hello", the stage name or resource Name?

    My setup is also same as below CloudFront Domain: mydomain.com S3 Domain: s3.amazonaws.com API Gateway Domain: yyyyyyy.execute-api.ap-northeast-1.amazonaws.com

    Still unable to access the /api

  • It is set using Rest API. Try changing the path pattern to "api/*". Your setting is "/api/*", but mine is "api/*".

0
Accepted Answer

I am able to resolve the issue by using the stage name as "api" (same as the path pattern in cloudfront behavior) in the API gateway.

I was thinking the in the URL "abc.com/api/resource", except the /resource the entire prefix will be replaced by API gateway URL. But I infer now that only the "abc.com" is replaced.

Thank you Riku_Kobayashi

answered 2 years ago

0

This is how my cloudfront origins are configured. Enter image description here

This is how my cloudfront behaviors are configured Enter image description here

Did I miss something in the configurations above?

I am able to directly make the API gateway call like https://xyz.execute-api.ap-southeast-1.amazonaws.com/staging/login

If my cloudfront domain is configured to mydomain.com, I am able to access my static and UI from mydomain.com, but mydomain.com/api is giving 404 and 403 errors.

I have verified that my /api/* requests are reaching the proper behavior using cloudfront functions. But they are not reaching the API gateway.

I tried with both REST and HTTP APIs

answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.