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
これでは誰でもソースコードが見えてしまう