如何将React JS应用打包部署到S3桶？部署后如何隐藏源码仅提供打包JS文件？

我来一步步拆解这个流程，其实操作起来很清晰：

第一步：生成生产环境打包文件 #

不管你是用Create React App搭建的项目还是自定义配置的React项目，首先得把代码打包成生产环境可用的静态文件：

• 打开终端，切换到你的React项目根目录
• 运行命令：npm run build（用yarn的话就是yarn build）
  执行完这个命令后，项目根目录会多出一个build文件夹，里面就是所有部署需要的文件——压缩后的HTML、CSS、JS，还有图片、字体这些静态资源。

第二步：配置S3存储桶 #

1. 登录AWS控制台，找到S3服务，创建一个新存储桶（或者用已有的）。注意桶名必须全局唯一，选个离你的用户群体近的区域就行。
2. 开启静态网站托管：进入存储桶的「属性」标签，找到「静态网站托管」选项，点击「启用」，然后设置：
   • 索引文档填index.html（这是React单页应用的入口文件）
   • 错误文档也填index.html——这很关键，不然用户刷新页面或者直接访问前端路由时会出现404错误，因为S3默认不识别React的前端路由规则。

第三步：上传打包文件 #

1. 进入存储桶的「对象」标签，点击「上传」，把build文件夹里的所有内容（注意是里面的文件和子文件夹，不是build文件夹本身）都上传上去。
2. 设置文件权限：必须让这些静态文件能被公开访问，不然用户打不开你的网站。你可以在上传时勾选「设置所有对象的公共读权限」，或者上传完后批量修改已有文件的权限。

第四步：配置桶策略（可选但更安全） #

如果不想逐个设置文件权限，可以给存储桶添加一个策略，允许所有人读取里面的静态文件：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::你的存储桶名称/*"
    }
  ]
}

把「你的存储桶名称」替换成实际的桶名，然后在存储桶的「权限」标签里找到「桶策略」，粘贴进去保存即可。

第五步：测试访问 #

完成所有配置后，你可以在「静态网站托管」设置里找到S3提供的访问端点，打开这个链接就能看到你的React应用正常运行了。

Chrome能看到完整的组件、Redux等源码，核心原因是React生产打包默认会生成source map文件——这些文件会帮浏览器把压缩后的JS映射回你的原始源码，方便调试，但也意外把源码暴露了出去。解决方法很直接：

方法一：禁用source map生成 #

• 如果是Create React App，在项目根目录新建一个.env.production文件，添加一行配置：

  GENERATE_SOURCEMAP=false
  

  然后重新运行npm run build，这次生成的build文件夹里就不会有.map后缀的source map文件了。
• 如果是自定义Webpack配置，找到生产环境的Webpack配置文件，把devtool设置为false：

  module.exports = {
    // 其他配置项...
    devtool: false,
    // 其他配置项...
  };
  

  这样Webpack就不会生成source map文件了。

方法二：不要把源码上传到S3 #

• 只上传build文件夹里的内容，绝对不要把项目的src、public（除了build里的编译后文件）这些源码文件夹传到S3上。
• 检查一下你的S3存储桶，删掉任何可能包含源码的文件，比如.jsx、.tsx或者未打包的JS文件。

方法三：确认压缩混淆生效 #

React官方的npm run build命令默认会对JS文件进行压缩和混淆，生成的代码是一堆无可读性的字符。禁用source map后，浏览器里只能看到这些压缩后的代码，再也没法还原成你的原始组件、Redux逻辑等源码了。

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