npm run build

ビルドするとどうなるか

npm run buildすることでbuildフォルダが作成される

(細かく言うとbableがtranpileして、webpackが複数のJSファイルやCSSファイルを1つのJSファイルに束ねる(=buildする)ことでbuildフォルダが作成される)

buildフォルダ「の中身を」レンタルサーバーにアップロードすれば、サイトが見られるようになる

つまりデプロイ完成

なぜビルドする必要があるのか

ローカルサーバーで動かすときはnpm startだけで行けるのに、

なぜ本番サーバーにデプロイするときはnpm run buildするのか?

理由は「その方が速くサイトを表示できるから」

コンポーネントやスタイルファイルなどをいくつものファイルに分けていると、

それらをサーバー側で読み込むのに時間がかかる

それをなるべく最低限のファイルにひとまとめにすることで

サイトの読み込みを速くする(=リクエストのオーバーヘッドを軽減する)のがビルドの仕事

Sourcemap

ビルドするとファイルサイズを小さくするためにファイルが難読化する(※これをMinify処理と呼ぶ)

これだとブラウザ上でエラーが発生したときにどこが間違っているのかわからない

難読化された状態から難読化前の状態に戻すための用意されているのがSourcemap

Sourcemapがある状態でChromeの開発者ツールを開いてみよう

Sourceタブ内で、index.jsなどの「開発時のJSファイル」を見ることができる。

BuildフォルダにはApp.jsやIndex.jsというファイルは存在しないのに何故見えるのかというと、

ChromeにはSourcemapを読み込んで、疑似的に開発コードを復元する機能が備わっているから

Reactのエラーが発生した際に開発者ツール上でどこが間違っているか知るために

このような機能がつくられた

セキュリティ上の懸念

Sourcemapはデバックの際に便利だが、

Sourcemapがあると開発者以外の外部からもReactのソースコードが丸見えになってしまうため、

セキュリティ上あまりよろしくない

Sourcemapを本番環境に置かないためには.envファイル内で以下の設定を書けば

ビルドの際にSourcemapを生成しないようにしてくれる

.envファイル内
REACT_APP_GENERATE_SOURCEMAP=false

ちなみにbuildフォルダ内の./static/js/*.jsがMinifyされたコードで、./static/js/*.js.mapがSourcemapである

.envファイルの設定を書き換えることでSourcemapが生成されていなければOK

これでは誰でもソースコードが見えてしまう