2

I have my static website hosted on CloudFront.

Is there a way for me to use the same domain name but different port for API calls to an EC2 instance?

Eg. example.com:3000 should be redirected to the EC2 instance, while example.com (aka example.com:443 or example.com:80) should be redirected to CloudFront.

Avery235
  • 4,756
  • 12
  • 49
  • 83

1 Answers1

3

It's not possible to discern the target host based on port number. The DNS name alone determines where your browser connects to.

However, you can still achieve what you want, just not by port number.

You can configure your CloudFront distribution to forward requests to your static website or API depending on the path in the URL.

To accomplish this, you would configure multiple origins and multiple behaviours in your CloudFront distribution:

  • /api/* -> EC2 origin
  • Everything else -> Static website origin

To your browser, it appears as a single website. When you request https://www.example.com/page1.html, CloudFront will forward the request to the static webiste. When you request https://www.example.com/api/MyRestMethod, CloudFront will forward the request to your EC2.

This also allows you to use the same ACM certificate for HTTPS between your API and your static website.

Matt Houser
  • 33,983
  • 6
  • 70
  • 88
  • This slows down API performance as a request has 2 hops, first to the CloudFront host, then to the EC2 host? So I guess for performance sake it's better to use a subdomain for API (eg. `api.example.com`), so that it's only a single hop directly to the EC2 host? – Avery235 Dec 15 '17 at 23:55
  • 1
    It depends. It will be 2 hops, however, the first hop will be open internet to a close CloudFront edge location, then a second hop over the AWS dedicated network. Definitely worth benchmarking :) – Matt Houser Dec 16 '17 at 02:08
  • It'd still take about 100ms to the closest edge location. Doesn't seem worth it considering that using the same domain (instead of a subdomain like `api.example.com`) has no practical advantage? – Avery235 Dec 16 '17 at 02:38
  • There are some practical advantages. Fewer DNS resolutions. Reuse established HTTPS/2 connection. Offload HTTPS encryption from EC2. Use same ACM certificate. Don't need to worry about CORS. – Matt Houser Dec 16 '17 at 15:49
  • And where did you get your "100 ms" figure from? Actual values will vary depending on client location. – Matt Houser Dec 16 '17 at 15:51
  • Also, you would get built in AWS Shield and access to WAF. – Matt Houser Dec 16 '17 at 15:55
  • if the same DNS server manages both `api.example.com` and `example.com`, then it's still be single DNS resolution. CORS/ACM cert is one-time setup (and you can have wildcard subdomain cert), pretty minor to worry about. – Avery235 Dec 16 '17 at 16:34
  • Reusing HTTPS is interesting though, but that only reduced first connection speed, whereas subsequent ones will be slower due to the 2 hops. Is this the same as Proxying under https://www.netlify.com/docs/redirects/? – Avery235 Dec 16 '17 at 16:34
  • "if the same DNS server manages both `api.example.com` and `example.com`, then it's still be single DNS resolution" ... wrong. It will be 2 DNS resolutions. – Matt Houser Dec 16 '17 at 18:11
  • 2
    Don't assume that 2 hops via CloudFront will be slower than 1 hop direct to EC2. Benchmark it from your target clients and know for sure. I have witnessed faster responses through CloudFront compared to direct to EC2. – Matt Houser Dec 16 '17 at 18:14
  • I remember reading somewhere that when a DNS query to `example.com` is made, the name server will return all DNS records it holds together with `example.com`'s resolved IP (eg. `api.example.com`'s CNAME value is returned too), which gets cached on the client side? So subsequent queries to `api.example.com` would simply be a lookup locally from the cached records. – Avery235 Dec 17 '17 at 00:37
  • In your case, the browser will resolve (and cache) `example.com`, then it will resolve (and cache) `api.example.com`. It won't automatically get a value for `api.example.com` just by asking for `example.com`. – Matt Houser Dec 17 '17 at 01:19
  • If you set up a Custom Error Response in CloudFront it will also swallow HTTP error codes from your API. Afaik, these custom error responses cannot be applied to specific paths. – tim-phillips Oct 23 '20 at 18:54