解決したい問題

Railsアプリでリアルタイムチャット機能を使用したいと考え、ActionCableを使用しました。
しかしチャット欄に打ち込んだメッセージが画面に反映されず(入力欄に打ち込んだメッセージが下に連なる)設計通りに動作しませんでした。ブラウザの検証機能でConsoleを確認したところ、以下のメッセージが出ていることがわかりましたが、調査した文献の方法では解決できなかったため、ご質問させていただきました。

Console
1WebSocket connection to 'ws://localhost:81/cable' failed: Error during WebSocket handshake: Unexpected response code: 404

画面キャプチャは以下です。

ソース

app/javascript/chat_channel.js
const chatChannel = ・・・の部分に、console.logを仕込み、フロント側をリロードしましたが、ブラウザのConsoleに'connected'という文字が表示されていないことから、上記のエラーのように、Socket通信に失敗していると思われます。

javascript
1import consumer from "./consumer"
2
3const chatChannel = consumer.subscriptions.create("ChatChannel", {
4  connected() {
5    console.log('connected')
6  },
7
8  received(content) {
9    const contents = document.getElementById('chain-quotes')
10    contents.innerHTML += `<p>${content}</p>`
11  },
12
13  speak: function(content) {
14    return this.perform('speak', {content: content});
15  }
16});
17
18document.addEventListener('DOMContentLoaded', function(){
19
20  const input = document.getElementById('message-input')
21  const button = document.getElementById('button')
22
23  button.addEventListener('click', function(){
24    const content = input.value
25    chatChannel.speak(content)
26    input.value = ''
27  })
28});

app/channels/chat_channel.rb

Ruby
1class ChatChannel < ApplicationCable::Channel
2  def subscribed
3    stream_from 'chat_channel'
4  end
5
6  def unsubscribed
7    # Any cleanup needed when channel is unsubscribed
8  end
9
10  def speak(data)
11    content = Chat.create!(content: data['content'])
12    ActionCable.server.broadcast 'chat_channel', data['content']
13  end
14end

app/views/chas/show.html.erb

ERB
1<div class="container">
2    <h1>チャット部屋</h1>
3
4    <form>
5        <div class="form-group">
6        <label for="inputlg">メッセージ</label>
7        <input type="text" class="form-control" id="message-input" />
8        </div>
9        <div class="center-block">
10        <button id="button" class="btn btn-success pull-right">送信</button>
11        </div>
12    </form>
13
14    <div id="chain-quotes">
15        <ul class="list-group">
16        <br>
17        <%= render @chats %>
18        </ul>
19    </div>
20  
21</div>

環境情報

Ruby 2.7.1
Ruby on Rails 6.0.2.2
Docker version 19.03.8
docker-compose version 1.25.4
MySQL 5.7
Nginx 1.17

以下でRailsアプリの環境を構築しました。
Docker + Rails + Puma + Nginx（SSL） + MySQL

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
    env_file:
      - ./environments/db.env
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
  db:
    image: mysql:5.7
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
  web:
    build:
      context: containers/nginx
    volumes:
      - certs:/etc/letsencrypt          # 追加
      - certs-data:/var/lib/letsencrypt # 追加
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 80:80
      - 443:443
    depends_on:
      - app
volumes:
  certs:       # 追加
  certs-data:  # 追加
  public-data:
  tmp-data:
  log-data:
  db-data: