Using nginx to allow ActionCable within the same host

README.md

This is an example of how to configure nginx to allow ActionCable WebSocket connections to use the same host as your primary site. For example, instead of cable.myapp.dev, you can use myapp.dev/_c/.

In my case, we have a multi-tenanted environment, e.g., bob.myapp.dev and jim.myapp.dev. This lets the ActionCable connection still use the Host: header to select a tenant, and use normal cookies for user identification. wss://bob.myapp.dev/_c/ is authorized as normal. It also piggybacks off of whatever TLS setup is available.

app_cable.coffee

@App ?= {}

websocket_uri = ->
  prot = if location.protocol == 'https:' then 'wss:' else 'ws:'
  "#{prot}//#{location.host}/_c/"

App.cable = Cable.createConsumer(websocket_uri())

nginx.conf

upstream myapp_cable {
  # Set this to your pool of upstream ActionCable servers
  server localhost:28080;
}

server {
  server_name .myapp.dev;
  # Normal stuff goes here...

  # This will give us the URL myapp.dev/_c/ for cable connections
  location /_c/ {
    proxy_pass         http://myapp_cable/;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";
    proxy_set_header   Host $http_host;
    break;
  }
}

Thank you.