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

Posted

技术标签:

【中文标题】使用 CloudFront 部署在 S3 上的 VueJS 应用程序的“指定的密钥不存在”【英文标题】:"The specified key does not exist" for VueJS app deployed on deployed on S3 with CloudFront 【发布时间】:2019-08-01 01:06:17 【问题描述】:

我已经使用 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 配置

这里没有设置任何东西

Route53

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

mydomain.com:一条记录​​;指向 CloudFront 分布

我没有更改的默认 NSSOA 记录

*.mydomain.com:一条记录​​;还指向前端子域的 CloudFront 分配

api.mydomain.com:一条记录​​;指向后端 API 服务的 ALB

云端

这是我的 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/)。

我可以更改哪些设置,以便将我的域的非 root 请求路由到 VueJS 应用程序?

【问题讨论】:

【参考方案1】:

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

这实质上是告诉 CloudFront 忽略 404 错误,只返回 HTTP 200 响应,并指向 /index.html。您的 SPA 将通过 Vue 路由器在内部处理任何“找不到页面”错误。 This 可能会对此有所帮助。

【讨论】:

我已经为 s3 解决了这个问题,然后这个问题,谢谢你的回复。 @ftxsam 可以,谢谢。【参考方案2】:

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

check here

【讨论】:

以上是关于使用 CloudFront 部署在 S3 上的 VueJS 应用程序的“指定的密钥不存在”的主要内容,如果未能解决你的问题,请参考以下文章

Cloudfront 无法访问部署在 EBS 上的 Spring Boot 上的安全端点

S3 / Cloudfront 下载限制

Amazon S3 Cloudfront 部署最佳实践

使用 Amazon S3 和 Cloudfront 的 CORS

Amazon S3 和 Cloudfront 上的 Node.js 服务器

Apple 在 S3 上的 apple-app-site-association 文件与 CloudFront 分发