webアプリ「EChub」を作ってみた【FastAPI/React/AWS/Vercel/Docker/スクレイピング】

はじめに

当記事では、私が作成したwebアプリ「EChub」について紹介します。

自己紹介
2023年4月現在、私は地方国公立大学の修士2年生です。専攻は電気電子工学コースで通信に関する研究を、プログラミングによるシミュレーションによって行っています。研究の傍らwebアプリケーションの開発に興味を持ち、2022年10月から本格的にwebアプリの開発を始めました。
今回紹介するEChubの開発期間は1.5ヶ月です(2023年3月~4月半ば)

目次

1. EChubの機能について
2. 使用技術について
3. スクレイピングについて
4. EChubの課題・改善点

1. EChubの機能について

URL
EChub

概要
複数のECサイト(現時点ではメルカリ・ヤフオク・ペイペイフリマ)の商品をまとめて検索できるというシンプルなアプリケーションです。キーワードを入力することで、バックエンド側が各ECサイトのページをスクレイピングし、商品の情報を表示します。表示された商品の中で興味のあるものをタップすると、その商品のページに飛ぶことができます。

開発背景
私は買う意思がなくてもついフリマサイトで商品を検索してしまう癖があります。その際複数のフリマサイトを閲覧するのですが、複数のサイトの商品をまとめて検索・比較できるようになれば便利だなと思い、このアプリの作成に至りました。

2. 使用技術について

使用技術

• フロントエンド
  • HTML/CSS
  • Javascript
  • React
  • react-bootstrap
  • materialUI
• バックエンド
  • Python 3.9.6
  • FastAPI 0.95.0
• インフラ
  • Docker/Docker-compose
  • AWS EC2
  • Vercel
  • Nginx

アプリケーション構成図

主な技術についてのコメント
基本的にモダンな技術を選定するようにしました。

• React
  • フロントエンドのフレームワークは触れたことがなかったため、一番メジャーで需要のあるReactを選定
• FastAPI
  • 前提として今まではDjangoでwebアプリの開発を行っていた、このアプリも最初はDjangoで開発していた
  • 開発を進める上で、以下のような理由からFastAPIに変更
    • FastAPIを学ぶコストが低そうであること
    • Djangoよりも非同期通信の実装が簡単であること
    • Djangoよりも処理が早いこと
• Docker/Docker-compose
  • 開発当初は学んだことがなく使わないつもりだった
  • EC2にデプロイしようとした際、PythonのPlaywrightというライブラリの依存関係でハマったため利用
• AWS EC2
  • バックエンドのデプロイ先として利用
  • 前に作ったアプリケーションのデプロイで利用した経験があったため選定
• Vercel
  • フロントエンドのデプロイ先として利用
  • 以下の理由から、フロントエンドのデプロイに適していると感じ選定
    • デプロイプロセスがシンプルで使いやすい
    • 修正後すぐ画面に反映される
    • SSL証明書を自動的に発行してくれる
• Nginx
  • バックエンドのhttps化のために利用

3.スクレイピングについて

スクレイピングとは
Webスクレイピングとは、ウェブページから情報を抽出し、必要なデータを収集するプロセスです。スクレイピングは、データマイニングやコンテンツ収集、情報解析などの目的で使用されます。プログラムやツールを使ってウェブページのHTMLやCSSを解析し、特定の要素や属性を取得することでデータを収集します。

法的に大丈夫そうか
今回のアプリケーションにおけるスクレイピングは以下の点から違法性はないと考えています。

• robots.txtにおいてAllowとなってるページをスクレイピングしている
• 一回の商品検索において、検索結果の1ページ目のみスクレイピングを行う設計のため、サーバーにかける負荷が小さい

スクレイピングにおいて使用した技術について
Playwright(Python版)を選びました。
選定理由として、非同期処理に対応している点が大きく影響しています。スクレイピングはI/Oバウンドなタスクであるため、複数のECサイトを同時にスクレイピングすることでパフォーマンスが向上します。このため、非同期処理に対応した関数を使用しました。

4.EChubの課題・改善点

以下のような課題・改善点が考えられます。

検索から表示までの時間の長さ
EChubの一番の課題点です。
ECサイトの最新の商品情報を取得するために、データベースは利用せず毎回スクレイピングを行っています。そのため、商品を検索してから表示されるまでに10秒近くかかってしまいます。

ECサイトを増やす
現時点ではメルカリ・ヤフオク・ペイペイフリマの3つのサイトから情報を取得しています。フリマサイトだけでなく主要なECサイト(Amazon・楽天等)も増やすことが考えられます。(ただし情報を取得するECサイトを増やすと、上記の時間がより長くなってしまいます...)
追記：Amazonや楽天はスクレイピングが禁止されていました

絞り込み検索
通常のECサイトにあるような絞り込み検索機能に加えて、どのECサイトから商品情報を取得するか選択するなど機能も考えられます。

追記：HTMLが変更される度にCSSセレクタを修正しなければいけない
ECサイトはスクレイピング対策として、定期的にHTMLの構造やclassの属性等が変更されます。変更されると情報を取得できなくなりエラーとなってしまうため、その度に修正しなければいけません。最初にこの記事を書いてから2回もスクレイピング部分を修正しました...

さいごに

まだ課題のあるEChubですが、私が思い描いていたアプリが形となり、デプロイできた瞬間がとても嬉しかったです。また、EChubを開発する中で新しい技術にたくさん触れて、成長することができました。今後もEChubの改善や、新たなアプリの開発を行なっていきます。

最後までご覧いただきありがとうございました🙇‍♂️