Heroku：Rails 5 ActiveCable 配置问题

问题描述

在使用 Heroku 部署 Rails5 应用程序时，发现 ActiveCable 配置出问题。在 WebSocket 握手期间，会出现以下错误提示：

WebSocket connection to 'wss://your-app-name.herokuapp.com/cable' failed: Error during WebSocket handshake: Missing 'Upgrade' header

产生原因

该错误提示表明在 WebSocket 握手期间，缺少了 'Upgrade' 标头。

这大多是由于 Heroku 所使用的反向代理（Reverse Proxy）导致的。反向代理将 HTTP 请求转发到后端服务器时，会拦截 WebSocket 请求并修改它的头部信息，这可能会破坏 WebSocket 握手过程。

解决方法

要解决这个问题，您需要告诉反向代理不对 WebSocket 进行修改，并让其直接将请求传递到后端应用程序。

1. 启用 WebSocket 功能

在您的应用程序中，ActiveCable 默认是不启用 WebSocket 功能的。要启用它，请在 config/environments/production.rb 文件中添加以下配置：

# config/environments/production.rb

config.action_cable.url = 'wss://your-app-name.herokuapp.com/cable'
config.action_cable.allowed_request_origins = ['https://your-app-name.herokuapp.com']

这里假设您的应用程序已部署到名为 "your-app-name" 的 Heroku 应用程序上。

2. 配置反向代理

为了告诉反向代理不对 WebSocket 进行修改，您需要向 Heroku 添加指示性头。这可以通过 proxies 参数完成。

在您的应用程序根目录下，创建一个 Procfile 文件，并添加以下内容：

# Procfile

web: bundle exec puma -C config/puma.rb
release: ./release-tasks.sh
proxies:
  "/cable" :
    "http://your-app-name.herokuapp.com:80":
      transparent: true

这里 proxies 参数的作用是，将 WebSocket 请求重定向到 your-app-name.herokuapp.com:80，并告诉反向代理不要对请求进行修改。

3. 部署应用程序

将应用程序部署到 Heroku 上，并确保 Procfile 文件已包含在部署包中。

现在，尝试通过 WebSocket 连接到您的应用程序应该是成功的了。

总结

如果您在 Heroku 上部署了使用 ActiveCable 的应用程序，并发现 WebSocket 握手期间出现了错误提示，请检查是否缺少了 'Upgrade' 标头。这很可能是由反向代理导致的。为了解决这个问题，您需要启用 WebSocket 功能，并在 Heroku 上配置指示性头。