如何携source-map部署应用至Heroku？本地正常线上失效排查

我之前碰到这么个头疼的情况：本地环境下webpack配置了source-map，生成的.map文件也正常，代码调试完全没问题，但把应用推到Heroku之后，打开浏览器审查元素发现source-map根本没生效——代码全是压缩后的，连个能定位的地方都没有。

我的配置信息 #

先给大家看看我的webpack生产环境配置：

devtool: 'source-map',
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules|dist|build/,
      options: {
        babelrc: true,
      },
    },
    {
      test: /\.local\.(css|scss)$/,
      use: ExtractLocal.extract({
        fallback: 'style-loader?sourceMap',
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              minimize: true,
              modules: true,
              importLoaders: 1,
              localIdentName: '[local]___[name]__[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, './src/client/styling/styles/variables.scss'),
              ],
            },
          },
        ],
      }),
    },
  ],
},
plugins: [
  // new BundleAnalyzerPlugin(),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
]

还有package.json里的构建和启动脚本：

"build-client": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"start": "cross-env NODE_ENV=production node ./src/build/bundle.js",

排查过程 #

一开始我以为是Heroku的问题，刷新应用后去看heroku logs，发现了和source-map相关的H12请求超时错误——这说明.map文件其实是存在的，但浏览器根本拿不到它。

最终解决方案 #

折腾了半天，才发现问题根本不在Heroku，而是我在Heroku应用和服务器之间加的Nginx配置！原来的Nginx静态资源规则里没包含.map扩展名：

location ~* \.(js|css|gif|png|jpg|ico|svg|eot|ttf|otf|woff|woff2|json|xml)$ {
  root "/app/src/dist/";
  add_header Pragma public;
  add_header Cache-Control public;
  expires 1y;
  gzip_static on;
  gzip off;
  log_not_found off;
  access_log off;
}

只要把map加到扩展名列表里，改成下面这样：

location ~* \.(js|css|gif|png|jpg|ico|svg|eot|ttf|otf|woff|woff2|json|xml|map)$ {
  root "/app/src/dist/";
  add_header Pragma public;
  add_header Cache-Control public;
  expires 1y;
  gzip_static on;
  gzip off;
  log_not_found off;
  access_log off;
}

重新部署后，source-map就正常生效了，终于能愉快地调试压缩后的代码啦！

内容的提问来源于stack exchange，提问作者Igor-Vuk