React+FastAPIを用いた簡単なWebアプリ作製

https://github.com/izuna385/arxiv-checker
https://qiita.com/izuna385/items/749dd0c552c88534d5b3

LT会で発表するスライドです。バックエンドではTDDを用いた実装も試しました。

Transcript

1. React+FastAPIでの 簡単なWebアプリ作成 @izuna385
2. サマリ • 最近やってたこと ◦ 課題意識 • 作ったもの ◦ arxiv-checker.click ◦ リポジトリ：https://github.com/izuna385/arxiv-checker ◦ 発表が終わったら一旦VM落とします。
3. 最近の課題意識 • 自身の専門のみで解ける課題が非常に小さいこと • 自然言語処理だけ出来たとしても、お客様の課題を解くのは難しい • バックエンド以外の領域に手を広げて、課題解決の手段を広げたい。
4. 具体的に言うと • 例：たくさんテキストを持っているお客様 大量のテキストを分析して、マーケティングに役立てたい。
5. よくある例 お客様のデータを 持ち帰る 分析する
6. よくある例 お客様のデータを 持ち帰る 分析する サービスにつながらない
7. 自分が今やっていることと、やりたいこと ・なんとかして、分析したノウハウをサービスにしたい。
8. 自分が今やっていることと、やりたいこと ・なんとかして、分析したノウハウをサービスにしたい。 frontend backend DB
9. 自分が今やっていることと、やりたいこと ・なんとかして、分析したノウハウをサービスにしたい。 frontend backend DB
10. 自分が今やっていることと、やりたいこと ・なんとかして、分析したノウハウをサービスにしたい。 frontend backend 業務でやっていること DB
11. インフラ 自分が今やっていることと、やりたいこと ・なんとかして、分析したノウハウをサービスにしたい。 frontend やりたいこと backend 業務でやっていること DB
12. 今日紹介するもの • arxiv-checker.click (デプロイ:GCE, DNS解決: Route53) • リポジトリ： https://github.com/izuna385/arxiv-checker • バックエンドでarXivを叩いて、データを加えて結果をフロントに返すだけのアプリ。
13. バックエンド側の処理 • FastAPIを用いて、内部で論文が扱うタスクと固有表現を抽出 request backend (container) frontend (container) Docker-compose
14. 工夫した点 • 開発環境と本番環境用でDockerfileを分離 ◦ 本番環境用にはnginxもfrontend側のイメージに追加
15. 工夫した点 • バックエンドのテストを動く仕様書として実装 ◦ pytest でテスト可能で、かつ各テストの目的が関数名で分かる
16. 詰まった点・改善点 • https化出来ていない。証明書を用意できていない。 • スケール出来るサービスではない。 • フロントの実装が弱い。
17. 今後勉強しなくてはいけないこと • フロントエンド • Webの仕組み ◦ なぜhttpで通って、https化を別途行わなくてはいけないのか？ • アクセス量に対してスケールする仕組み ◦ k8s