대용량 파일 업로드 최적화: AWS S3에 대한 클라이언트 측 멀티파트 업로드 보안-JS 튜토리얼-php.cn

클라우드에 대용량 파일을 업로드하는 것은 어려울 수 있습니다. 네트워크 중단, 브라우저 제한, 대용량 파일 크기로 인해 프로세스가 쉽게 중단될 수 있습니다. Amazon S3(Simple Storage Service)는 데이터와 애플리케이션의 온라인 백업 및 보관을 위해 설계된 확장 가능한 고속 웹 기반 클라우드 스토리지 서비스입니다. 그러나 대용량 파일을 S3에 업로드하는 경우 안정성과 성능을 보장하기 위해 신중한 처리가 필요합니다.

AWS S3의 멀티파트 업로드를 살펴보세요. 큰 파일을 작은 청크로 나누는 강력한 솔루션으로, 각 부분을 독립적으로 처리하고 부분을 병렬로 업로드하여 더 빠르고 안정적인 업로드를 가능하게 합니다. 이 방법은 파일 크기 제한을 극복할 뿐만 아니라(S3에서는 5GB보다 큰 파일에 대해 멀티파트 업로드가 필요함) 실패 위험을 최소화하므로 원활하고 강력한 파일 업로드가 필요한 애플리케이션에 완벽하게 적합합니다.

이 가이드에서는 S3에 대한 클라이언트 측 멀티파트 업로드에 대해 자세히 설명하고 이것이 대용량 파일을 처리하는 데 현명한 선택인 이유, 이를 안전하게 시작하고 실행하는 방법, 관찰해야 할 과제를 보여줍니다. 밖으로. 안정적인 클라이언트 측 파일 업로드 솔루션을 구현하는 데 도움이 되는 단계별 지침, 코드 예제 및 모범 사례를 제공하겠습니다.

파일 업로드 환경을 업그레이드할 준비가 되셨나요? 뛰어들어 보세요!

서버 및 클라이언트 측 업로드

파일 업로드 시스템을 설계할 때 두 가지 주요 옵션이 있습니다. 즉, 서버를 통해 파일을 업로드하는 것(서버 측) 또는 클라이언트에서 S3으로 직접 파일을 업로드하는 것(클라이언트 측)입니다. 각 접근 방식에는 장단점이 있습니다.

서버측 업로드

Optimizing Large File Uploads: Secure Client-Side Multipart Uploads to AWS S3

장점:

보안 강화: 모든 업로드는 서버에서 관리되므로 AWS 자격 증명이 안전하게 유지됩니다.
더 나은 오류 처리: 서버는 재시도, 로깅 및 오류 처리를 더욱 강력하게 관리할 수 있습니다.
중앙 집중식 처리: S3에 저장하기 전에 파일을 서버에서 검증, 처리 또는 변환할 수 있습니다.

단점:

더 높은 서버 로드: 대규모 업로드는 서버 리소스(CPU, 메모리, 대역폭)를 소비하므로 성능에 영향을 미치고 운영 비용이 증가할 수 있습니다.
잠재적 병목 현상: 업로드 트래픽이 많을 때 서버가 단일 장애 지점이나 성능 병목 현상이 되어 업로드 속도가 느려지거나 다운타임이 발생할 수 있습니다.
비용 증가: 서버측 업로드를 처리하려면 최대 로드를 처리하기 위해 인프라를 확장해야 하므로 운영 비용이 증가할 수 있습니다.

클라이언트측 업로드

Optimizing Large File Uploads: Secure Client-Side Multipart Uploads to AWS S3

장점:

서버 로드 감소: 파일이 사용자 장치에서 S3로 직접 전송되어 서버 리소스가 확보됩니다.
속도 향상: 애플리케이션 서버를 우회하므로 사용자가 더 빠른 업로드를 경험할 수 있습니다.
비용 효율성: 대규모 업로드를 처리하기 위한 서버 인프라가 필요하지 않아 잠재적으로 비용이 절감됩니다.
확장성: 백엔드 서버에 부담을 주지 않고 파일 업로드를 확장하는 데 이상적입니다.

단점:

보안 위험: AWS 자격 증명 및 권한을 주의 깊게 처리해야 합니다. 무단 액세스를 방지하려면 미리 서명된 URL을 안전하게 생성해야 합니다.
제한된 제어: 업로드에 대한 서버측 감독이 적습니다. 오류 처리 및 재시도는 클라이언트에서 관리되는 경우가 많습니다.
브라우저 제약: 브라우저에는 메모리 및 API 제한이 있어 대용량 파일 처리를 방해하거나 저가형 장치의 성능에 영향을 미칠 수 있습니다.

안전한 클라이언트측 업로드 구현을 위한 단계별 가이드

클라이언트측 업로드를 안전하게 구현하려면 프런트엔드 애플리케이션과 보안 백엔드 서비스 간의 조정이 필요합니다. 백엔드 서비스의 주요 역할은 클라이언트가 민감한 AWS 자격 증명을 노출하지 않고 S3에 직접 파일을 업로드할 수 있도록 미리 서명된 URL을 생성하는 것입니다.

전제조건

AWS 계정: S3 사용 권한이 있는 AWS 계정에 액세스합니다.
AWS SDK 지식: JavaScript용 AWS SDK(v3)에 대한 지식 또는 AWS 서비스에 대한 직접 API 호출.
프런트엔드 및 백엔드 개발 기술: 클라이언트측(JavaScript, React 등) 및 서버측(Node.js, Express 등) 프로그래밍에 대한 이해

1. 올바른 아키텍처 설정

클라이언트측 업로드를 효과적으로 구현하려면 다음이 필요합니다.

프런트엔드 애플리케이션: 파일 선택을 처리하고, 필요한 경우 파일을 여러 부분으로 분할하고, 미리 서명된 URL을 사용하여 S3에 부분을 업로드합니다.
백엔드 서비스: 미리 서명된 URL을 생성하고 멀티파트 업로드를 초기화 또는 완료하기 위한 API를 제공하는 보안 서버입니다. 이는 AWS 자격 증명을 안전하게 유지하고 필요한 비즈니스 논리 또는 검증을 시행합니다.

이 아키텍처는 민감한 작업이 백엔드에서 안전하게 처리되고 프런트엔드가 업로드 프로세스를 관리하도록 보장합니다.

2. 백엔드에 업로드 서비스 생성

미리 서명된 URL을 사용하는 이유는 무엇입니까?

미리 서명된 URL을 사용하면 클라이언트가 S3와 직접 상호 작용하여 클라이언트 측에서 AWS 자격 증명을 요구하지 않고도 파일 업로드와 같은 작업을 수행할 수 있습니다. 다음과 같은 이유로 안전합니다.

시간 제한이 있으며 지정된 기간이 지나면 만료됩니다.
특정 작업(예: 업로드를 위한 PUT)으로 제한될 수 있습니다.
특정 S3 객체 키에만 적용됩니다.

S3UploadService 구현

다음을 담당하는 서버에 서비스 클래스를 만듭니다.

아. S3 버킷 및 지역 정의
비. AWS 자격 증명을 안전하게 설정합니다.
기음. 미리 서명된 URL을 생성하고 멀티파트 업로드를 관리하는 방법을 제공합니다.

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

로그인 후 복사

참고: AWS 자격 증명이 안전하게 관리되는지 확인하세요. 프로덕션에서는 자격 증명을 하드코딩하거나 환경 변수를 사용하는 대신 EC2 인스턴스 또는 ECS 작업에 연결된 IAM 역할을 사용하는 것이 좋습니다.

3. 백엔드 API 엔드포인트 구현

백엔드에 API 엔드포인트를 생성하여 프런트엔드의 요청을 처리하세요. 이러한 엔드포인트는 S3UploadService를 활용하여 작업을 수행합니다.

// controllers/S3UploadController.js

import { S3UploadService } from '../services/S3UploadService';

const s3UploadService = new S3UploadService();

export const generatePresignedUrl = async (req, res, next) => {
  try {
    const { key, operation } = req.body; // key is the S3 object key (file identifier)
    const url = await s3UploadService.generatePresignedUrl(key, operation);
    res.status(200).json({ url });
  } catch (error) {
    next(error);
  }
};

export const initializeMultipartUpload = async (req, res, next) => {
  try {
    const { key } = req.body;
    const uploadId = await s3UploadService.createMultipartUpload(key);
    res.status(200).json({ uploadId });
  } catch (error) {
    next(error);
  }
};

export const generateUploadPartUrls = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is the number of parts
    const urls = await Promise.all(
      [...Array(parts).keys()].map(async (index) => {
        const partNumber = index + 1;
        const url = await s3UploadService.generateUploadPartUrl(key, uploadId, partNumber);
        return { partNumber, url };
      })
    );
    res.status(200).json({ urls });
  } catch (error) {
    next(error);
  }
};

export const completeMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is an array of { ETag, PartNumber }
    const result = await s3UploadService.completeMultipartUpload(key, uploadId, parts);
    res.status(200).json({ result });
  } catch (error) {
    next(error);
  }
};

export const abortMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId } = req.body;
    await s3UploadService.abortMultipartUpload(key, uploadId);
    res.status(200).json({ message: 'Upload aborted' });
  } catch (error) {
    next(error);
  }
};

로그인 후 복사

Express 앱이나 사용 중인 프레임워크에서 이러한 엔드포인트에 대한 경로를 설정하세요.

4. 프런트엔드 업로더 클래스 구현

프런트엔드는 파일 선택, 파일 크기에 따라 단일 부분 또는 다중 부분 업로드 수행 여부 결정, 업로드 프로세스 관리를 처리합니다.

일반적으로 AWS에서는 "객체 크기가 100MB에 도달하면 단일 작업으로 객체를 업로드하는 대신 멀티파트 업로드 사용을 고려해야 합니다."라고 권장합니다. 출처

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

로그인 후 복사

사용예

// controllers/S3UploadController.js

import { S3UploadService } from '../services/S3UploadService';

const s3UploadService = new S3UploadService();

export const generatePresignedUrl = async (req, res, next) => {
  try {
    const { key, operation } = req.body; // key is the S3 object key (file identifier)
    const url = await s3UploadService.generatePresignedUrl(key, operation);
    res.status(200).json({ url });
  } catch (error) {
    next(error);
  }
};

export const initializeMultipartUpload = async (req, res, next) => {
  try {
    const { key } = req.body;
    const uploadId = await s3UploadService.createMultipartUpload(key);
    res.status(200).json({ uploadId });
  } catch (error) {
    next(error);
  }
};

export const generateUploadPartUrls = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is the number of parts
    const urls = await Promise.all(
      [...Array(parts).keys()].map(async (index) => {
        const partNumber = index + 1;
        const url = await s3UploadService.generateUploadPartUrl(key, uploadId, partNumber);
        return { partNumber, url };
      })
    );
    res.status(200).json({ urls });
  } catch (error) {
    next(error);
  }
};

export const completeMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is an array of { ETag, PartNumber }
    const result = await s3UploadService.completeMultipartUpload(key, uploadId, parts);
    res.status(200).json({ result });
  } catch (error) {
    next(error);
  }
};

export const abortMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId } = req.body;
    await s3UploadService.abortMultipartUpload(key, uploadId);
    res.status(200).json({ message: 'Upload aborted' });
  } catch (error) {
    next(error);
  }
};

로그인 후 복사

5. 보안 고려 사항 및 모범 사례

미리 서명된 URL 권한 제한: 미리 서명된 URL이 필요한 권한만 부여하는지 확인하세요(예: 업로드 시 PUT 작업만 허용).
적절한 만료 시간 설정: 미리 서명된 URL은 오용 기간을 최소화하기 위해 합리적인 시간(예: 15분~1시간) 후에 만료되어야 합니다.
파일 메타데이터 유효성 검사: 백엔드에서 조작을 방지하기 위해 클라이언트에서 전송된 모든 메타데이터 또는 매개변수를 유효성 검사합니다(예: 허용된 파일 형식 또는 크기 적용).
HTTPS 사용: 클라이언트와 백엔드 간의 통신에 항상 HTTPS를 사용하고 S3에 액세스할 때 전송 중인 데이터를 보호하세요.
모니터링 및 로그: 백엔드와 S3 모두에 로깅 및 모니터링을 구현하여 비정상적인 활동이나 오류를 감지합니다.

6. 추가 고려 사항

객체 크기 제한

AWS S3는 최대 5TiB(테라바이트) 크기의 객체를 지원하지만 이러한 대용량 파일을 브라우저에서 직접 업로드하는 것은 비현실적이며 브라우저 제한 및 클라이언트 측 리소스 제약으로 인해 불가능한 경우가 많습니다. 매우 큰 파일을 처리할 때, 특히 메모리에서 처리해야 하는 경우 브라우저가 충돌하거나 응답하지 않을 수 있습니다.

재시도 전략

대용량 파일을 업로드하면 업로드 프로세스 중에 네트워크 중단이나 오류가 발생할 위험이 높아집니다. 사용자 경험을 향상하고 성공적인 업로드를 보장하려면 강력한 재시도 전략을 구현하는 것이 중요합니다.

전략

자동 재시도: 사용자에게 메시지를 표시하기 전에 제한된 횟수만큼 실패한 부품을 자동으로 재시도합니다.
재개 가능한 업로드: 업로드를 다시 시작하지 않고 중단된 부분부터 다시 시작할 수 있도록 업로드된 부분을 추적하세요.
오류 처리: 재시도에 실패하면 사용자에게 정보 오류 메시지를 제공하고 네트워크 연결 확인과 같은 조치를 제안할 수도 있습니다.

멀티파트 업로드 정리

불완전한 멀티파트 업로드가 S3 버킷에 누적되어 저장 공간을 소비하고 잠재적으로 비용이 발생할 수 있습니다.

고려사항

완료되지 않은 업로드 중단: 업로드가 실패하거나 취소된 경우 애플리케이션이 AbortMultipartUpload API를 호출하여 업로드된 부분을 정리하는지 확인하세요.
수명 주기 규칙: 일정 기간(예: 7일)이 지나면 불완전한 멀티파트 업로드를 자동으로 중단하도록 S3 수명 주기 정책을 구성합니다. 이는 스토리지 비용을 관리하고 버킷을 깨끗하게 유지하는 데 도움이 됩니다.

수명 주기 규칙 구성의 예:

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

로그인 후 복사

메인 스레드에서 멀티파트 업로드 처리

대용량 파일을 업로드하면 리소스가 많이 소모될 수 있으며 브라우저의 기본 스레드가 응답하지 않아 사용자 경험이 저하될 수 있습니다.

해결책:

웹 작업자 사용: 업로드 프로세스를 웹 작업자로 오프로드합니다. Web Workers는 웹 애플리케이션의 기본 실행 스레드와 별도로 백그라운드에서 실행되므로 UI를 차단하지 않고 리소스 집약적인 작업을 수행할 수 있습니다.

이익:

향상된 성능: 메인 스레드를 확보하여 업로드 프로세스 중에 UI가 계속 반응하도록 합니다.
메모리 사용량 감소: 대용량 데이터 처리를 작업자 내에서 처리할 수 있어 메모리를 보다 효과적으로 관리하는 데 도움이 됩니다.
향상된 안정성: 대용량 업로드 중에 브라우저가 응답하지 않거나 충돌하는 위험을 줄입니다.

7. 브라우저 호환성 고려 사항

클라이언트측 멀티파트 업로드를 구현할 때 브라우저 호환성이 실제로 문제가 됩니다. 브라우저마다 *파일 API, Blob 슬라이싱, 웹 작업자 및 네트워크 요청 처리* 등 대용량 파일 업로드를 처리하는 데 필요한 API 및 기능에 대한 지원 수준이 다를 수 있습니다. . 지원되는 모든 브라우저에서 일관되고 안정적인 사용자 경험을 보장하려면 이러한 차이점을 성공적으로 탐색하는 것이 중요합니다.

호환성 문제:

파일 API 및 Blob 메서드: 대부분의 최신 브라우저는 Blob.slice()를 지원하지만 이전 브라우저에서는 Blob.webkitSlice() 또는 Blob.mozSlice()를 사용할 수 있습니다.
Web Workers: 최신 브라우저에서는 지원되지만 일부 이전 브라우저에서는 지원되지 않거나 Internet Explorer에서는 제한 사항이 있습니다.
Fetch API 및 XMLHttpRequest: fetch()는 널리 지원되지만 fetch()를 사용한 업로드 진행 이벤트는 모든 브라우저에서 일관되게 사용할 수 없습니다.
최대 동시 연결: 지원되는 브라우저 중 가장 낮은 공통 분모를 기준으로 동시 업로드 수를 제한합니다(예: 6개의 동시 연결).
메모리 제약: 파일을 작은 덩어리로 처리하고 전체 파일을 한 번에 메모리에 로드하지 마세요.
CORS: 필요한 HTTP 메서드(예: PUT, POST) 및 헤더를 지원하도록 S3 CORS 정책을 구성합니다.

결론

미리 서명된 URL과 멀티파트 업로드를 사용하여 클라이언트측 업로드를 구현하면 모든 크기의 파일 업로드를 S3에 직접 효율적으로 처리하여 서버 로드를 줄이고 성능을 향상시킬 수 있습니다. AWS 자격 증명을 안전하게 관리하고 미리 서명된 URL의 권한과 수명을 제한하여 보안을 최우선으로 생각하세요.

이 가이드에서는 AWS S3, JavaScript용 AWS SDK 및 미리 서명된 URL을 사용하여 안전하고 확장 가능한 파일 업로드 시스템을 설정하는 단계별 접근 방식을 제공했습니다. 제공된 코드 예제와 모범 사례를 통해 애플리케이션의 파일 업로드 기능을 향상시킬 수 있습니다.

위 내용은 대용량 파일 업로드 최적화: AWS S3에 대한 클라이언트 측 멀티파트 업로드 보안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!