なぜデプロイ時にnpm run buildが必要なのか?

ローカルサーバで動かすときはnpm startだけで行けるのに、なんでサーバにデプロイするときはnpm run buildするの？

と、ふと思いました。だってローカルサーバーで見るときは、buildしたファイルを見てるわけじゃないじゃん？？？

npm run buildは何をしているのか

一言で言うと、Reactだと最低限存在するApp.jsやindex.js、そしてその他諸々のcomponentファイルやcssファイルをbuildフォルダに生成します。(もっと細かく言うと、bableがtranspileして、webpackでビルドしています。)

ざっくり書くとこんな感じ。

/build/static
  ├ css/
    └ main.css
  ├ js/ 
    └ main.js

npm run buildして出来る詳しいファイル名や説明については、Reactの公式docに詳しく書いてありました。

で、なぜbuildが必要なのか？

一言で言うと、その方が速いからです。
Reactの場合、コンポーネントやらスタイル用ファイルなどをいくつものファイルに分けていた場合、それをサーバ側で読み込むのは数秒とは言わずとも時間がかかります。表示に時間がかかるサイトは離脱率も高いし、フロントエンドの最大の敵とも言えるでしょう。
それをなるべく最低限のファイルにまとめることでサイトの読み込みを速くするという狙いがあります。
ただ、このbuildフォルダ配下にできるビルドした結果ファイルについては難読化されているため、ブラウザ上からエラーが起きているソースの箇所を見たい際にはちょっと不便です。そんな際に難読化する前の状態をブラウザで表示させるためにもう一つ用意されているファイルがSourcemapです。

Sourcemapってなに

Sourcemapは上記に書いた通り、ビルドした際にブラウザ上から難読化する前のソースをブラウザ上でマッピングして見せてくれる為のファイルです。ただ、デメリットもあって、開発者以外の外部からもReactのソースコードが丸見えになってしまうため、セキュリティ上あまりよろしくないとするところもあります。
Sourcemapを本番環境に置きたくない、というときには.envファイル内で以下の設定を書けばビルドの際にSourcemapを生成しないようにしてくれます。

.env

REACT_APP_GENERATE_SOURCEMAP=false

参考: React Advanced Configuration

と、Reactのビルドの際に何が起きるのかについてまとめてみました。
参考になれば幸いです。