代码之家 › 专栏 › 技术社区 › antzshrek

如何在AWS上激活/显示ReactJS应用程序

amazon-cloudfront amazon-s3 amazon-web-services reactjs

antzshrek · 技术社区 · 6 年前

我已经成功地将我的文件上传到了S3,并且激活了我的CloudFront发行版,但是我真的不知道怎么回事,因为当我点击域名生成的URL时,我看不到我的react应用程序。

我已经检查过了 answer

任何帮助都将不胜感激。

1 回复 | 直到 6 年前

Deepak Singhal 6 年前

首先,将它们部署在不同的服务器/云上是非常好的。你能给出网址吗?我觉得这不是不同云的问题,而是配置的问题。你能先把一个简单的html文件放在同一个S3 bucket上,看看你能不能通过你的域名访问它。

假设你有你的反应应用程序example.com网站托管在名为ant的bucket中。所以,继续,把额外的测试.html桶里的蚂蚁。那就试试吧example.com/test网站.html。。这将确保您的域设置等是正确的

Ethan Harris 4 年前

我在尝试运行一个反应.js通过CloudFront应用程序,您应该检查以下几点:

{
    "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 bucket具有允许来自任何域的请求的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>

如果你的包.json文件在反应.js应用程序有一个主页,你应该删除它,因为这个应用程序希望从该url而不是cloudfront域托管。例子包.json带主页:

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

确保在react应用程序中运行“npm run build”之后,您只将构建文件夹与s3 bucket同步。
确保如果使用aws cli将生成文件移动到s3 bucket,则使用命令“aws s3 sync build/s3://your\u DEPLOY\u bucket/--acl public read--delete”,这样可以确保仅将最新的生成文件上载到s3,并且删除所有旧文件。
将文件推送到s3之后,最好运行cloudfront失效,以确保从缓存中删除旧文件,并且任何新请求都会提供新文件。您可以运行“aws cloudfront create invalidation--distribution id YOUR\u CF\u distribution\u id--paths'/*'”来完成此任务。

Artem Sukhoroslov 5 年前

你试过把S3桶公之于众吗? 您可以为整个bucket设置策略,也可以公开某些对象。 hereâs an AWS manual

很可能,你的react应用程序需要这样的东西