作成日時:2025年5月6日 22:10
更新日時:2025年5月6日 22:10
Next.js
Next.js
Webアプリケーション開発において、Sourcemapはデバッグ作業を強力にサポートしてくれるツールです。
しかし、本番環境へのデプロイ時に、意図せずSourcemapを含めてしまうと、コンパイル後のコードではなく、生のソースコードが丸見えになってしまうという事態を招きます。
Sourcemapは、ビルド時にMinify(圧縮・難読化)されたJavaScriptやCSSコードと、元の開発コードを結びつける情報を持つファイルのことです。
これにより、ブラウザの開発者ツールでMinifyされたコードをデバッグする際に、まるで開発中の整形されたコードを見ているかのように扱うことができます。
しかし、この便利なSourcemapを本番環境にデプロイしてしまうと、誰でも容易にアプリケーションの元のソースコードを閲覧できるようになります。
意図しない情報漏洩を防ぐためにも、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ファイルが生成されなくなります。
一方、Next.js の本番ビルドでは、デフォルトでSourcemapは生成されません。もちろん開発時には生成してくれます。
Next.jsで本番環境用のSourcemapを生成したい場合は、next.config.js
ファイルで productionBrowserSourceMaps
オプションを true
に設定する必要があります。
前述のセキュリティリスクを考慮すると、やる必要性は基本的にないかと考えています。
本番環境へのデプロイ時には、Sourcemapが含まれていないことを必ず確認し、安全なアプリケーション運用を心がけましょう!