对于使用CloudFront部署在S3上的VueJS应用程序，“指定的密钥不存在”

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，因此我没有设置静态网站托管）

权限（公共）

公共访问设置

所有四个选项都设置为false

访问控制列表

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

铲斗政策

{
    "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服务的ALB

CloudFront

这是General我的CloudFront发行版的设置：

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/）。

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

Answer 1

这是SPA的一个典型问题，因为类似的路由/dashboard不是服务器上的实际物理路由。要解决此问题，只需打开您的CloudFront发行版，转到“错误页面”选项卡，然后使用以下设置创建自定义错误响应：

这实际上是在告诉CloudFront忽略404错误，而只是返回HTTP 200响应，并指向/index.html。您的SPA将通过Vue Router内部处理所有“找不到页面”错误。这可能会有所帮助。