Ubuntu下Node.js部署React应用如何隐藏Chrome Sources标签页源码文件

第一步：排查构建配置是否生效 #

你已经配置的GENERATE_SOURCEMAP=false是create-react-app官方提供的关闭生产环境sourcemap的方案，未生效首先排查以下点：

• 确认.env文件放在项目根目录，和package.json同层级，修改配置后必须重新执行yarn build生成新的构建产物
• 构建完成后打开build文件夹，搜索是否存在.js.map后缀的文件，只要没有这类文件，说明sourcemap已经关闭成功
• 如果你已经执行过eject操作自定义了webpack配置，需要手动修改config/webpack.config.js中生产环境的devtool配置为false，替代GENERATE_SOURCEMAP配置项

第二步：清理旧缓存与历史文件 #

配置生效后仍能看到源码，大多是旧资源残留导致：

• 不要直接用新构建产物覆盖服务器上的旧build文件夹，先删除服务器上的整个旧build目录，再上传新构建的build文件夹，避免历史遗留的.map文件被访问
• 重启pm2进程时优先执行pm2 delete 你的进程名 再重新启动进程，避免pm2缓存旧资源
• 测试时使用浏览器无痕模式，或者手动清除站点缓存，避免浏览器缓存之前拉取过的sourcemap文件
• 如果站点接入了CDN，需要刷新CDN的所有静态资源缓存，清除CDN节点上存储的旧.map文件

第三步：服务端增加防护规则（推荐） #

为了避免后续误操作上传sourcemap文件，可以在服务端配置禁止所有.map文件的访问：
如果你用Nginx作为反向代理，在站点配置中添加以下规则：

location ~* \.map$ {
    deny all;
    return 403;
}

如果是用Node.js直接提供静态资源服务，可以在路由逻辑中增加拦截，所有请求.map后缀的资源直接返回403状态码。

完成以上操作后，浏览器Sources面板只会展示混淆压缩后的运行代码，无法看到原始的组件、业务逻辑源码，达到隐藏效果。

内容的提问来源于stack exchange，提问作者GLHF