[Rails6]AWS本番環境でActionCableの使用ができるようにする

はじめに

Rails6を使用して、AWSにデプロイするもActionCableで実装したチャットが一切機能しなくて困ったので、その時の解決方法を以下に記述します！

#結論

3点の設定が必要です。
1.cable.yml
2.production.rb
3.rails.conf(もしくはアプリケーション名.conf)

cable.ymlの設定

cable.ymlとはActionCableを使用する際の設定を記述するファイルです。
ここでは、本番環境の仕様設定に編集を加えます。

###adapter(前提知識)
ActionCableは、サーバーから送信された情報をクライアントへ提供する仕組みになります。その仕組みと連携するためのものをadapterと言います。

使用できるadapterの種類には、以下表の3通りがあります。

種類	内容
Asyncアダプタ	無料で導入が可能だが、パフォーマンスの面から本番環境での利用は非推奨。ただしポートフォリオ程度なら問題ない
Redisアダプタ	本番環境での利用が推奨されている。、EC2を用いたデプロイを行う際に、幾らか料金がかかる
PostgreSQLアダプタ	本番環境での利用が推奨されている。PostgreSQLを使用していることが条件

以上を踏まえ、以下のように編集しましょう

cable.yml

development:
  adapter: async
test:
  adapter: test
production:
  adapter: async # 追記
  # adapter: redis 削除
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: mini_talk_app_production

#production.rbの設定

ActionCableは、指定されていないオリジンからのリクエストを受け付けない設定になっているはずです。
これでは使い物にならないので編集しましょう！

config/environments/production.rb

Rails.application.configure do 

# 省略
#どっかに記述してOK
  ActionCable.server.config.disable_request_forgery_protection = true
  config.action_cable.url = "ws://【Elastic IP】/cable" 
  config.action_cable.allowed_request_origins = ['http://【Elastic IP】']

# 省略

end

#rails.confの編集

Nginxの設定ファイルにあたるrails.confを編集しましょう。
ActionCableを用いる場合、サーバーサイドへのリクエストを受け取る役目のあるWebサーバーにて、websocketの仕組みを用いるための設定をする必要があります。

/etc/nginx/conf.d/rails.conf

upstream app_server {
  server unix:/var/www/アプリケーション名/shared/tmp/sockets/unicorn.sock;
}

server {
  #省略
# -------------------ここから-------------------
# /cableのパスに対してwebsocketの仕組みを用いるための設定
  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;
  }
# -------------------ここまでを追記-------------------
  #省略
}

ここで僕がはまったのは、一行目の〇〇_serverとproxy_pass http://〇〇_server/cable;は一致させてください。訳もわからずコピるとエラーになります！

#再起動

あとはターミナルでお馴染みの再起動！！！

# 読み込み直し
sudo systemctl reload nginx

# 再起動
sudo systemctl restart nginx

これで使えるようになりました！！

#おわりに
今は細かいところは分からなくても、「とりあえず知っている」ってとても大切なことなので、是非記事の方熟読してみてください！！！