2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Create React Appでソースマップの生成を抑制する。

Posted at

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 は自動で作成しないため、自分で作成してください。

.env.production
GENERATE_SOURCEMAP=false

フロントエンド開発の基本は、ソースコードを読まれても、ソースコードを改変されても安全な作りにする、ですので、保険的対策として必要な方は実施してみてください。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?