はじめに
この記事は「RUNTEQ Advent Calendar 2023」の19日目を担当しています。テーマは『初めて学んだ技術』 ということで、私が最近作ったアプリでWebSocketを用いた際に苦労した点について書こうと思います。
背景
この記事は、WebSocket通信を使ったアプリをVercelにデプロイしたところ上手く機能せず、代わりにRenderにデプロイしたところ機能したことから、各PaaSごとの事情を調べたものです。作成したアプリは以下のものになります。フロントエンドをNext.jsで作成しVercelにデプロイ、バックエンドをFastAPIで作成しRenderにデプロイしました。RUNTEQというプログラミングスクールで、有志とともにチーム開発を行いました。
▼チーム開発 2人協力型のホラー×謎解きゲーム「MISERY」
VercelとWebSocket
VercelでWebSocket通信をする方法はあるようですが、一手間を加える必要がありそうです。VercelはWebSocket通信について以下のように示しています。（英語の原文をDeepLにて翻訳）
Vercel Serverless FunctionsはWebSocket接続をサポートしていますか？
VercelのServerless Functionsはステートレスで、最大実行時間があります。そのため、 Serverless FunctionへのWebSocket接続を維持することはできません。この記事では、アプリでリアルタイム通信を使用するための情報と、それを有効にする方法について詳しく学べる場所を提供します。
リアルタイム通信の有効化
Serverless Functionへの永続的な接続を維持することはできませんが、Pusher Channelsのようなサードパーティのサービスを利用することで、アプリのリアルタイム通信を可能にすることができます。サードパーティのサービスを利用する場合、クライアントはイベントのサブスクライブに使用し、すべてのパブリッシュはServerless Functionで処理することに留意することが重要です。
Fly.ioとWebSocket
Fly.ioではWebSocket通信ができることをブログの中で明示しています。
Flyによく寄せられる質問のひとつに「WebSocket接続に対応していますか」というものがあります。答えは「はい」ですが、その前にもう少し詳しく説明し、例をお見せしましょう。
この引用元は、簡単なチャットアプリを用意してくれています。試したい方は、以下のリポジトリをクローンして試してみると良いでしょう。
flychat-ws in fly-examples
RenderとWebSocket
RenderのコミュニティでWebSocketに関する質問が行われていることから、WebSocket通信を使うことが可能であることが伺えます。
HerokuとWebSocket
無料プランが終了してしまったためコストがかかってしまいますが、HerokuでもWebSocketは使えそうです。
まとめ
今回挙げた4つの、どのPaaSでもWebSocket通信を用いたアプリをデプロイすることは可能のようですが、コストをかけずに簡単に実装するのであればFly.ioやRenderでデプロイするのが良さそうです。とりわけRenderでは私がアプリが動くのを確認しているのでオススメします。現在簡単なチャットアプリをFly.ioで動かそうと検証中ですが、初めて触るので上手くいっていません（汗）。検証が完了し次第、追記させていただきます。
さて、ご存知の方も多いと思いますが、Renderでは15分アプリを動かしていないとスリープしてしまいます。私はMISERYというアプリでバックエンドを常に動かし続ける必要がありましたので、UptimeRobotという監視ツールでレスポンスを送り続けることでスリープしないようにしています。