GraphQL API Hosted on AWS Lambda Function URL won't load when served over Cloudfront

Question:

I’ve created a GraphQL API available here which is hosted via AWS Lambda using a Function URL. Everything works. I want to host this on a subdomain on my personal website using Cloudfront, like graphql.website.com. I currently host a REST API with another Lambda Function URL in a different subdomain using roughly the same methodology, so I’m familiar with what’s needed and how to get it set up with HTTPS, Route 53 etc.

I’ve created a Cloudfront Distribution here for this GraphQL API, linked the Lambda Function URL as a Custom Origin, and set up the alternate domain name that I want. I also created a Route53 Alias record to route traffic on the subdomain I want to that specific Cloudfront Distribution. But when I hit the Cloudfront Distribution (either the actual endpoint or the alias I made for it), I get an error that the page can’t be found. I’ve messed around with adding an Origin Path like /graphql, but nothing fixes it.

enter image description here

The REST API that I created which is working with the same methodology has a static index.html page to serve the base endpoint, so maybe that’s why that one works but this GraphQL one doesn’t ?

Below is the Python Application code for the main.py file.

import typing

from fastapi import FastAPI
from fastapi.responses import RedirectResponse, FileResponse
from fastapi.staticfiles import StaticFiles
from mangum import Mangum

import strawberry
from strawberry.asgi import GraphQL

from utils.schema import *

graphql_app = GraphQL(schema)

app = FastAPI()
handler = Mangum(app)

app.add_route("/graphql", graphql_app)
app.mount("/static", StaticFiles(directory="static"), name="favicon.ico")

@app.get("/")
async def root():
    return RedirectResponse("/graphql")

I don’t have any special Auth or headers or anything going on, it’s completely open. I guess I’m just expecting to be able to hit that Cloudfront Distribution endpoint and see my GraphQL API just like how it is on the Lambda Function URL, but I can’t figure out why it’s not loading. Any help would be appreciated!

Asked By: jyablonski

||

Answers:

don’t think a solution w/ cloudfront here is possible, nor does it make much sense for graphql anyways because cloudfront can’t actually cache these queries (to my knowledge).

an alternative solution i implemented to serve the lambda function over a custom subdomain was to use an application load balancer which pointed to a target group associated with the lambda function. i then created a route53 alias record to forward graphql.website.com requests to the load balancer url which provided the functionality i was looking for.

Answered By: jyablonski