S3 图像在本地加载,而不是在 Heroku 上

S3 images load locally, not on Heroku

下面是我如何为节点设置 AWS sdk,以及是否有错误的测试

AWS.config.update({
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    region: 'us-east-2'
})
const s3 = new AWS.S3()
s3.getObject({Bucket: process.env.S3_BUCKET_NAME, Key: '201706221542580.JPG'}, function(err, data) {
    console.log('ERROR?')
    console.log(err)
})

变量 err 在本地和 Heroku 上为 null。然而,图像只能在本地加载。这是我需要解决的 CORS 问题吗?我将以下 CORS 设置放入桶中,希望它能起作用,但无济于事。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
   <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这是我在服务器端缩略图的方式:

app.get('/product_thumb/', (req, res, next) => {
    if (!req.query.patch) {
        return res.sendStatus(422)
    }
    res.contentType(req.query.patch);
    const stream = s3.getObject({Bucket: process.env.S3_BUCKET_NAME, Key: req.query.patch}).createReadStream()
    thumbnailImage(stream).pipe(res)
})

const thumbnailImage = (stream) => {
    let width = 100
    return gm(stream)
            .thumbnail(width)
            .stream()
}

并且在带有 React 的客户端上:

<img src={'/product_thumb/?patch=' + props.src} onError={(e) => { e.target.onerror = null; e.target.src = "/img/missing.png" }}/>

我还尝试设置我所有的环境变量来模拟生产环境,甚至 运行 heroku local,但它总是在我的机器上运行。我还验证了我的 S3 配置环境变量(例如使用 process.env.AWS_VARAIABLE 检索)在本地和 Heroku 上完全相同。

GraphicsMagick 未安装在 Heroku 服务器上。添加以下 buildpack 后,它完美运行。 https://github.com/xerpa/heroku-buildpack-graphicsmagick.git