AWS S3前端使用总结

简介

S3 全称是Simple Storage Service，它是 Amazon Web Services (AWS) 提供的一项服务，它通过 Web 服务接口提供对象存储。
Amazon S3是一种高度可扩展、快速且持久的解决方案，适用于任何数据类型的对象级存储。与典型文件存储或块存储不同，当用户将数据上传到 S3 时，该文件将存储为具有完整元数据的对象，并且该对象作为一个整体被赋予一个 ID。

Amazon S3具有以下特征和优势
  • 提供了统一的接口 REST/SOAP 来统一访问任何数据
  • 对 S3 来说，存在里面的数据就是对象名（键），和数据（值）
  • 不限量，单个文件最高可达 5TB
  • 高速。每个 bucket 下每秒可达 3500 PUT/COPY/POST/DELETE 或 5500 GET/HEAD 请求
  • 具备版本，权限控制能力
  • 具备数据生命周期管理能力

基础概念

Bucket

要存储数据在 S3 里，首先我们要建立一个 Bucket。Bucket 就像是电脑里面的某一个顶层分区。所有的对象都必须保存在某一个 bucket 下面。Bucket 默认是不公开的。
Bucket 有几个特点：

  • 命名需全球唯一。每个帐号默认可建 100 个，可申请至最多 1000 个
  • 创建者的拥有权不可转让，也不可以从一个 Region 转去别的 Region
    (AWS中，一个区域一般是一个大洲或者国家的一部分(比如，西欧、亚太东北地区或美国西部)区域描述并记录了云资源的地理多样性。我们项目中的Region是cn-north-1)
  • 没有对象存储数量限制
Object

Bucket 里面每一个存储的数据就是对象，由对象名（键），和数据（值）组成。
对象的键（Key）可以很长，或按照一定前缀格式来指定，从而模拟文件夹的层级结构，比如 Photo/Family/2020-01-25-new-year/altogether.jpg
每一个对象其实还包含一些元信息（Meta-data），包括系统指定的文件类型，创建时间，加密算法等，和用户上传时指定的元信息。元信息在对象创建后都无法更改。
我们也可以为对象指定最多 10个标签（Tag），标签可以在权限控制、生命周期管理、数据分析等功能中使用。
单个文件上传最大是 5GB。超过的话，需要使用 multipart upload API。最大支持 5TB。

一致性特性

关于Amazon S3的读写特性和一致性模型。

  • 没有锁的功能。如果同时（几乎）发起两个更新对象的 PUT 请求，键相同，那么，以到达 S3 时间先后处理更新。
  • 不同对象的更新，没法做到原子操作（原子操作是指不会被线程调度机制打断的操作）。
  • 对全新的对象来说，它是 Read-after-Write Consistency 的。也就是写了之后马上读，肯定就是你刚才上传的数据。
  • 如果你要更新数据，那就变成 Eventual Consistency 了。也就是说，更新后马上读，可能是旧的数据，也可能是新的。

项目中的使用

基础使用
import AWS from "aws-sdk";

const AWS_CONFIG = {
    Bucket: "litb-cn-xxx",
    key: {
        accessKeyId: "AKIAQK*******************",
        secretAccessKey: "GUlxe**********************************",
        region: "cn-north-1"
    }
};

const s3 = new AWS.S3(AWS_CONFIG.key);

// 上传
const commonUploadProps: UploadProps = {
    // Upload组件其他参数
    // ...
    customRequest: info => {
        const { file, onSuccess, onError } = info;
        const currentFile: any = file;
        const params = {
            Bucket: AWS_CONFIG.Bucket,
            Key: `supplier/pattern/${new Date().getTime()}${currentFile.name}`,
            ContentType: currentFile.type,
            Body: file,
            "Access-Control-Allow-Credentials": "*",
            ACL: "public-read"
        };
        s3.upload(params, (err, data) => {
            if (err) {
                onError(err);
                message.error(err || "Upload Error!");
            } else {
                onSuccess(data, currentFile);
            }
        });
    }
};
// 下载
s3.getObject(
    {
        Bucket: AWS_CONFIG.Bucket,
        Key: decodeURIComponent(key)
    },
    function(error, data: any) {
        // 回调函数
    }
);
存在的问题

accessKey泄露

优化方案

方案一：服务端中转
前端选择文件 -> 上传到后端-> 后端再上传到S3
这个方案需要后端中转，链路长了，流量多了，文件如果太大可能超时，所以还是希望能由前端直接上传到S3。

方案二：S3提供的PresignedUrl上传方式

  1. 后端在aws生成一个有时间限制的预签名url
  2. 前端请求并获取这个url，然后通过PUT请求直接上传文件到S3
// 上传
const commonUploadProps: UploadProps = {
    // Upload组件其他参数
    // ...
    customRequest: async info => {
        const { file, onSuccess, onError } = info;
        const currentFile: any = file;
        try {
            const oosRes = await getUploadUrlOfAmazonS3({
                str: `supplier/pattern/${new Date().getTime()}${currentFile.name}`
            });
            const oosUrl = oosRes?.result?.message;
            if (oosUrl) {
                const fileUrl = oosUrl?.split("?")[0];
                await ajax("PUT", oosUrl, currentFile);
                onSuccess({ Location: fileUrl }, currentFile);
            }
        } catch (err) {
            onError(err);
        }
    }
};

PresignedUrl栗子
https://litb-product-sample-info.s3.cn-north-1.amazonaws.com.cn/1681982161895800x800%28gb%29.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20230420T091603Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3599&X-Amz-Credential=AKIAQKSQMN2WLRZSVFF7%2F20230420%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Signature=b3cb45173c4d9d5252776cd17efbacfc1875b52eebd357d7fe0aacbd4142a1df
图片上传后的地址
https://litb-product-sample-info.s3.cn-north-1.amazonaws.com.cn/1681982161895800x800%28gb%29.jpeg
tips:

  1. S3存储桶需要配置支持跨域；
  2. PUT方法上传文件时 XMLHttpRequest.withCredentials的属性需设置为false （跨域请求时不发送Cookie）；

下面是官方文档中生成PresignedUrl的示例

import https from "https";
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { fromIni } from "@aws-sdk/credential-providers";
import { HttpRequest } from "@aws-sdk/protocol-http";
import {
  getSignedUrl,
  S3RequestPresigner,
} from "@aws-sdk/s3-request-presigner";
import { parseUrl } from "@aws-sdk/url-parser";
import { formatUrl } from "@aws-sdk/util-format-url";
import { Hash } from "@aws-sdk/hash-node";

  // There are two ways to generate a presigned URL.
  // 1. Use createPresignedUrl without the S3 client.
  // 2. Use getSignedUrl in conjunction with the S3 client and GetObjectCommand.

const createPresignedUrlWithoutClient = async ({ region, bucket, key }) => {
  const url = parseUrl(`https://${bucket}.s3.${region}.amazonaws.com/${key}`);
  const presigner = new S3RequestPresigner({
    credentials: fromIni(),
    region,
    sha256: Hash.bind(null, "sha256"),
  });

  const signedUrlObject = await presigner.presign(
    new HttpRequest({ ...url, method: "PUT" })
  );
  return formatUrl(signedUrlObject);
};

const createPresignedUrlWithClient = async ({ region, bucket, key }) => {
  const client = new S3Client({ region });
  const command = new PutObjectCommand({ Bucket: bucket, Key: key });
  return getSignedUrl(client, command, { expiresIn: 3600 });
};

export const main = async () => {
  const REGION = "us-east-1";
  const BUCKET = "coreys-default-bucket";
  const KEY = "corey_test.txt";

  try {
    const noClientUrl = await createPresignedUrlWithoutClient({
      region: REGION,
      bucket: BUCKET,
      key: KEY,
    });

    const clientUrl = await createPresignedUrlWithClient({
      region: REGION,
      bucket: BUCKET,
      key: KEY,
    });
  } catch (err) {
    console.error(err);
  }
};

官方文档
https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容