WebSocket connection to '' failed: Error during WebSocket handshake: Unexpected response code: 301

前提・実現したいこと

Ruby on Rails でチャットアプリを開発しています。
development環境では問題なく動作するのですが、production環境ではエラーが発生してしまいます。
おそらくサーバーなどの問題かと思われます。
なんでも良いのでコメントいただけると嬉しいです。よろしくお願いいたします。

nginxやunicornのログにエラーは出ていません。

開発環境時はpumaを使用していましたので半ば自動的に動作できていたのだと思います。

どうもActionCableが動作できていないようです。そのほかは動作しております。

発生している問題・エラーメッセージ

google cromeコンソール

WebSocket connection to 'wss://ドメイン/cable' failed: Error during WebSocket handshake: Unexpected response code: 301

該当のソースコード

config/environments/prodution.rb

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Action Cable
  ActionCable.server.config.disable_request_forgery_protection = true
  config.action_cable.allowed_request_origins = [ 'https://ドメイン/', /https://ドメイン.*/ ]

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url = 'wss://example.com/cable'
  # config.action_cable.allowed_request_origins = [ 'http://example.com', /http://example.*/ ]

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "****_#{Rails.env}"
  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false

end

該当のソースコード

nginx ***.conf

  error_log  /var/www/*****/current/log/nginx.error.log;
  access_log /var/www/*****/current/log/nginx.access.log;
  client_max_body_size 2G;
  upstream app_server {
    server unix:/var/www/*****/current/tmp/sockets/.unicorn.sock fail_timeout=0;
  }

  server {
    listen 80;
    server_name ドメイン;
    keepalive_timeout 5;
    root /var/www/******/current/public;
    try_files $uri/index.html $uri.html $uri @app;
    location @app {
      # HTTP headers
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_pass http://app_server;
    }
    error_page 500 502 503 504 /500.html;
    location = /500.html {
      root /var/www/*****/current/public;
    }
  }
  server {

    listen 443 ssl;
    proxy_set_header X-Forwarded-Proto $scheme;
    ssl_certificate     /etc/letsencrypt/live/ドメイン/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ドメイン/privkey.pem;
    ssl_prefer_server_ciphers on;
    location ^~ /.well-known/acme-challenge/ {
            default_type "text/plain";
            root         /var/www/******/current/public;
            try_files $uri/index.html $uri.html $uri @app;
    }
    location / {
            proxy_pass http://ドメイン;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
    location /cable {
            proxy_pass http://app_server/cable;
            proxy_http_version 1.1;
            proxy_set_header Upgrade websocket;
            proxy_set_header Connection Upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }

試したこと

nginxの設定を弄ったり、prodution.rbを弄ったりしましたが解決できませんでした。
見当たるエラーコードはコンソールのみです。
下記のサイトを参考にしましたが解決できませんでした。
Rails5のActionCable(WebSocket)をPumaとnginxで本番環境で動かす
 Rails5のActionCableをNginxとPumaの環境にデプロイする
 AWS、Nginx、Unicorn、RailsでActionCableを使用する
 Action Cableでリアルタイムチャットアプリの作成方法（Rails 5.1.4にて）（その１）　herokuで動かす！
rails guide
アクションケーブルが接続できません（WebSocketにアップグレードできませんでした） - ruby-on-rails、nginx、ruby-on-rails-5、actioncable
[Rails] Action CableでWebsocketが繋がらない（原因はconfig）
Nginx,Redis,MySQLを使ってほんの少し実践的なRails ActionCableと、iOS/Androidのサンプルアプリを作って全体像を学ぶ〜バックエンド編〜

補足情報（FW/ツールのバージョンなど）

ruby
rails 5.1.6
ActionCable(websocket)
mysql
capistrano
unicorn
nginx
devise gem
conohaVPS
CentOS8
ssl let's encrypt

行動規範の内容に同意します

回答2件

自己解決

技術者の方に助けを求めたところ解決できました。

production.rb

 config.action_cable.allowed_request_origins = [ 'https://ドメイン', /https://ドメイン.*/ ]

nginx ***.conf

proxy_set_header X-Forwarded-Proto https;

投稿2020/01/01 18:39

Giga-Bakken

総合スコア5

ActionCableはまだ触っていないので、エラーメッセージから気になった点の指摘になります。
WebSocket connection to 'wss://ドメイン/cable' failed: Error during WebSocket handshake: Unexpected response code: 301
つまり、WebSocketはリダイレクトには対応出来ない、のにリダイレクトが帰ってきている。

nginxのlogにもないということはもっと上流というか、nginxとブラウザーの間のものです。
もしかして AWSのELBを使っているとかありますか？

投稿2019/12/24 08:31