peppy
Starting with a fresh install of Phoenix on a Ubuntu 20.04 server with Apache2, what are the specific steps for setting up a reverse proxy (what should the block of code in apache be exactly? what do I edit in the phoenix app files?)
By default, Phoenix runs fine on: https://www.mysite.com:4000/
I want it to run on: https://www.mysite.com/ex/ (without the port 4000 in the URL)
The “Welcome To Phoenix” page and all css/js/image files should load, the live view frame should load and the sockets should work with no errors.
Right now, I have something like the following in my Apache config:
<VirtualHost *:443>
ServerName www.mysite.com
ServerAlias mysite.com
<Location /ex/>
ProxyPass http://127.0.0.1:4000/
ProxyPassReverse http://127.0.0.1:4000/
</Location>
</VirtualHost>
In Phoenix, I edited config/config.exs to something like this:
config :exchat, ExchatWeb.Endpoint,
url: [host: "localhost", path: "/ex"],
At the moment, the phoenix page on the website (css/js/images) loads up fine, but the sockets aren’t working. In the console, I’m seeing repeating errors like:
WebSocket connection to 'wss://www.mysite.com/socket/websocket?token=undefined&vsn=2.0.0' failed
WebSocket connection to 'wss://www.mysite.com/ex/phoenix/live_reload/socket/websocket?vsn=2.0.0' failed
…
Thanks
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
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
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
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.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Bringing learning, work and compliance together since 1987.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 4 of 4 Posts
derek-zhou
Running an application involve phoenix sockets not at the root path is tricky. Do you really want to do that? In the old time, people do this to save a separate https cert. now that letsencrypt is free, most people will just make another sub domain and build a virtual host.
If you really want to do this, check your app.js for the socket connection statement. You may want to fix that to your path prefix.
peppy
Thanks for the suggestion, it didn’t cross my mind to use a sub-domain. Based on my reading, I just assumed using Phoenix on a domain directory path was standard practice.
Aetherus
Using separate subdomains has some extra benefits:
pathoption in cookies.derek-zhou
Depends on how do you define standard. If you do not use socket, then it is just as simple as adding a path to endpoint config. If you use socket, the js part need to be modified accordingly. I pass the application root through a data attributes of the the body tag, and connect the lv socket using that. This way the socket path is “float” wrt to the location:
https://github.com/derek-zhou/liv/blob/daf91cccc953f0096d5cbee5f847d4ece8d6f4f3/assets/js/app.js#L173