はじめに

以前作ったチャットアプリに不具合があったので、GraphQLやTailwind CSSを使って作り直すことにします。その過程をメモします。

以前のやつは、Node.js + Express.js + React で作成していてHerokuにデプロイしていたのですが、不具合があったのでしょう。いつの間にかアプリケーションエラーとなって動かない状態になっていました（涙）。

• チャットアプリの作成：① プロジェクトの作成 // ④まで記事書いた

これを復活させてもよいのですが、新たに作り直すことにしました。

参考にしたのは以下の動画です。以下の動画はTailwind CSSは使用していません。

この動画では Webpack 5 Module Federation というとても興味深い技術が紹介されていました。フロントエンドを複数のWebpackビルドしたモジュール間で、片方向あるいは双方向に呼び出せるようになっていて、全体で一枚岩にみえるようになるというものです。

同じようなやつを作って動いたには動いた（実験）のですが、CSSをうまく当てられず、またチャットを作るという目的には必須ではないので省きました。また、CSSは今回 Tailwind CSS を練習のため使うことにしました。

今回使うライブラリ等

クライアント側

1. React （GatsbyやNext.js、create-react-app は今回使いません）
2. @apollo/client
3. graphql
4. subscriptions-transport-ws
5. tailwindcss

サーバー側

1. graphql-yoga

デプロイの方法

最初、Vercelにデプロイしようと思ったのですが方法がわからなかったので、最終的にクライアントとサーバーを分離して次のようにデプロイしました。

クライアント側

• Netlifyにデプロイしました。こちら
  • 現在、サーバーが無料枠のHerokuのためかスリープ後の起動に時間がかかります（参考：Heroku（無料）を寝かさない方法）。
  • Webpackの設定は、開発環境と本番環境の共通部分と差分の3つのファイルに分けました。（参考：Production）
  • Netlifyのビルドの設定は次にしました。サーバーも収容したリポジトリのURLを指定しています。

サーバー側

• Herokuにデプロイしました。
• clientフォルダ以下を入れ子的にgit管理してその部分をGitHubにあげて、デプロイしました。
• 参考にした記事：Gitではワーキングツリーを入れ子にできるようです(2010-10-24)
• 実行方法は node server.js です。

現状の問題点

まず、Herokuの無料枠を使っているからか、起動に時間がものすごくかかる場合があります。他にもざっと次の改良が思いつきました。

1. Herokuに待たされる間のローディング表示
2. スクロールが必要なくらいメッセージがある場合に、常に最新が表示されるための自動スクロール
3. 「ピータン」を「ピー」と2文字だけ表示していて、省略しない名前がわからない件
4. ログイン機能の追加（現在のユーザ名のテキストボックスは廃止）
5. SNS認証の追加
6. 汚い言葉は入力できないようにする
7. 特定のキーワードに反応するようにする
8. 現在だれがログインしているかわかるようにする
9. 複数の部屋を追加する
10. 永続化（現在はメモリ上）