将存储在 S3 存储桶中的文件直接下载到 React 客户端，而不是通过 Node.js 服务器答案

【问题标题】：Download file stored in S3 bucket directly to React client, instead of passing through Node.js server将存储在 S3 存储桶中的文件直接下载到 React 客户端，而不是通过 Node.js 服务器
【发布时间】：2021-11-21 13:49:21
【问题描述】：

this one from heroku 之类的文章表明，可以在自己的 Node 服务器中签署请求并上传大文件直接从客户端到 S3，但我还没有找到类似的解决方案下载大文件直接从 S3 到客户端。

有关我正在尝试做的事情的更多信息：

我正在使用托管在 Heroku 上的 Node js 服务器构建一个 React Web 应用程序。用户创建和编辑音频文件，然后将其存储在 S3 存储桶中。

在接下来的会话中，音频必须再次从 S3 存储桶加载到用户的浏览器中。为此，Web 应用程序向节点 js 服务器发送一个请求，然后该服务器检索文件并将其发送到具有以下端点的客户端：

// LOAD AUDIO
router.get("/getaudio/:userEmail/:projectId/:sectionId", async (req, res) => {    

    //create key from user/project/section IDs
    const userEmail = req.params.userEmail;
    const projectId = req.params.projectId;
    const sectionId = req.params.sectionId;
    
    const key = `${userEmail}/${projectId}/${sectionId}.webm`;

    const params = {
        Key: key,
        Bucket: s3BucketName
    }

    s3.getObject(params, function (error, data) {
        if (error) {
            console.error(error);
        }
        res.send(data);
    });
    
});

这里的问题是音频文件可能非常大（长达 1.5 小时）。将这些文件加载到 Node js 服务器然后然后将它们发送到客户端感觉非常低效，并且可能导致我的 Heroku dyno 上不必要的负载，以及用户的非常长的等待时间。

但是，我不想直接在我的客户端中使用 AWS 开发工具包（完全切断服务器），因为有人告诉我这是不好的做法，并且可能会暴露您的环境变量。

有没有办法安全可靠地将我的 s3 存储桶中的大文件直接下载到 React 客户端？

【问题讨论】：

标签： node.js reactjs amazon-web-services amazon-s3 heroku

【解决方案1】：

您可以在您的 node.js 服务器上生成一个presigned URL，以授予对 s3 对象的访问权限，将该 URL 发送到您的 React 应用程序并直接从 React 应用程序下载文件。

请务必注意，预签名 URL 默认会在 15 分钟后过期。因此，如果您需要增加过期时间，您可以通过传递 Expires 参数来指定您的 URL 保持有效的时间（以秒为单位）。

您的 node.js 处理程序可能如下所示：

router.get("/getaudio/:userEmail/:projectId/:sectionId", async (req, res, next) => {

    //create key from user/project/section IDs
    const userEmail = req.params.userEmail;
    const projectId = req.params.projectId;
    const sectionId = req.params.sectionId;

    const key = `${userEmail}/${projectId}/${sectionId}.webm`;

    const params = {
        Key: key,
        Bucket: s3BucketName
    }

    s3.getSignedUrl('getObject', params, function (err, url) {
        if (err) {
            console.error(err)
            next(err);
        } else {
            res.json({ url })
        }
    })

});

【讨论】：