はじめに
Redis、キャッシュの理解を目的に、ポケモン図鑑を作りました！
その過程で気づいたことや困ったことを紹介します。
↓今回作成したアプリのリポジトリ
作ったもの
ポケモン図鑑
1000匹のポケモンを検索、表示することができます！
技術スタック
- React（TypeScript）
- Hono（TypeScript）
- Redis（Cache）
- PokeAPI
- Docker/docker-compose
アーキテクチャ
ディレクトリ構造
pokedex3/
├── docker-compose.yml
├── backend/
│ ├── Dockerfile
│ └── src/
│ ├── index.ts
│ ├── redisClient.ts
│ └── types/
│ └── pokemon.ts
└── frontend/
├── Dockerfile
├── index.html
└── src/
├── App.tsx
└── main.tsx
ハマったところ
Redisへ接続するためのURLを間違えた
バックエンドのコンテナからRedisのコンテナのlocalhost:6379に接続したかったのに、URLをlocalhost:6379にして接続しようとしていました。これではバックエンドのコンテナ内のlocalhost:6379に接続しようとしてしまいます。
URLをredis://redis:6379と、サービス名を指定することでRedisのコンテナのlocalhost:6379に接続することができました。
詳細は下の記事に書いています。
ここで疑問に思ったことがありました。
フロントエンドでは
fetch("http://localhost:3000")
のようにlocalhostで指定しています。これではフロントエンドのコンテナ内の3000番に接続してしまい、バックエンドに繋がらないのでは？と思いました。
しかし、フロントエンドのコードの実行環境を思い出すと、コンテナ内ではなく、ブラウザでした。
つまり流れは、
ブラウザがフロントエンドコンテナにリクエスト
↓
フロントエンドコンテナがhtmlを返す
↓
ブラウザでアプリが表示される。ブラウザ上で「fetch("http://localhost:3000")」を実行。
↓
ブラウザを開いているPCのlocalhost:3000に接続
↓
バックエンドコンテナのlocalhost:3000に接続
（PCの3000番とバックエンドコンテナの3000番はマッピングされている）
↓
バックエンドコンテナからredis://redis:6379に接続
↓
Redisコンテナのlocalhost:6379につながる
以前Dockerでアプリを作った時にも同じようにDBへ接続できないというミスがありました。
接続時にはどのような流れで呼び出しているのかを意識するようにしたいです。
PokéAPIに1000件を同時リクエストしたら fetch failedになった
今回は1000匹登録されたポケモン図鑑を作りたかったので、最初に1000匹のポケモンを取得する設計にしました。
PokeAPIには一度のリクエストで複数ポケモンを取得するエンドポイントがあります。しかし、これが返す情報はnameとurl（ポケモンの名前とその詳細情報を返すエンドポイントのURL）だけなんです。
つまり、ポケモン図鑑のように画像まで使いたい場合、一匹につき一回のリクエストが必要になります。
こういう背景があって、Promise.allで並列に1000件リクエストを送ろうと思っていました。
実際にやってみると、、、
同時に1000件は多すぎるのか、fetch failedになってしまいました。
解決方法
並列で10ずつ実行 + Redisでキャッシュ
上記のように対応し、無事エラーが起きずにアプリが完成しました。常識的に同時に何リクエストならいいのかあまりわかっていなかったのでいい経験になりました。
こちらも詳細は以下の記事に書いています。
学び・気づき
英語ドキュメントを読んだ
今回はRedisのセットアップから実装まで全て公式の英語ドキュメントを読んで実践しました。
今まではQiitaやZennの日本語記事に頼っていましたが、公式ドキュメントへの苦手意識をなくしたく、このようにしました。
セットアップはsetupやinstallに書いてあるし、実装方法はdevelopのところに書いてあったので、それ通りにやるだけで思っていたより迷わず実装することができました。
自信がついたのでこれからは積極的に公式ドキュメントを読むようにしようと思いました。
キャッシュの速さを知った
1000件取得するのにかかった時間
# バックエンドの処理時間
キャッシュなし：5.29秒
キャッシュあり：0.64秒
速さに驚きました。
メモリを使うことでここまで速くなることを実際に体感できたので、やってみてよかったです。
今後の展望
- Redisの他の機能も使ってみる
- Redis以外のキャッシュDBを使ってみる
参考文献
おわりに
キャッシュの偉大さに気づきました。そして技術を試したい時にPokeAPIが便利すぎる！