チャットアプリ作成その① 作り直します

2021-05-142021-06-07

はじめに

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

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

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

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

Realtime Chat App | React, GraphQL & Websockets

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

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

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

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