AWS SAM: How to use the same API Gateway for both WebSocket and HTTPS lambdas?

Question

I've been using AWS SAM for a websocket API and that's been working well. Today, I needed to add an HTTPS API, however my attempt to do so results in a new API gateway, under a different subdomain, to be created. I'd like them to share the same domain, so users only need to change the protocol (from HTTPS to WSS).

This is a relevant section of my template.yaml:

  # This seems to implicitly create and use a `ServerlessRestApi` API gateway
  PingLambda:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: lambda/
      Handler: app.pingHandler
      Runtime: nodejs12.x
      Events:
        Ping:
          Type: Api
          Properties:
            Path: /ping
            Method: get

  # I use this for the various websocket lambdas, works like a charm
  WebSocketApi:
    Type: AWS::ApiGatewayV2::Api
    Properties:
      Name: SimpleRelayWebSocket
      ProtocolType: WEBSOCKET
      RouteSelectionExpression: \\$default

# ...

# I'd love both of these to use the same subdomain/API gateway setup
Outputs:
  APIURL:
    Description: URL of the Simple Relay HTTPS API
    Value: !Sub 'https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}'
  WebSocketURL:
    Description: URL of the Simple Relay WSS API
    Value: !Sub 'wss://${WebSocketApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}'

I'm not sure how to proceed, considering the WebSocketApi has ProtocolType: WEBSOCKET set there. Is there some way to split the API into multiple things with different protocols, or is there something else I'm missing?

Answer 1

I need to do the same thing. One possible solution is to put both behind a CloudFront distribution. I'll do this probably, since I'm already using CloudFront to serve the front-end from S3, and some back-end endpoints.