使用 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();