Q&A
バンドルするもう一つの利点として、一つのファイルにまとめる過程で必要な関数やライブラリが揃ってることが確認できるってのがあると思います。
ビルドやバンドルの概念がいまいち理解できていません。
ブラウザで表示しない場合はそもそもバンドルの必要性はないのでしょうか？
フロントエンド: React
バックエンド： express
フロントエンドは
http://myserver.com:3000(URLは仮のもの)
にアクセスするとReactで作った画面を表示する。
画面を表示するときにバックエンドからデータを取ってくる。
バックエンドは
http://myserver.com:4000/api/users
http://myserver.com:4000/api/products
などにアクセスするとMySQLからデータを読み込んでjsonを返す。
こんな感じの構成です。
フロントエンドは
create-react-scriptsで作り始めたところ、
npm run buildというコマンドがついてきました。
ビルドで作成されたbuildというディレクトリを本番サーバーの
/usr/share/nginx/html/frontend/
というパスにコピーし
/etc/nginx/conf.d/default.conf
にいろいろ設定したところ
http://myserver.com:3000のURLでReactの画面が表示されるようになりました。
バックエンドは
npm install express-generator
express --view=ejs
というコマンドでベースとなる環境を作りました。
MySQLで読み書きしてJSONを返す所までは作ってローカル環境で動作確認済み。
しかし、これを本番環境に持って行く時の一般的な手順が分かりません。
gitでファイルをすべて本番サーバーにコピーしてnpm startすれば動きますよね？
しかし、webpackのようなツールを使ってバンドル？ビルド？をする必要があるのかがいまいちわかりません。
個人的なビルド（バンドル）への理解としては
・webpackでバンドルをすると複数のファイルが1つにまとまる
・ブラウザで表示するとき、複数ファイルよりも1つにまとめたファイルを読み込む方が速い
そうすると、バックエンドがjsonを返すだけ、ブラウザでの表示を前提としない場合は
もしかしてバンドルしなくてもいいの？
それともバンドルをするとバックエンドも動作が速くなるの？
と疑問に思っております。
回答1件
0
ベストアンサー
ブラウザで表示しない場合はそもそもバンドルの必要性はないのでしょうか？
はい。
個人的なビルド（バンドル）への理解としては
・webpackでバンドルをすると複数のファイルが1つにまとまる
・ブラウザで表示するとき、複数ファイルよりも1つにまとめたファイルを読み込む方が速い
ブラウザの場合は、importを処理できる環境がまだ限られていますし、requireは処理できませんので、それらを事前にWebpackなどで解決しておかないと動作させづらい、あるいは動作できない、ということになります。
投稿2021/03/19 07:06
総合スコア145971
Webpackの役割
・ブラウザによってjavascriptの使える機能が違う
・webpackはブラウザの多様性を吸収できるようにjavascriptを書き換えてくれる
フロントエンド
・ブラウザごとの差異を意識する必要がある
・webpackが必要
バックエンド
・ブラウザごとの差異を意識する必要がない
・webpackは不要
ってことですね。
速い・遅いの問題ではなく、
動く・動かないの問題があるのか。
あなたの回答
tips
プレビュー
