はじめに

Webアプリケーション開発において、Sourcemapはデバッグ作業を強力にサポートしてくれるツールです。
しかし、本番環境へのデプロイ時に、意図せずSourcemapを含めてしまうと、コンパイル後のコードではなく、生のソースコードが丸見えになってしまうという事態を招きます。

Sourcemapとは？なぜ本番環境に含めてはいけないのか

Sourcemapは、ビルド時にMinify（圧縮・難読化）されたJavaScriptやCSSコードと、元の開発コードを結びつける情報を持つファイルのことです。
これにより、ブラウザの開発者ツールでMinifyされたコードをデバッグする際に、まるで開発中の整形されたコードを見ているかのように扱うことができます。
しかし、この便利なSourcemapを本番環境にデプロイしてしまうと、誰でも容易にアプリケーションの元のソースコードを閲覧できるようになります。
意図しない情報漏洩を防ぐためにも、Sourcemapは本番環境には含めないよう注意しなければいけません。

ReactでのSourcemap設定

Create React App (CRA) でアプリケーションをビルドすると、デフォルトで本番環境向けのSourcemapが生成されます。
生成されたSourcemapファイルは、ビルド成果物と同じディレクトリ（通常は build/static/js や build/static/css）に出力されます。

Sourcemapの生成を無効にするには、ビルド時に環境変数 GENERATE_SOURCEMAP を false に設定します。
例えば、npmを使用している場合は package.json の build スクリプトを以下のように変更します。

// envファイルに下記を追加

"scripts": {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

または、プロジェクトルートに .env.production ファイルを作成し、以下の行を追加してもOKです。

GENERATE_SOURCEMAP=false

これにより、本番ビルド時にSourcemapファイルが生成されなくなります。

ViteでのSoucemap設定

最近はViteを利用することも多いかと思いますので、Viteの場合も記載しておきます。

vite.config.tsに設定を追加するだけです。もともとsourcemapオプションはデフォルトでfalseですが、明示しておくとわかりやすいかと思います。

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false
  }
})

sourcemapオプションの指定方法は以下です。

・sourcemap: false - ソースマップを生成しない（これがデフォルト）
・sourcemap: true - 通常のソースマップを生成
・sourcemap: 'inline' - インラインソースマップを生成
・sourcemap: 'hidden' - ソースマップファイルは生成するが、参照コメントは含めない

Next.jsでのSourcemap設定

一方、Next.js の本番ビルドでは、デフォルトでSourcemapは生成されません。もちろん開発時には生成してくれます。
Next.jsで本番環境用のSourcemapを生成したい場合は、next.config.js ファイルで productionBrowserSourceMaps オプションを true に設定する必要があります。
前述のセキュリティリスクを考慮すると、やる必要性は基本的にないかと考えています。

最後に

本番環境へのデプロイ時には、Sourcemapが含まれていないことを必ず確認し、安全なアプリケーション運用を心がけましょう！