Question

我正在尝试将我的网站部署到具有Cloudfront和route53的AWS。该网站已在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

有人知道如何解决此问题吗？谢谢

Answer 1

S3返回403，因为您的商品是私人物品。

将您的S3项更改为公开。检查是否可以通过您的S3静态托管地址访问它们。
第1步将修复所有静态资源。如果运行的是单页应用程序，则当S3返回404时，还需要返回索引页。在CloudFront中，转到错误页面，创建自定义错误响应，选择404响应，选择自定义响应的选项，使响应代码200和响应页面路径成为索引页面。

您的存储桶策略应为：

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

}

如何修复Nextjs Cloudfront静态资产响应403？

1 个答案: