reactで株価を取得してグラフを描画したい。

Question

定周期でwebスクライピングを使用して、
株価サイトから株価を取得してreact上で画面描画したい。

local上でハローを描画できるレベルです。
・そもそもサーバ(ec2)上でどうやったreactサーバを作れるのか？
・グラフ描画ってどうやるのか。折れ線グラフ
・webスクライピングはどうするのか
・取得した情報をどうやって保持するのか。

これらが色々わかっていません。ご教示願います。

Answer 1

様々なアーキテクチャがあると思いますが私が構築するなら以下のアーキテクチャにします。
個々の質問への回答をしながら説明します。

・そもそもサーバ(ec2)上でどうやったreactサーバを作れるのか？

ローカルでの構築とほとんど同じになると思います。
EC2インスタンスにssh接続して、create-react-appコマンドでできます。

・グラフ描画ってどうやるのか。折れ線グラフ

これはライブラリを使えば手軽にできます。
reactプロジェクトでしたら、Rechartsライブラリで実現できます。
JavaScriptでのグラフ描画で有名なChart.jsライブラリもおすすめです。

・webスクライピングはどうするのか

Pythonを使うのがWebスクレイピングの情報量も多くやりやすいでしょう。
スクレイピング用のライブラリも様々なものがありますが、私はBeautiful Soup4ライブラリがおすすめです。

・取得した情報をどうやって保持するのか。

定周期で実行したいとのことでしたので、データベースに保存するのが良いと思います。
データベースはEC2上にMySQLをインストールするか、Amazon RDSを利用するかになると思います。

以上が個々の質問への回答です。

説明できなかったアーキテクチャについてですが、
まず定周期でデータを取得するということで作成したWebスクレイピング用のプログラムを定周期で実行する必要があります。これには、AWS Lambdaを利用するかEC2でcron設定をするのが良いと思います。
スクレイピングした結果をデータベースに保存して、そこからデータを取り出す必要があります。
データ整形や拡張性のためにサーバサイド側でAPIサーバを作り、その作ったAPIをreactプロジェクトでコールするというのが一般的かと思います。APIサーバの構築には、スクレイピングでPythonを学習していることから、DjangoやFlaskなどのPythonのFWを使うと簡単にできると思います。

以上がアーキテクチャの説明です。
様々なミドルウェアやサービスを使うため複雑になりますが頑張ってください！