既にコメントでありますが、基本はローカルでビルドを実行して(何のビルドツールを使用しているか分かりませんが)出力されたファイル(react-create-appを使用している場合は確かbuildフォルダの中身)を静的ファイルを置く場所(今回だとnginxのディレクトリですかね)に置くのが一般的かと思います。
(この辺はnginxとreact、flaskの関係性がはっきりしないと何とも言えませんが。自分の場合だと、webページはreactで実装してflaskをapiサーバーとして構築し、html関連はnginxへデプロイする構成を多くとります)
自分のイメージだと、gitはあくまでもコードの更新履歴管理ツールなので、ec2にコードを移動する為に使用するのではなく、ビルド後のファイル群をec2にsftp等で送って配置するのが(gitとsftpの)用途に沿った使い方かと思います。
とりあえず実現したいことに回答すると
yarn buildを軽くしたい
方法はいくつかありますが、思いつくのは以下でしょうか。
- 不要なライブラリをimportしない
- 高速なビルドツールを使用する
- no-bundlerを使用する
buildは、自身で書いたソースコードとimportしているコードを一つのファイルにまとめる作業をしています。
その為、自身の書いたコードやimportしているライブラリの容量が大きいほどビルドに時間がかかります。
なので、不要なライブラリを削減したり、置き換えることで容量の削減ができます。
よくあるのが、ajaxの機能を使うためだけにjqueryを使用することです。
jqueryは大きなライブラリである為、ajaxしか使わないのであればjs標準のfetch apiを使用したり、ajaxに特化した(余分な機能を含まない)axiosなどのライブラリを使用するとコード量が削減できます。
また、例えばaws sdkなどすべてをimportするとかなり容量をとるので、s3しか使わない場合はaws sdk s3のライブラリだけをimportする(yarn add @aws-sdk
ではなくyarn add @aws-sdk/client-s3
して使う)と軽量化ができると思います。
高速なビルドツールに関しては、今使っているものが何かわからないので何とも言えませんが、現状だとwebpackが多いと思います。
それを例えばesbuildの様なビルドの速度に定評のあるものに置き換えることでビルドの時間が早くなると思います。
no-bundlerに関しては、やや専門知識が必要かもしれませんが、名前の通りバンドルをしないツールです。
バンドルをせずにライブラリ同士の依存関係を解消してくれるので、一応マッピングをする為にビルドは必要ですが、bundlerよりも処理は高速です。
そもそも更新するにはビルド が毎回必要なのか知りたい
ソースコードを更新しているのであれば毎回必要だと思います。
どこまでご存じかは分かりませんが、ビルドツールは基本的に以下の役割を果たします。
- ライブラリの依存関係の解消
- コードのバンドル(まとめる)
- コードの圧縮
- コードの変換(TS->JSやES2020->ES2014(新しいJSの構文を古い構文に変換する))
などなど
その為、ソースコードを変更した場合、更新したコードを再度まとめたり圧縮したり、変換したりするために再度ビルドが必要です。