«Указанный ключ не существует» для приложения VueJS, развернутого в S3 с CloudFront - PullRequest
Новая
       59

«Указанный ключ не существует» для приложения VueJS, развернутого в S3 с CloudFront

1 голос
/ 10 марта 2019

Я развернул приложение VueJS с S3 и CloudFront с использованием Route53. Казалось, все работало нормально. Я могу зайти на сайт по номеру 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 Bucket

Свойства

Все свойства отключены (у меня не установлен статический хостинг, так как я использую https)

Разрешения (общедоступные)

Настройки общего доступа

Все четыре параметра имеют значение false

Список контроля доступа

Публичный доступ: каждый может читать и перечислять объекты

Политика Bucket 

{
    "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

  • По умолчанию NS и SOA записи, которые я не изменил

  • *. Mydomain.com : запись; Также укажите на распределение CloudFront для поддоменов веб-интерфейса

  • api.mydomain.com : запись; Указывает на ALB для службы API бэкэнда

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?

1 Ответ

2 голосов
/ 10 марта 2019

Это типичная проблема с SPA, поскольку такие маршруты, как /dashboard, не являются реальными физическими маршрутами на сервере. Чтобы это исправить, просто откройте дистрибутив CloudFront, перейдите на вкладку «Страницы ошибок» и создайте пользовательский ответ об ошибке со следующими параметрами:

enter image description here

По сути, это говорит CloudFront игнорировать ошибку 404 и просто возвращать ответ HTTP 200 и указывать на /index.html. Ваш SPA обработает любые ошибки «страница не найдена» через Vue Router. Это может помочь с этим.

...