Question

我在aws上部署了休息服务。现在我想部署一个前端。这是一个reactjs应用程序。 build会生成一个包含html和assets的文件夹。

现在我想在aws上托管这个应用程序并让它与我那里的休息服务交谈。 aws是否为此提供了一些专用解决方案（在同一域下进行静态托管以避免跨源问题）或者我必须构建自定义的东西？比如把文件放在s3上还是与我的其他服务捆绑在一起？

Answer 1

您可以使用S3和CloudFront部署和托管您的React应用程序：

为您的应用创建一个S3存储桶（例如myapp.example.com）。不要为您的存储分配任何公共读取访问权限。
将React ./build目录的内容复制到S3存储桶。
创建一个具有指向S3存储桶的S3源的CloudFront Web分配。将替代域名（CNAME）设置为myapp.example.com。
在原始设置＆gt;下将限制存储区访问设置为Yes并创建新的源访问标识。（不要让CloudFront授予您的存储桶读取权限。您将在接下来的步骤中手动执行）
在错误页面下，为403 Forbidden添加新的错误响应，将自定义错误响应设置为Yes，响应页面路径至/index.html和 HTTP响应代码至200 OK。
使用您的DNS提供商，为CNAME添加指向您的CloudFront分配的域名的myapp.example.com记录（例如XXXXXXXXXXXXXX.cloudfront.net）。 注意：这可以通过Route 53中的ALIAS A主机记录来完成。

将以下存储桶策略添加到S3中的应用存储桶（其中XXXXXXXXXXXXX是您在上面步骤4中创建的源接入标识ID。此值可在CloudFront主页的安全下找到左侧边栏）：

{
    "Version": "2008-10-17",
    "Id": "Policy1415003215468",
    "Statement": [
        {
            "Sid": "Stmt1415003056675",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myapp.example.com/*"
        }
    ]
}

这将拒绝使用直接S3网址访问您的应用。它只允许通过CloudFront进行访问。

将REST API配置中的Access-Control-Allow-Origin设置为http://myapp.example.com。

启用并执行SSL
在您的CloudFront的分发设置中，选择您的自定义SSL证书。
在行为下，将默认行为的查看器协议政策设置为Redirect HTTP to HTTPS。
将REST API配置中的Access-Control-Allow-Origin更改为https://myapp.example.com。

Answer 2

您可以使用AWS CloudFront和S3部署反应应用程序。目前，没有直接的方法来设置CloudFront来处理React Routes（如果重新加载页面以提供索引页面）。为此，作为一种变通方法，您可以在CloudFront中使用错误路由来处理此问题。

有关设置CloudFront分配和S3存储桶的更多详细信息，请参阅Deploying Angular/React Apps in AWS上的文章。您还可以使用文章中的CloudFormation 启动堆栈按钮来配置整个设置。

要设置包含Restful API的完整堆栈应用程序，请参阅Full Stack Serverless Web Apps with AWS。

如何在AWS上部署静态js应用程序？

2 个答案: