fly.io apps behind cloudfront

1

I’m trying to put my apps behind the AWS cloudfront. I’ve configured my cloudfront origins to the generated fly.io URL for my app. when I want to get access to the apps via cloudfront I’ve got the below error.

502 ERROR
The request could not be satisfied.
CloudFront wasn't able to connect to the origin. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

FYI, I can reach my app via fly.io generated URL and my machines are healthy.

2

This is probably because CloudFront is looking for an HTTP backend, while the default behaviour for Fly.io Apps is to serve HTTPS. You probably don’t need CloudFront, we have our own DDoS protection and etc, but if you need it for something else you’ll want to configure your app to serve on HTTP and use a TCP service instead of an HTTPS one in fly.toml. See the docs here.

3

@omid if the “http vs. https” theory is correct, you can set force_https = false to have your app serve content over both http and https. force_https = true means that hitting your site via http will result in a 301 redirect to https.

  • Daniel
4

I have some complicated path based redirection. that’s why I’m using cloudfront.

here’s my updated configuration based on your suggestions:

[[services]]
auto_start_machines = true
auto_stop_machines = false
internal_port = 3000
protocol = "tcp"

  [[services.ports]]
  handlers = [ "http" ]
  port = 80

I can reach my app throw http method. but I’ve got the same error.

5

I first set this to false but it was not work.

FYI, I’ve also disabled all the cloudfront caching config and pass all headers to the fly.io proxy.

6

Can you try setting “handlers” to ["tcp"]? If this doesn’t work, we’ll start over with a different line of troubleshooting.

7

I did and I’ve got the same error.

8

@endigma @roadmr
I’ve fixed the problem.

Here are my configurations:

[[services]]
  internal_port = 3000
  protocol = "tcp"
  auto_stop_machines = false
  auto_start_machines = true

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443
    tls_options = { "versions" = ["TLSv1.2"] }

I don’t need to disable the TLS option.

What happens is that the viewer makes a request to my custom domain my-app.domain.com on CloudFront, and its client sets the Host header to my-app.domain.com. Therefore, in both cases, the origin server (my app on fly.io) is searching for the certificate for that domain to establish the connection. Since there is no such certificate present on either of the origin servers, the connection fails in both cases.

To fix this, I should attach the Managed-AllViewerExceptHostHeader request policy to /* routes. This instructs CloudFront to remove the original Host header value set to my-app.domain.com and replace it with the generated fly.io URL, respectively. This, in turn, allows the origin to find the correct certificate and establish the connection.

One last peculiarity is that the request policy requires me to have a cache policy set as well. For the fly.io app, in particular, it is a good idea to use the Managed-CachingDisabled cache policy.

After these changes, I’ve successfully redirected all of my traffic to my fly.io app.