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

Javascript 如何在AWS上部署静态js应用程序?,javascript,reactjs,amazon-web-services,deployment,cross-domain,Javascript,Reactjs,Amazon Web Services,Deployment,Cross Domain,我在aws上部署了rest服务。现在我想部署一个前端。这是一个应用程序。build生成一个包含html和资源的文件夹 现在我想在aws上托管这个应用程序,让它与我的rest服务进行对话。aws是否为此提供了一些专门的解决方案(在同一个域下进行静态托管以避免跨源问题),或者我必须构建一些定制的解决方案?如将文件放在s3上或与我的rest服务捆绑在一起?您可以使用s3和CloudFront部署和托管React应用程序: 为你的应用创建一个S3存储桶(例如,myapp.example.com)。不要为

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


现在我想在aws上托管这个应用程序,让它与我的rest服务进行对话。aws是否为此提供了一些专门的解决方案(在同一个域下进行静态托管以避免跨源问题),或者我必须构建一些定制的解决方案?如将文件放在s3上或与我的rest服务捆绑在一起?

您可以使用s3和CloudFront部署和托管React应用程序:

  • 为你的应用创建一个S3存储桶(例如,
    myapp.example.com
    )。不要为您的bucket分配任何公共读取访问权限,目前还没有
  • 将React
    /build
    目录的内容复制到S3存储桶中
  • 创建一个CloudFront Web发行版,其S3来源指向您的S3存储桶。将备用域名(CNAMEs)设置为
    myapp.example.com
  • 原点设置下>将限制桶访问设置为
    ,并创建新的原点访问标识。(不要让CloudFront对您的bucket授予读取权限。您将在接下来的步骤中手动执行此操作)
  • 错误页面下,为
    403禁止
    添加新的错误响应,将自定义错误响应设置为
    Yes
    响应页面路径设置为
    /index.html
    并将HTTP响应代码设置为
    200 OK
  • 使用您的DNS提供商,为
    myapp.example.com
    添加一条
    CNAME
    记录,该记录指向您的CloudFront发行版的域名(例如
    xxxxxxxxx.CloudFront.net
    )。注意:这可以通过路由53中的
    别名
    主机记录来完成
  • 将以下bucket策略添加到S3中的应用程序bucket中(其中xxxxxxxxxxxx是您在上述步骤4中创建的原始访问标识ID。此值可在CloudFront主页左侧栏的安全性下找到):

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

  • 将REST API配置中的
    访问控制允许原点设置为
    http://myapp.example.com

    启用并强制实施SSL

  • 在CloudFront的分发设置中,选择自定义SSL证书

  • 行为下,将默认行为的查看器协议策略设置为
    将HTTP重定向到HTTPS
  • 将REST API配置中的
    访问控制允许原点
    更改为
    https://myapp.example.com

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

  • 为你的应用创建一个S3存储桶(例如,
    myapp.example.com
    )。不要为您的bucket分配任何公共读取访问权限,目前还没有
  • 将React
    /build
    目录的内容复制到S3存储桶中
  • 创建一个CloudFront Web发行版,其S3来源指向您的S3存储桶。将备用域名(CNAMEs)设置为
    myapp.example.com
  • 原点设置下>将限制桶访问设置为
    ,并创建新的原点访问标识。(不要让CloudFront对您的bucket授予读取权限。您将在接下来的步骤中手动执行此操作)
  • 错误页面下,为
    403禁止
    添加新的错误响应,将自定义错误响应设置为
    Yes
    响应页面路径设置为
    /index.html
    并将HTTP响应代码设置为
    200 OK
  • 使用您的DNS提供商,为
    myapp.example.com
    添加一条
    CNAME
    记录,该记录指向您的CloudFront发行版的域名(例如
    xxxxxxxxx.CloudFront.net
    )。注意:这可以通过路由53中的
    别名
    主机记录来完成
  • 将以下bucket策略添加到S3中的应用程序bucket中(其中xxxxxxxxxxxx是您在上述步骤4中创建的原始访问标识ID。此值可在CloudFront主页左侧栏的安全性下找到):

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

  • 将REST API配置中的
    访问控制允许原点设置为
    http://myapp.example.com

    启用并强制实施SSL

  • 在CloudFront的分发设置中,选择自定义SSL证书

  • 行为下,将默认行为的查看器协议策略设置为
    将HTTP重定向到HTTPS
  • 将REST API配置中的
    访问控制允许原点
    更改为
    https://myapp.example.com

  • 您可以使用AWS CloudFront和S3部署react应用程序。目前,没有直接的方法设置CloudFront来处理React路由(如果页面被重新加载以服务于索引页面)。为此,作为一种解决方法,您可以使用CloudFront中的错误路由来处理此问题

    有关设置CloudFront分发和S3存储桶的更多详细信息,请参阅上的文章。您还可以使用本文中的CloudFormation启动堆栈按钮来配置整个设置


    要设置包括Restful API的完整堆栈应用程序,请参阅。

    您可以使用AWS CloudFront和S3部署react应用程序。目前,没有直接的方法设置CloudFront来处理React路由(如果页面被重新加载以服务于索引页面)。为此,作为一种解决方法,您可以使用CloudFront中的错误路由来处理此问题

    有关设置CloudFr的更多详细信息
    {
        "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/*"
            }
        ]
    }