能否将React JS应用部署在S3存储桶？动态页面如何适配？

先澄清你的认知误区 #

React应用在浏览器中确实会根据用户操作动态更新页面内容，但这是客户端侧的动态渲染——当你执行npm run build（或yarn build）后，会生成一个build文件夹，里面全是静态的HTML、CSS、JS、图片等资源。这些文件本身是静态的，只是在用户浏览器中运行JS代码时，才会根据交互动态修改DOM内容，所以完全可以用S3托管。

部署React到S3的步骤 #

• 第一步：构建React应用
  在项目根目录执行构建命令：

  npm run build
  # 或者用yarn
  yarn build
  

  执行完成后会生成build目录，里面就是要部署的所有静态文件。

• 第二步：创建并配置S3存储桶

  1. 在AWS控制台创建一个S3存储桶，名称需符合S3命名规则（小写字母、数字、连字符组合，无特殊字符）。
  2. 开启存储桶的静态网站托管功能：进入存储桶的「属性」标签，找到「静态网站托管」选项并启用，设置索引文档为index.html，错误文档同样设为index.html（因为React是单页应用，前端路由需要统一由index.html处理，所有404请求都要指向该文件）。
  3. 设置存储桶权限：修改存储桶策略，允许公开读取所有对象，策略示例如下：

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

     同时要确保存储桶的「阻止公共访问」设置中，关闭相关的阻止选项，否则权限策略无法生效。

• 第三步：上传静态文件到S3
  可以直接在AWS控制台的存储桶「对象」标签中，将build目录下的所有文件上传；也可以用AWS CLI工具批量上传，命令如下：

  aws s3 sync build/ s3://你的存储桶名称/
  

• 第四步：测试访问
  完成上传后，在S3静态网站托管设置里找到给出的网站端点URL，访问即可看到你的React应用。

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