ActionCable on AWS: WebSocket handshake error: unexpected response code: 404

Question

We are trying to deploy a simple Rails 5 DHH demo for a stand-alone standalone EC2 instance on AWS. The code is available here: https://github.com/HectorPerez/chat-in-rails5

We used Elastic Beanstalk to rotate one instance this way:

eb create dev-env -p "64bit Amazon Linux 2015.09 v2.0.4 running Ruby 2.2 (Puma)" –single -i t2.micro --envvars SECRET_KEY_BASE=g5dh9cg614a37d4bdece9126b42d50d0ab8b2fc785daa1e0dac0383d6387f36b 

This is a minimal installation, so there is no Elasticache and no load balancing. To install redis on an EC2 instance, we added the .ebextensions configuration file as follows: https://gist.github.com/KeithP/08b38189372b7fd241e5#file-ebextensions-redis-config ; Git commit and deploy.

But websocket does not work: checking the browser console, we repeat this error again and again:

 application-a57354de3399cd895ca366df9bd7316ab69e81d266b63be7d7be563ebc78ab9d.js:27 WebSocket connection to 'ws://dev-env-y2e5dcrxqk.elasticbeanstalk.com/cable' failed: Error during WebSocket handshake: Unexpected response code: 404 

The production.log server shows 2 "Start GET / Cable" for each "Finish / Cable" call. No DEBUG posts from ActiveCable:

 /var/app/containerfiles/logs/production.log ------------------------------------- INFO -- : Processing by RoomsController#show as HTML DEBUG -- : [1m[36mMessage Load (0.1ms)[0m [1m[34mSELECT "messages".* FROM "messages"[0m INFO -- : Rendered collection (0.0ms) INFO -- : Rendered rooms/show.html.erb within layouts/application (0.5ms) INFO -- : Completed 200 OK in 2ms (Views: 1.2ms | ActiveRecord: 0.1ms) INFO -- : Started GET "/cable" for <ip_address> at 2016-01-01 17:28:26 +0000 INFO -- : Started GET "/cable/" for <ip_address> at 2016-01-01 17:28:26 +0000 INFO -- : Finished "/cable/" for <ip_address> at 2016-01-01 17:28:26 +0000 

Answer 1

To run the websocket chat example on a single instance of Beanstalk Elastic Deployment in AWS, you will need to add the following Nginx proxy configuration (Note: replace "env1.t3tiiauce6.us-west-2.elasticbeanstalk.com" with your username):

.ebextensions / nginx_proxy.config

 files: "/etc/nginx/conf.d/websockets.conf" : content: | upstream backend { server unix:///var/run/puma/my_app.sock; } server { listen 80; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; server_name env1.t3tiiauce6.us-west-2.elasticbeanstalk.com # prevents 502 bad gateway error large_client_header_buffers 8 32k; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; # prevents 502 bad gateway error proxy_buffers 8 32k; proxy_buffer_size 64k; proxy_pass http://backend; proxy_redirect off; location /assets { root /var/app/current/public; } # enables WS support location /cable { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } } container_commands: 01restart_nginx: command: "nginx -t && service nginx reload" 

`