"The specified key does not exist" 对于部署在 S3 上的 VueJS 应用程序，使用 CloudFront

Question

我已经使用 Route53 部署了一个带有 S3 和 CloudFront 的 VueJS 应用程序。似乎一切正常。我可以访问位于 https://my-domain.com 的站点，并且可以导航到我使用 Vue 路由器设置的不同路线。但是，当我尝试直接访问 https://my-domain.com/about 时，我看到以下错误：

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<link type="text/css" id="dark-mode" rel="stylesheet" href=""/>
<style type="text/css" id="dark-mode-custom-style"/>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>about</Key>
<RequestId>8371CJFJ48JM68239</RequestId>
<HostId>
/fQp7V6SuN0eDPgZpTroQrrxmfVQJTjXtroij56OIJONB56048OIaZDa4snkjc/Ygr/oZu0=
</HostId>
</Error>

以下是我的 AWS 资源的设置：

S3 存储桶

属性

所有属性都被禁用（我没有设置静态网站托管，因为我使用的是 https）

权限（Public）

Public 访问设置

所有四个选项都设置为 false

访问控制列表

Public访问：每个人都可以阅读和列出对象

存储桶策略

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mybucketname.com/*"
        }
    ]
}

CORS 配置

这里什么都没有设置

53 号公路

我的域有一个包含 5 条记录的托管区域：

mydomain.com：一条记录；指向 CloudFront 分布
默认NS和SOA记录我没改过
*.mydomain.com：一条记录；还指向前端子域的 CloudFront 分布
api.mydomain.com：一条记录；指向后端 API 服务

CloudFront

这是我的 CloudFront 分配的 General 设置：

Distribution ID: 12356OIJSGSU9I
ARN: arn:aws:cloudfront::123456789012:distribution/ABCD1234
Log Prefix: -
Delivery Method: Web
Cookie Logging: Off
Distribution Status: Deployed
Comment: -
Price Class: Use All Edge Locations (Best Performance)
AWS WAF Web ACL: -
State: Enabled
Alternate Domain Names (CNAMEs):
*.mydomain.com
mydomain.com
SSL Certificate: mydomain.com (abc1234-1234-1234-1234-abcd1234)
Domain Name: abcd1234.cloudfront.net
Custom SSL Client Support: Only Clients that Support Server Name Indication (SNI)
Security Policy: TLSv1.1_2016
Supported HTTP Versions: HTTP/2, HTTP/1.1, HTTP/1.0
IPv6: Enabled
Default Root Object: index.html
Last Modified: 2019-02-19 11:45 UTC-5
Log Bucket: -

我没有设置任何来源组。我不确定我是否需要这个，但听起来它可以帮助解决这个问题。

我也听说过 AWS Amplify (https://console.aws.amazon.com/amplify/)。

我可以更改哪些设置，以便将对我的域的非根请求路由到 VueJS 应用程序？

Answer 1

这是 SPA 的典型问题，因为像 /dashboard 这样的路由并不是服务器上的真实物理路由。要解决此问题，只需打开您的 CloudFront 分配，转到 "Error Pages" 选项卡，然后使用以下设置创建自定义错误响应：

这实际上是告诉 CloudFront 忽略 404 错误，只 return HTTP 200 响应，并指向 /index.html。您的 SPA 将通过 Vue Router 在内部处理任何 "page not found" 错误。可能会有所帮助。

Answer 2

我通过简单地在您的 s3 存储桶的错误文档部分添加 index.html 来解决这个问题 -> 编辑静态网站托管 -> 错误文档

check here

"The specified key does not exist" 对于部署在 S3 上的 VueJS 应用程序，使用 CloudFront

"The specified key does not exist" for VueJS app deployed on deployed on S3 with CloudFront

amazon-web-services

vue.js

amazon-s3

amazon-cloudfront

amazon-route53