Create React App を使用して React アプリケーションを作成すると、ビルド時にウェブブラウザでのデバックに役立つソースマップが作成されます。
ソースマップは、CSS と JavaScript でそれぞれ作成されます。リストにあるパス中の xxxxxxxx
はハッシュ値です。
build\static\css\main.xxxxxxxx.css.map
build\static\js\main.xxxxxxxx.js.map
ソースマップとは、何かは次の記事を参照してください。
プロダクション環境にソースマップがデプロイされると、ウェブブラウザの開発者ツールで開発時のコメントまで含めてソースコードが丸見えになります。クライアント側でソースコードが見られる、改変されることを前提にコーディングすることは、当たり前として、精神衛生上、あまりよろしくないという議論があります。
Create React App で構成した React アプリケーションでは、プロダクションビルド時にデフォルトでソースマップを作成し、build フォルダ配下に配置します。このビルドセットをそのままプロダクション環境へデプロイするとソースマップが公開されます。
ソースマップをビルドセットから取り除いてプロダクション環境へデプロイしてもよいのですが、開発時は npm start
で開発中のソースコードで確認できるし、プロダクションビルド時に生成しないようにしています。
プロダクションビルド時にソースマップを生成するかどうかは、Create React App の詳細設定で変更できます。
次の公式ドキュメントにある GENERATE_SOURCEMAP
という設定です。
公式ドキュメントにある通り GENERATE_SOURCEMAP
設定は、プロダクションビルドでしか使用されないため、.env.production
ファイルに設定を含めると使い回しやすいです。Create React App のプロジェクトに含まれる .env
は、そもそも公開されて困る設定は含まれていない(ように構成している)ので、私はソースコード管理にも含めています。秘匿するべき情報や更新頻度が高い情報が含まれている場合なら、別途パラメーター管理されていると思うので、そこが設定を含むべき場所かと考えます。
Create React App の .env
やその優先順位については、次の公式ドキュメントの記事を参照してください。
具体的には、.env.production
ファイル中に次の設定を追記します。.env.production
ファイルがない場合は、Create React App は自動で作成しないため、自分で作成してください。
GENERATE_SOURCEMAP=false
フロントエンド開発の基本は、ソースコードを読まれても、ソースコードを改変されても安全な作りにする、ですので、保険的対策として必要な方は実施してみてください。