tommaso
Issue with LiveView using Dokku – websocket failing
Hello Folks!
I am deploying a small test project using Dokku and DigitalOcean, but I’m not able to get the LiveView working properly even after two days of experiments. I followed the steps as described in Deploy a Phoenix app with Dokku and Digital Ocean | AV with few tweaks on the elixir/erlang versions, and I’m using the default Esbuild.
The problem seems related to how Nginx is configured but even following these instructions NGINX | F5 the websocket connection is still failing.
The issue might be somewhere else, maybe you can point me in the right direction. Below you find the error I get by enabling liveSocket.enableDebug() which you can also check at this URL https://evepeak.com/enduro-time
app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1 WebSocket connection to 'wss://evepeak.com/live/websocket?_csrf_token=LG8SLy5zKx0BFlg9dwU8DQc9Gx07Ij0Lm5PaVCAtHP4Z5on8HDKZXJNQ&_track_static%5B0%5D=https%3A%2F%2Fevepeak.com%2Fassets%2Fapp-12403e086a772b88f325d7f94661e032.css%3Fvsn%3Dd&_track_static%5B1%5D=https%3A%2F%2Fevepeak.com%2Fassets%2Fapp-43225e7c9981857a04b1c349ea5eb174.js%3Fvsn%3Dd&_mounts=0&vsn=2.0.0' failed:
connect @ app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1
e @ app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:17
connect @ app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:17
(anonymous) @ app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:17
(anonymous) @ app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:17
app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1 phx-FvDVpr_eT_6qxAah destroyed: the child has been removed from the parent - undefined
app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1 phx-FvDVpr_eT_6qxAah join: encountered 103 consecutive reloads - undefined
app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1 phx-FvDVpr_eT_6qxAah join: exceeded 10 consecutive reloads. Entering failsafe mode - undefined
app-43225e7c9981857a04b1c349ea5eb174.js?vsn=d:1 phx-FvDVpr_eT_6qxAah error: view crashed - undefined
This is my first post so thank you for having me here and sorry for jumping straight to a question.. I hope I can be useful too in the future..
Thanks a lot in advance!
Tommaso
Marked As Solved
egze
Is nginx properly configured? I remember that I needed a file nginx.conf.sigil with something like this inside:
location ~ live/websocket {
proxy_http_version 1.1;
proxy_set_header Origin '';
proxy_set_header X-Forwarded-Host $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass http://{{ $.APP }}-{{ $upstream_port }};
break;
}
Also Liked
cmcaine
With dokku 0.27.1 there is no need to modify the nginx configuration. If your websocket fails to connect then you probably aren’t telling your app what domain name you’re using and so the check_origin check is failing.
You can confirm this by looking in the logs of your app for a line like “Could not check origin for Phoenix.Socket transport”.
dokku config:set your-app-name PHX_HOST=your-public-domain-name is probably all you need.
If you instead do proxy_set_header Origin ''; in the nginx file, you’re removing all origin checks, which is equivalent to setting check_origin: false. The docs advise against doing this:
If
false, your app is vulnerable to Cross-Site WebSocket Hijacking (CSWSH) attacks. Only use in development, when the host is truly unknown or when serving clients that do not send theoriginheader, such as mobile apps.
The default liveview websockets use CSRF tokens, I think, so they’re probably not vulnerable, but it’s something to be careful about.
If your app uses liveview/websockets on multiple domains you will need to explicitly configure check_origin for your endpoint (this is the case whether or not you use dokku).
evadne
ws connection seems established, so possibly check_origin config issue causing the 403
tommaso
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"