上传静态web到使用Node JS打破静态web托管的AWS s3

Question

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

我已经设置了一个S3桶用于静态网站托管。

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

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

我的脚本基本上是从。env上读取环境变量的一个扭曲的复制:

在node 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();