こんにちは！
今日はEC2にデプロイしているアプリケーションにActionCableを適用させていきたいと思います

環境

Ruby on Rails 6.0
AWS/EC2
Nginx
MariaDB
unicorn
エディタはVS Codeを使用しています

※上記の細かな解説は控えます

前提条件

ローカル環境でAction Cableは実装済み
上記環境を持ちいて、web上で通常の動作が確認できている

Action Cableの実装開始

まずは完成品のGifをご確認ください

※ リロードの挙動が見られない
※ 送信時刻が"今"と自身で設定したものですので、間違いなくActionCabeが挙動している
というご認識でお願いいたします

では早速設定を始めていきましょう！

手順① 「Action Cableの環境設定ファイル、 cable.ymlの編集」

「config/cable.yml」に以下の記述に書き換えてください

【まずは従来の記述】

config/cable.yml

development:
  adapter: async

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: kch_production

↓ 以下のように書き換えます ↓

config/cable.yml

development:
  adapter: async

test:
  adapter: test

production:
  adapter: async # ここを書き換えるだけ

※本来async型の通信は非推奨ですが、今回はこのまま進めます

development環境やtest環境での利用を意図したものであり、production環境で使うべきではありません。

とrailsガイドにも記述がございます
私はまた直してみます

手順② 「本番環境の設定 production.rbに追記」

「config/environments/production.rb」に以下の記述を書き足してください
一番下で大丈夫です

config/environments/production.rb

  # 省略
  # config.active_record.database_resolver = ActiveRecord::Middleware::DatabaseSelector::Resolver
  # config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session

  config.assets.initialize_on_precompile = false

  # ↓以下を書き足します ↓
  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

手順③ 「Nginxの設定を編集する」

では、EC2にログインしていきましょう！

ターミナル

(base) takahiro@***** .ssh %.  ssh -i ***.pem ec2-user@1*.1**.1*.1**

↓ ログインするとおなじみのアイコン？でお出迎え ↓

Last login: Sat May  8 13:53:22 2021 from 11-11-1-1.rev.home.ne.jp

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

hogehugahogehuga〜〜

では、Nginxの設定をしていきましょう
下記のコマンドをコピペで実行しましょう！

[ec2-user@i%-111-11-11-0 ~]$ sudo vim /etc/nginx/conf.d/rails.conf

すると、下記の表示に変わるので、　「　i　」を押して編集モードに切り替えます

upstream app_server {
  # Unicornと連携させるための設定
  server unix:/var/www/自分のアプリ/shared/tmp/sockets/unicorn.sock;
}

# {}で囲った部分をブロックと呼ぶ。サーバの設定ができる
server {
  # このプログラムが接続を受け付けるポート番号
  listen 80;
  # 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない
  server_name 11.111.11.111; # 自分のElastic IPに書き換えてください 

  # クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォルトは1メガなので大きめにしておく
  client_max_body_size 2g;

# 接続が来た際のrootディレクトリ
  root /var/www/自分のアプリ/current/public;

# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    root /var/www/自分のアプリ/current/public;
  }

  try_files $uri/index.html $uri @unicorn;

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;

}
~                                                                                                                       
~                                                                                                                       
~

↓ 書き換えましょう ↓

upstream app_server {
  server unix:/var/www/自分のアプリ/shared/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name 11.111.11.111; # 自分のElastic IPに書き換えてください 

  client_max_body_size 2g;

  root /var/www/自分のアプリ/current/public;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    root /var/www/自分のアプリ/current/public;
  }

  try_files $uri/index.html $uri @unicorn;


  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;

  # ↓ 以下が書き加えられます ↓
  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;
    proxy_set_header X-Forwarded-Proto https;
  }
  # ↑ 以上 ↑

}
~                                                                                                                       
~

書き換えましたら、　「　esc → : → w → q → Return(Enter)　」　を押して保存、終了します

手順④ 「Nginxを再起動」

上記から抜けましたら、Nginxを再起動しましょう

[ec2-user@i%-111-11-11-0 ~]$ sudo systemctl reload nginx
[ec2-user@i%-111-11-11-0 ~]$ sudo systemctl restart nginx

これで全てOKです
本番環境でAction Cableが実装できました！！

もし上手くいかないという方は、

①インスタンスを再起動する
②unicornを再起動する
③MariaDBを再起動する
④もう一度デプロイし、全て再起動しなおす

と複数試してみてください！

参考文献

今日もありがとうございました！！