如何在AWS上部署静态js应用程序？-Java 学习之路

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

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

2 回答

0
您可以使用S3和CloudFront部署和托管React应用程序：
- 为您的应用创建一个S3存储桶（例如， myapp.example.com ） . 不要为您的存储分配任何公共读取访问权限 .
- 将React ./build 目录的内容复制到S3存储桶 .
- 创建具有指向S3存储桶的S3源的CloudFront Web分配 . 将 Alternate Domain Names (CNAMEs) 设置为 myapp.example.com .
- 在 Origin Settings >> Restrict Bucket Access 至 Yes 并创建新的原始访问标识 . （唐't let CloudFront to grant read permissions on your bucket. You'将在接下来的步骤中手动完成）
- 在 Error Pages 下，为 403 Forbidden 添加新的错误响应，将 Customize Error Response 设置为 Yes ， Response Page Path 设置为 /index.html ， HTTP Response Code 设置为 200 OK .
- 使用DNS提供程序，为 myapp.example.com 添加指向CloudFront分配的域名的 CNAME 记录（例如， XXXXXXXXXXXXXX.cloudfront.net ） . 注意：这可以通过Route 53中的 ALIAS A主机记录完成 .
- 将以下存储桶策略添加到S3中的应用程序存储区（其中XXXXXXXXXXXXX是您在上面的步骤4中创建的源访问标识ID . 此值可在CloudFront主页左侧边栏的 Security 下找到）：
```
{
    "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 .
ENABLE AND ENFORCE SSL
- 在CloudFront的 Distribution Settings 中，选择您的自定义SSL证书 .
- 在 Behaviors 下，将 Viewer Protocol Policy 的默认行为设置为 Redirect HTTP to HTTPS .
- 将REST API配置中的 Access-Control-Allow-Origin 更改为 https://myapp.example.com .
回复于 2024-04-30T09:14:55+08:00
2

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

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

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

回复于 2024-04-30T09:14:55+08:00

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

2 回答

相关问题