Websocket State: PINGING_SERVER Event: CONNECTION_TIMED_OUT when deploying on AWS (Cloudfront+ALB+NLB+EC2)

Summary

Currently, I am building a website with Streamlit with the configuration below, but due to a WebSocket error, it does not transition from the “Please wait” screen.

Could you please advise me on how to handle this?

Configuration:

  1. AWS-Cloudfront -(HTTPS)-> 2. AWS-ALB -(HTTP)-> 3. AWS-NLB -(TCP)-> 4. EC2

With access to 3. NLB and 4. EC2, the WebSocket is correctly connected and the expected screen transition occurs. With 2. ALB, I am not sure what the cause is, but it cannot connect.

  1. Cloudfront, as mentioned above, displays up to Streamlit, but due to a WebSocket error, it does not transition from the “Please wait” screen.

If anyone understands how to handle this situation based on the information above, please instruct me.

Additional information

Additionally, I am path routing with /xxx/yyy on 2. ALB. The browser I am using is Chrome.