React + Ruby on Rails web app Chat - "Web socket connection failed in production"

I have a Rails/React Application that uses AWS ECS. I'm fairly new to all things AWS. It has a chat feature that's not currently working in production. The only error message I see in the logs is:

WebSocket connection to 'wss://loadbalancer.liverapcenter.com/cable' failed:

The architecture works like this:

1. The user goes to https://myapp.com and it serves them the static react application from an S3 bucket

2. The user makes requests from the browser that are directed to https://loadbalancer.myapp.com which directs them to one of the running tasks (rails servers)

I created elasticache redis cluster using AWS easy create + demo with the default settings. It has the configuration endpoint clustercfg.foo.amazonaws.com:6379

in my config/cable.yml I added:

production:  adapter: redis  url: redis://clustercfg.foo.amazonaws.com:6379  channel_prefix: dont_think_this_matters

In my config/environments/production.rb I have:

config.action_cable.mount_path = "/cable"config.action_cable.url = "wss://loadbalancer.liverapcenter.com/cable"config.action_cable.allowed_request_origins = ['*']

In my react application I have

const actionCableEndpoint = 'wss://loadbalancer.liverapcenter.com/cable'; CableApp.cable = actionCable.createConsumer(actionCableEndpoint);

In my network tab, it looks like there are continuous connections being made to /cable every n seconds (I think is to be expected)

The site is still under construction but viewable at liverapcenter.com atm. Here are steps to reproduce:

1. Log in via gmail (this will save your email in the db so using a burner account is advised. I will be wiping all the data from the database eventually once I've tested everything and get it working)

2. Click "Settings" then Create a Crew with any name

3. Go to "Chat" and click on your created crew (you might need to refresh the page before the crew shows up)