如何将部署在EC2容器中Express API的图片返回给前端应用

解决方案 #

1. 配置Express静态资源托管 #

直接用Express内置的express.static中间件托管你存储图片的文件夹即可，在你的Express入口文件（通常是app.js/index.js）中添加如下代码：

const path = require('path')
// 托管uploads文件夹下的所有静态资源，访问前缀为/uploads
app.use('/uploads', express.static(path.join(__dirname, 'uploads')))

配置完成后，只要你的EC2安全组开放了Express服务对应的端口（例如默认的3000），就可以通过http://EC2公网IP:服务端口/uploads/数据库存储的图片文件名直接访问到图片。

2. 接口返回图片访问地址 #

从数据库查询到图片文件名后，拼接上你的服务地址前缀，直接返回给前端即可。建议把服务地址写成环境变量方便后续修改：

// 示例：查询用户信息时拼接头像地址
const userInfo = await User.findById(userId)
const avatarUrl = `${process.env.SERVER_BASE_URL}/uploads/${userInfo.avatar}`
// 把avatarUrl返回给前端
res.json({
  code: 0,
  data: {
    ...userInfo,
    avatar: avatarUrl
  }
})

前端拿到地址后直接赋值给<img>标签的src属性即可正常加载图片。

3. 权限控制方案（可选） #

如果你的图片需要登录后才能访问，不要直接用静态托管，单独写鉴权接口返回图片文件：

app.get('/uploads/:filename', async (req, res) => {
  // 此处添加你的权限校验逻辑，例如校验请求头的token是否有效
  const hasAuth = await checkToken(req.headers.authorization)
  if (!hasAuth) {
    return res.status(403).json({ msg: '无访问权限' })
  }
  const filePath = path.join(__dirname, 'uploads', req.params.filename)
  res.sendFile(filePath, (err) => {
    if (err) {
      res.status(404).json({ msg: '图片不存在' })
    }
  })
})

4. 生产环境优化（可选） #

如果服务访问量较高，建议用Nginx来托管静态资源，性能比Express托管更高，只需要在Nginx配置中添加如下规则即可：

location /uploads/ {
    root /你的EC2上Express项目的绝对路径;
    expires 7d; # 配置7天缓存，提升加载速度
}

内容的提问来源于stack exchange，提问作者Facundo Serrano