如何使 ReactJS 应用程序在 AWS 上处于活动状态/可见答案

【问题标题】：How to make a ReactJS app active/visible on AWS如何使 ReactJS 应用程序在 AWS 上处于活动状态/可见
【发布时间】：2018-10-31 16:48:37
【问题描述】：

我在 AWS 上开发了一个 reactJS 项目（前端），它的 RESTFUL API 来自 heroku。它们完全分开，即前端和后端。

我已成功将我的文件上传到 S3，并激活了我的 CloudFront 分配，但我真的不知道出了什么问题，因为当我点击从域名生成的 URL 时，我看不到我的 react 应用程序。

我已经检查了这个 SO answer，但它没有帮助。

任何帮助将不胜感激。

【问题讨论】：

stackoverflow.com/q/50250307/5171417 的可能重复项。我已经在那篇文章中回答了它并且它有效。请检查。

标签： reactjs amazon-web-services amazon-s3 amazon-cloudfront

【解决方案1】：

首先，将它们部署在不同的服务器/云上是非常好的。能给个网址吗？我觉得这不是不同云的问题，而是配置问题。您可以先将一个简单的 html 文件放在同一个 S3 存储桶上，然后看看您是否可以通过您的域名访问它。

假设您将 react 应用程序 example.com 托管在名为 ant 的存储桶中。因此，继续在 bucket ant 中添加额外的 test.html。然后尝试 example.com/test.html .. 这将确保您的域设置等正确

【讨论】：

这正是我所做的，但我留下了一个白色的空白页。
是空白页吗？或找不到页面！您是否在 test.html 中添加了一些文本？你能在浏览器上看到那个文本吗？
我的意思是我得到一个空白页，因为我没有从 index.html 呈现我的反应应用程序，但我的视图中有 js 文件，这些文件呈现了我的所有视图。有趣的是，整个事情在本地运行良好，但 AWS 似乎没有得到我正在做的事情
你能给我你正在尝试的域名吗..让我调试一下..应该没那么难。
这个 index.html 很好。我确实查看了这个文件的源代码。在加载你的 RESTFul API 时看不到任何东西。你所做的只是包括一些 jquery 等 js ！你确定当你在本地笔记本电脑上加载这个 index.html 时它可以正常工作！

【解决方案2】：

我在尝试通过 cloudront 运行 react.js 应用时遇到了类似的问题，您应该检查以下几点：

确保您的 s3 托管存储桶具有公共读取访问权限，或者您已使用 s3 存储桶设置您的云端原始访问策略，方法是首先在云端创建一个源访问身份，然后通过访问政策：

{
    "Version": "2012-10-17",
    "Id": "MyPolicy",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR_CLOUDFRONT_ORIGIN_ACCESS_ID"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_S3_BUCKET/*"
        }
    ]
}

确保您的 s3 存储桶具有允许来自任何域的请求的 cors 策略，类似于：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>

如果您在 react.js 应用程序中的 package.json 文件有一个主页，您应该删除它，因为应用程序希望从该 url 托管而不是云端域。带有主页的 package.json 示例：

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "homepage": "https://somepage.com/home",
  "repository": {},
  "dependencies": {}
}

确保您在云端分发中的根对象是 index.html
确保在 react 应用中运行“npm run build”后，您只是将构建文件夹与 s3 存储桶同步。
确保如果您使用 aws cli 将构建文件移动到 s3 存储桶，请使用命令“aws s3 sync build/s3://YOUR_DEPLOY_BUCKET/--acl public-read --delete”，这确保仅将最新的构建文件上传到 s3，并删除所有旧文件。
将文件推送到 s3 后，最好运行云端失效，以确保从缓存中删除旧文件，并且任何新请求都提供新文件。您可以运行“aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths '/*'”来完成此操作。
因为 react.js 使用虚拟 dom，并且实际提供的唯一 html 文档是 index.html 文档，所以您需要将自定义错误响应添加到您的 cloudfront 分发中，因为 cloudfront 会期望提供类似 about.html 的网页或contact.html，具体取决于您的反应应用程序中的路线。我建议为 http 代码 400-404 添加自定义错误响应，并将响应映射到状态代码 200，并重定向到“/”路由。这确保了如果 cloudfront 找不到诸如 about.html 之类的文件，它将保留在 index.html 文件（您的 react 应用程序所在的位置）上，并且 react 路由器将虚拟路由到您的 /about 路由。示例配置见下：

【讨论】：

【解决方案3】：

您是否尝试过将 S3 存储桶设置为“公共”？您可以为整个存储桶设置策略或公开某些对象。 here’s an AWS manual

很有可能，您的 React 应用需要类似的东西

【讨论】：