Problems deploying streamlit app with AWS Cloudfront

🚀 Deployment
1

Hello guys,
I’m trying to deploying my streamlit app with AWS Cloudfront.
The streamlit server is dockerized and run in a ECS Service with an Application ELB without problems.
But when I’m trying to use Cloudfront with the ELB address as origin the application stay in a loop showing me “Please wait…” as in this image

Screenshot 2020-12-17 at 11.04.59
Screenshot 2020-12-17 at 11.04.591894×624 140 KB

In the console I can see that that every second are raised two errors:

  1. WebSocket connection to ‘’ failed: WebSocket is closed before the connection is established.
  2. main.cf1968bf.chunk.js:2 Uncaught Error: Unsupported state transition.
    State: PINGING_SERVER
    Event: CONNECTION_TIMED_OUT

my current config.toml file is like this:

[global]
disableWatchdogWarning = false
sharingMode = “off”
showWarningOnDirectExecution = true

[logger]
level = “info”

[client]
caching = true
displayEnabled = true

[runner]

magicEnabled = true
installTracer = false
fixMatplotlib = true

[server]
folderWatchBlacklist =
fileWatcherType = “auto”
headless = true
liveSave = false
runOnSave = false
port = 8501
baseUrlPath = “”
maxUploadSize = 50

enableCORS = false
enableXsrfProtection=false
enableWebsocketCompression = false

[browser]

serverAddress = “0.0.0.0”
gatherUsageStats = false
serverPort = 8501

[mapbox]

token = “pk.eyJ1IjoidGhpYWdvdCIsImEiOiJjamh3bm85NnkwMng4M3dydnNveWwzeWNzIn0.vCBDzNsEF2uFSFk2AM0WZQ”

[s3]

keyPrefix = “”

I’ve tried several combinations of those three values

enableXsrfProtection
enableWebsocketCompression
enableCORS

but don’t seems like a problem related to them.

Have you experencied something like this or do you have any idea?

1 Like
2

Hi,
same issue here, was curios if you solved the issue.

  • tried diff versions of ST 0.74, 0.72
  • disabled http2 in ALB
  • error persist if accessing docker image without ALB but site loads faster and don’t get stucked in wss error loop . triend Chrome, Firebox, Safari
    -healthz responds ok using ALB
    -using chrome incognito page seems to loads faster for the first time
    -ALB logs give a 404 for GET …443/static/js/main.cf1968bf.chunk.js.map HTTP/1.1

firefox reports: Firefox can’t establish a connection to the server at wss://server/stream. main.cf1968bf.chunk.js:2:320763

The connection to wss://server/stream was interrupted while the page was loading. main.cf1968bf.chunk.js:2:320763

Any idea would be appreciated

3

Hi @Gabij,

unfortunately I wasn’t able to solve the issue.

Right now as temporary solution I’m assigning certificate to load balancer and routing the traffic from my domain to it.

I’ll update if I have some news.
Cheers!

4

Hi @enryls !
I ran into EXACTLY the same issue yesterday.
Using an ECS Service with application load balancer. Until here everything works fine, but adding the Cloudfront to it results in the “Please Wait” endless loop.
Could you already figure it out? I’m thinking of cashing issues and a mismatch between Streamlit and Cloudfront settings, but was not successful until now… :frowning:

Cheers, Astrid

5

Haha… @enryls
While I was writing my previous reply my latest changes to the Cloudfront settings were deployed and now tadaaa it looks lie it is working. What did the trick:
Cloudfront → Behaviour → Switching from “Use a cache policy and origin request policy” to “Use legacy cache settings”.
If you’re still facing this issue maybe you can try this setting and let me know if it works for you as well? :crossed_fingers:

Good luck and cheers, Astrid

image

6

Hi folks,

I’m getting the exact same issue as @enryls on Azure Web Apps.

I deployed a Streamlit app from Azure Container Registry following instructions from Deploy a Streamlit Web App with Azure App Service | by Richard Peterson | Towards Data Science

I’ve updated the config.toml to the latest specs on Streamlit docs.

I’ve used ./streamlit/config.toml and set to ‘false’ (for testing) for all three

  • enableXsrfProtection
  • enableWebsocketCompression
  • enableCORS

I’ve enabled Web Sockets on the Web App’s configuration panel on Azure Portal.

Anyone else facing this on Azure? I don’t see a way to configure the cache.

Thanks

7

In “Cache key and origin requests” be sure to set “Origin Request Policy” to “AllViewer”.

For websocket to work through cloudfront, there is a number of Sec-Websocket headers that need to be forwarded (Using WebSockets with CloudFront distributions - Amazon CloudFront). You can either manually dial them all in or simply allow forwarding everything, which is what this setting does. Worked for me.

1 Like
8

Hi @vadimom, this approach fix this issue for me. Thanks a lot