Статический хостинг AWS S3 с Vue.js пуст

Question

Описание

В настоящее время я пытаюсь разместить свой проект Vue.js на AWS с использованием статического веб-хостинга на S3.

Шаги

√ Сначала язапустите npm run build внутри моего проекта, который сгенерировал ./dist, ./dist/index.html, ./dist/static/*

√ Я загрузил все файлы ./dist/* в мое ведро

√ Я создалкорзина S3 с публичной политикой:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME_HERE/*"
        }
    ]
}

√ Я добавил Static Website Hosting property и установил индексный документ на index.html

X При посещении https://s3.amazonaws.com/BUCKET_NAME_HERE/index.html мое приложение

Ошибки:

При проверке консоли у меня возникают только следующие ошибки:

GET https://s3.amazonaws.com/static/css/app.139eb30c5abb8a0cf50add8e31aed259.css net::ERR_ABORTED 403 (Forbidden)

GET https://s3.amazonaws.com/static/favicon.ico 403 (Forbidden)

Любые указания относительно того, что я мог пропустить или делаюне так?

Заранее спасибо

Answer 1

Ваша веб-страница пытается загрузить ресурсы из неправильного местоположения.Вы видите 403 (Запрещено), и это потому, что на вашей странице случайно указано имя корзины S3 «статическое», которого либо не существует, либо у вас нет к нему доступа.Этот URL неверен:

• https://s3.amazonaws.com/static/css/app.xxx.css

Если вы собираетесь использовать URL-адреса в стиле пути для статических ресурсов, тогда URL-адреса должны иметь форму:

• https://s3.amazonaws.com/mybucket/static/css/app.xxx.css

В качестве альтернативы можно использовать URL-адреса в стиле виртуального хостинга в форме:

• https://mybucket.s3.amazonaws.com/static/css/app.xxx.css

Обратите внимание на включение mybucket в оба URL.