How to set up Websockets with Phoenix behind Nginx

Question

I'm trying to set up web sockets to go through Nginx to a Phoenix app but keep getting a 403 error. Can anyone advise the correct configuration to make this work in production - development env is fine.

My Nginx conf:

upstream phoenix {
  server 127.0.0.1:4000 max_fails=5 fail_timeout=60s;
}

server {
  server_name <app-domain>;
  listen 80;

  location / {
    allow all;

    # Proxy Headers
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Cluster-Client-Ip $remote_addr;

    # The Important Websocket Bits!
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_pass http://phoenix;
  }
}

My prod.exs conf:

use Mix.Config

config :logger, level: :info
config :phoenix, :serve_endpoints, true

config :app, App.Endpoint,
  http: [port: 4000],
  url: [host: "127.0.0.1", port: 4000],
  root: '.',
  cache_static_manifest: "priv/static/manifest.json",
  server: true

config :app, App.Repo,
  username: System.get_env("MONGO_USERNAME"),
  password: System.get_env("MONGO_PASSWORD"),
  database: "template",
  hostname: "localhost",
  pool_size: 10

I can provide any additional info as requested if necessary.

The app can be reached fine over the domain name, the last and only remaining problem is getting web sockets to work.

Many thanks to anyone who can point me in the right direction.

Answer 1

i followed the guide from phoenix site. Exrm Releases - Phoenix

Your nginx.config is missing this:

# The following map statement is required
# if you plan to support channels. See https://www.nginx.com/blog/websocket-nginx/
map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

I also had some error when generate a release in my local machine after ship the release to my server.

So i suggest you should generate your release inside your server environment.

Edited:

Error in browser console:

ws://phoenix.hollyer.me.uk/socket/websocket?token=&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403

This is probably this error.You should try to start your console inside your server:

[error] Could not check origin for Phoenix.Socket transport.

This happens when you are attempting a socket connection to
a different host than the one configured in your config/
files. For example, in development the host is configured
to "localhost" but you may be trying to access it from
"127.0.0.1". To fix this issue, you may either:

  1. update [url: [host: ...]] to your actual host in the
     config file for your current environment (recommended)

  2. pass the :check_origin option when configuring your
     endpoint or when configuring the transport in your
     UserSocket module, explicitly outlining which origins
     are allowed:

        check_origin: ["https://example.com",
                        "//another.com:888", "//other.com"]

so you may re-configure your host like:

[url: [host: "http://www.phoenix.hollyer.me.uk"]]

either pass :check_origin option to your endpoint config or UserSocket module:

check_origin: ["http://www.phoenix.hollyer.me.uk"]

And then try to deploy again.Hope that help you!