Как исправить следующее js Cloudfront Stati c активов ответить 403? - PullRequest
Новая
       53

Как исправить следующее js Cloudfront Stati c активов ответить 403?

2 голосов
/ 20 февраля 2020

Я пытаюсь развернуть свой веб-сайт на aws с помощью cloudfront и route53. Сайт развернут и работает на https://higgle.io Однако ресурсы не загружаются, поскольку образы выбрасывают 403. Как это исправить? Я использую без сервера serverless-next.js. И я следил за одним из их постов в блоге, чтобы настроить его. До сих пор я добавил, который имеет serverless.yml на уровне маршрута. 

higgle:
 component: serverless-next.js

и мой next.config. js выглядит как 

module.exports = {
  target: 'serverless',
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config
  }
}

В то время как структура папок выглядит как 

-root
  -.next
  -pages
    -_document.js
    -index.js
  -public
    -static
      -favicon.ico
  -next.config.js
  -package.json
  -serverless.yml

Есть идеи, как это исправить? Спасибо

1 Ответ

0 голосов
/ 20 февраля 2020

S3 возвращает 403, потому что ваши предметы являются личными.

  1. Измените ваши элементы S3 на publi c. Убедитесь, что они доступны через ваш хост-адрес S3 stati c.
  2. Шаг 1 исправит все ресурсы stati c. Если вы работаете с одностраничным приложением, вам также нужно будет вернуть страницу индекса, когда S3 возвращает 404. В CloudFront, go для страниц с ошибками, создайте пользовательский ответ об ошибке, выберите 404 ответ, выберите опцию, чтобы настроить ответ, сделайте код ответа 200 и путь страницы ответа своей страницей индекса.

Ваша политика ведра должна быть: 

{
"Version": "2012-10-17",
"Id": "Policy1517754859350",
"Statement": [
    {
        "Sid": "Stmt1517754856505",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
]

}

...