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
下面是我如何为节点设置 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