EC2インスタンス上のReact yarn buildを軽くしたい

Question

前提

AWSEC2上に１つのインスタンスを立ち上げ、そのなかにReactとFlaskを置いています
ミドルウェアはnginxとuwsgiを使っています
システムはすでにデプロイ済です

実現したいこと

yarn buildを軽くしたい
そもそも更新するにはビルド が毎回必要なのか知りたい

発生している問題・エラーメッセージ

フロントの更新（yarn build ）に30秒ほどもしくはそれ以上かかります
毎回ではありませんが、１分たっても終わらず、ビルド中にインスタンスごと落ちてしまうことがありました。
ビルドを軽量化するにはどういった方法がありますか。
ちなみにyarn install は重くなく、10秒ほどで終わります

Flaskの場合、uwsgiの設定でtouch-reloadすると即時反映するようにできました。
フロントもFlaskのように設定で即時反映できますか？
そもそも更新するにはビルド が毎回必要なのでしょうか。

質問が漠然としているのでお答えするのが難しいと思いますがよろしくお願いします。
また、一般的にどのような方法でフロントのコードを更新しているのか知りたいです。

追記

現状、
ローカルで修正&ビルド → git push → 本番EC2でgit pull → EC2上で再ビルド
で反映させています。
EC2上にgit pullしただけでは画面反映されないです。

Comments

[hoshi-takanori]

EC2 でビルドせずに、ローカルでビルドしたものを EC2 にデプロイすれば良いのでは。

[fujimaruuuun]

回答ありがとうございます。
ローカルでビルドしたものをpush→EC2上でgit pullしても更新前のままで反映されていないので
再度EC2上でもbuildしているという状況です、、
デプロイの仕方が間違っていますでしょうか、、

[hoshi-takanori]

どうやってデプロイしてるか知りませんが、git の内容が反映されないのはかなり問題では…。

[fujimaruuuun]

説明不足失礼しました。
EC２上のコード自体は変更されているものの、サイトにアクセスしても画面に変更が反映がされていない状態です。

[hoshi-takanori]

全然分かりません。リポジトリ上のディレクトリ構成とか、ビルドしたものが本当に commit されてるかとか、デプロイ時には何がどこに展開されるかとか…。

[Yuu]

この話、多分.gitignoreにデフォルトで/buildが記述してあってリポジトリにはbuild後のファイルがあがってないんじゃないですかね。
なので、ec2上で再ビルドして/buildを生成/更新しているのだと思います。

[fujimaruuuun]

ありがとうございます。
まさにその通りで.gitignoreに/buildが含まれておりました。
一般的にbuildフォルダはignoreには設定しないのでしょうか、、

Answer 1

既にコメントでありますが、基本はローカルでビルドを実行して(何のビルドツールを使用しているか分かりませんが)出力されたファイル(react-create-appを使用している場合は確かbuildフォルダの中身)を静的ファイルを置く場所(今回だとnginxのディレクトリですかね)に置くのが一般的かと思います。
(この辺はnginxとreact、flaskの関係性がはっきりしないと何とも言えませんが。自分の場合だと、webページはreactで実装してflaskをapiサーバーとして構築し、html関連はnginxへデプロイする構成を多くとります)

自分のイメージだと、gitはあくまでもコードの更新履歴管理ツールなので、ec2にコードを移動する為に使用するのではなく、ビルド後のファイル群をec2にsftp等で送って配置するのが(gitとsftpの)用途に沿った使い方かと思います。

とりあえず実現したいことに回答すると

yarn buildを軽くしたい
方法はいくつかありますが、思いつくのは以下でしょうか。

1. 不要なライブラリをimportしない
2. 高速なビルドツールを使用する
3. 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よりも処理は高速です。

そもそも更新するにはビルド が毎回必要なのか知りたい
ソースコードを更新しているのであれば毎回必要だと思います。
どこまでご存じかは分かりませんが、ビルドツールは基本的に以下の役割を果たします。

1. ライブラリの依存関係の解消
2. コードのバンドル(まとめる)
3. コードの圧縮
4. コードの変換(TS->JSやES2020->ES2014(新しいJSの構文を古い構文に変換する))
   などなど
   その為、ソースコードを変更した場合、更新したコードを再度まとめたり圧縮したり、変換したりするために再度ビルドが必要です。

Comments

[fujimaruuuun]

拙い質問に詳しくご回答いただきまして本当にありがとうございます。
nginxのlocation設定で、"/"にアクセスすると、react-create-appのbuildフォルダの中身を向くように設定しています
【etc/nginx/nginx.conf】
location / {
root /home/ec2-user/my_project/build/;
index index.html index.htm;
try_files $uri /index.html;
allow all;
}
Yuuさんと同じく、フロントをReactで作成、flaskをapiサーバとして構築しています。
nginxとflask間はuwsgiでsocketさせております。

npx depcheckで不要なパッケージを確認＆削除したものの、import文は確認していなかったので細かく見ていこうと思います。
・高速なビルドツールを使用する
・no-bundlerを使用する
この２点を早速試してみます！
いずれにせよビルドは必須ということで理解いたしました。

ビルドやデプロイの知見が非常に乏しく、またgitの使用法など色々問題点がわかりました。
ご質問とご回答いただきました、hoshi-takanoriさん、Yuuさん本当にありがとうございました！

[Yuu]

以下のコメントの件ですが
> 一般的にbuildフォルダはignoreには設定しないのでしょうか、、
buildフォルダをignoreに設定するのが一般的です。(デフォルトでなっているので一般的な設定と読み替えてもいいと思います)
重複する説明になりますが、gitはあくまでソースコードを管理する物なので、ソースコード関連のフォルダ(srcフォルダ等)をリポジトリに保存し、ソースと関係ない又は管理しなくてもよいbuildやmoduleフォルダはデフォルトでリポジトリに登録されないように.gitignoreに設定されています(moduleフォルダは開発に必要ですが、moduleは開発対象ではないですし、package.jsがあればyarn installでローカルに落とせるので登録する必要はありません)

nginxの設定はreactのbuildフォルダを見に行くようにしているようですが、極端な話、設定するのが面倒だと思うので、デフォルトの/usr/share/nginx/htmlに対してbuildフォルダの中身を転送するか、せめてapache httpdと同じ/var/www/htmlの配下にファイルを展開する方がいいと思います。(強制はしませんが、世の中の共通認識的に。セキュリティ的にもデフォルトの方が安心かと思うので)

最後に、紹介したビルドの高速化についてですが若干癖があるのでそこだけお伝えします。
- 高速なビルドツールを使用する
世間的には今はesbuildが速いと言われていますが、確か大規模開発には向いておらずコンパイラ時にバグがあると公式が言っていた気がします。webpackの方が安定はしていると思うので、大規模で使用する際には少し注意が必要です。
- no-bundlerを使用する
こちらに関しては、bundleしないがゆえに、ブラウザがたくさんのファイルをサーバーから取得する必要があります。これに関しては、nginxの設定で通信プロトコルのバージョンをhttp/2以上に上げることで緩和はできますが、そのあたり詳しくない場合は、bundleをして1つのファイルにしたほうがアクセス速度は速いと思います。(デフォルトのhttp/1.1だと並列して6ファイルしか取得ができない仕様になっているので、no-bundlerにすると表示速度が落ちます。平気で10個以上のファイルを取ることになると思うので)

[fujimaruuuun]

コメントいただいていたことに気付かず遅くなりすみません！

あくまでもgitはソース管理だけのものにして開発対象でないものは(buildやmodule)は管理する必要がないのでデフォルトでignore設定されているということですね。
だからgit管理外のbuildは、sftpで中身をnginxに送るのですね！！
非常にわかりやすく説明していただきましてありがとうございます。
nginxの設定も教えていただいたようにやってみます！

ビルド高速化についてもさらに詳しく、ありがとうございます。
なるほど、no-bundlerは一つのファイルにまとめないから速度がおそくなってしまうということなのですね。
付け焼刃の知識でビルドを設定していたのでどういう構造になっているのか正直まったくわかっていませんでした、大変勉強になりましたm(__)m

今回はwebpackを使用してみます。