在AWS Amplify上部署React Web app时获取403拒绝访问错误

Question

这几天我一直在绞尽脑汁。我正在尝试在AWS Amplify上部署我的react应用程序。当我启动应用程序时，我被正确引导到登录页面（使用Auth0 Universal login），登录后，我通过回调URL被重定向回我的web应用程序。

当我的页面加载时，我收到以下消息

此XML文件似乎没有与之关联的任何样式信息。文档树如下所示。

<Error>
<Code>AccessDenied</Code>

<Message>Access Denied</Message>

<RequestId>B2173BDEE0658858</RequestId>

<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>

我不是通过s3 bucket托管web应用程序，而是直接将构建文件上传到AWS Amplify。

对这个问题有什么想法吗？

Answer 1

创建zip文件夹时，请确保压缩生成输出的内容，而不是顶层文件夹。例如，如果您的生成输出生成了一个名为“build”或“public”的文件夹，请首先导航到该文件夹，选择所有内容，然后将其压缩。如果不这样做，您将看到“拒绝访问”错误，因为站点的根目录将无法正确初始化。

  <Error>
      <Code>AccessDenied</Code>
      <Message>Access Denied</Message>
      <RequestId>4442587FB7D0A2F9</RequestId>
      <HostId>...</HostId>
 </Error>

• https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html

Answer 2

Use this rule on amplify console.
[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]