如何修复 nextjs cloudfront 静态资产响应 403？

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，因为您的项目是私有的。

1. 将您的 S3 项目更改为公开。检查它们是否可以通过您的 S3 静态托管地址访问。
2. 第 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/*"
    }
]

}