502 error when using AWS Amplify as a Fastly backend

Question

I have an AWS Amplify app running NextJS 13. This works fine when accessed directly through its standard url, ie https://{branch}.{appId}.amplifyapp.com

I believe this is actually powered by Lambda@edge under the hood, but I don't have any real visibility on that end.

I'd like to serve this app from a custom domain which already hosts an existing site, using Fastly as the CDN.

I've set the backend up with the following config (in Terraform):

backend {
name                  = "amplify_app"
address               = "branch.appid.amplifyapp.com"
override_host         = "branch.appid.amplifyapp.com"
min_tls_version       = "1.3"
max_tls_version       = "1.3"
port                  = 443
ssl_cert_hostname     = "*.appid.amplifyapp.com"
ssl_sni_hostname      = "branch.appid.amplifyapp.com"
use_ssl               = true
ssl_check_cert        = false
max_conn              = 300
connect_timeout       = 40000
first_byte_timeout    = 300000
between_bytes_timeout = 300000
error_threshold       = 0
}

The intention is for the microservice app to serve a handful of pages (the homepage and a few others only), while the existing site continues to serve the remaining pages.

I've set up the vcl to serve the homepage and any NextJS assets from the new backend:

sub vcl_recv {
    if (req.url == "/" || req.url ~ "/_next/") {
      set req.backend = F_amplify_app;
    }
}

However, when I try to access the homepage, or any existing asset, I got the following 502 error:

502 ERROR The request could not be satisfied. The Lambda function returned an invalid origin configuration: One or more HeaderName or HeaderValue values are invalid. 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. Generated by cloudfront (CloudFront) Request ID: LkjwiYJD0EoyASxg1cEz8frucDc2UawHU-VqpG2J0Iw1VIHh_WhHKw==

I'm guessing that something about the combination of Fastly and Cloudfront is causing the issue, however the error message doesn't provide sufficient information (for me) to get to the bottom of it.

Has anyone successfully tried this before / have a working configuration that they'd be willing to share?

Any advice appreciated.

Thanks