使用 Node JS 中断静态 Web 托管将静态 Web 上传到 AWS s3

Question

我计划使用 Node JS 脚本将 next.js 静态导出部署到 s3 存储桶。

我已经为静态网站托管设置了一个 S3 存储桶。

当我简单地将静态导出拖放到 S3 存储桶时，我得到了预期的行为，所以我很确定我正确设置了 S3 存储桶。

但是当我尝试使用 Node JS 脚本上传它时，尽管所有文件都出现在存储桶中，但静态网站托管的行为似乎中断了。

我的脚本基本上是从读取环境变量 on.env 的一个扭曲复制过来的：

使用节点js中的AWS sdk将整个目录树上传到S3

重现此问题的更多信息和步骤位于测试库中。

测试回购：

https://github.com/vmia159/aws-upload-test

如果有人能对这些问题有所了解，我将不胜感激。

Answer 1

https://github.com/aws/aws-sdk-js/issues/4279

正如 chrisradek 指出的那样，您需要提供内容类型才能使其正常工作

require('dotenv').config();
const bucketName = process.env.BUCKET_NAME;
const { promises: fs, createReadStream } = require('fs');
const path = require('path');
const { S3 } = require('aws-sdk');
const mime = require('mime-types');

const s3 = new S3({
  accessKeyId:  process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
});

const uploadDir = async (s3Path, bucketName) => {
  // Recursive getFiles from
  // https://stackoverflow.com/a/45130990/831465

  async function getFiles(dir) {
    const dirents = await fs.readdir(dir, { withFileTypes: true });
    const files = await Promise.all(
      dirents.map(dirent => {
        const res = path.resolve(dir, dirent.name);
        return dirent.isDirectory() ? getFiles(res) : res;
      })
    );
    return Array.prototype.concat(...files);
  }

  const files = await getFiles(s3Path);
  const uploads = files.map(filePath =>
    s3
      .putObject({
        Key: path.relative(s3Path, filePath),
        Bucket: bucketName,
        Body: createReadStream(filePath),
        ContentType: mime.lookup(filePath)
      })
      .promise()
      .catch(err => {
        console.log(`fail to upload ${filePath}`);
      })
  );
  return Promise.all(uploads);
};

const uploadProcess = async () => {
  await uploadDir(path.resolve('./out'), bucketName);
  console.log('Upload finish');
};
uploadProcess();