React와 AWS S3를 사용하여 프런트엔드 정적 리소스 저장 및 관리를 구현하는 방법

React 및 AWS S3를 사용하여 프런트 엔드 정적 리소스 저장 및 관리를 구현하는 방법

개요:
현대 웹 애플리케이션을 개발할 때 사진, 오디오, 비디오 및 기타 파일. AWS S3(약어: Amazon Simple Storage Service)는 정적 리소스를 저장하고 배포하는 데 사용할 수 있는 클라우드 스토리지 솔루션입니다.

React는 사용자 인터페이스 구축을 위한 인기 있는 프런트 엔드 JavaScript 라이브러리입니다. 대화형 UI 구성 요소를 만드는 유연하고 효율적이며 재사용 가능한 방법을 제공합니다.

이 기사에서는 React와 AWS S3를 결합하여 프런트 엔드 정적 리소스의 저장 및 관리를 달성하는 방법을 살펴보겠습니다. AWS S3 버킷을 설정하고 React를 사용하여 파일을 업로드, 다운로드 및 삭제하는 방법을 다룹니다.

1단계: AWS S3 버킷 설정
먼저 AWS 계정을 설정한 다음 AWS 관리 콘솔에 로그인해야 합니다. 콘솔에서 새 S3 버킷을 생성합니다.

S3 서비스를 열고 "버킷 만들기" 버튼을 클릭하세요.

버킷 생성 페이지에서 이름을 입력하고 적절한 지리적 위치를 선택한 후 기본 설정에 따라 구성하세요.

액세스 권한 설정에서 버킷에 대한 공개 액세스 권한을 설정하거나 액세스 권한을 사용자 정의하도록 선택할 수 있습니다.

설정을 완료한 후 "버킷 생성" 버튼을 클릭하면 새 S3 버킷이 성공적으로 생성됩니다.

2단계: React 애플리케이션 초기화
React 프로젝트에서 S3 서비스와 상호 작용하려면 먼저 AWS SDK를 설치해야 합니다. 다음 명령을 사용하여 프로젝트에 AWS SDK를 설치할 수 있습니다.

npm install aws-sdk

3단계: 파일 업로드 기능 구현
파일 업로드 기능을 구현하려면 React 애플리케이션에서 업로드 양식을 생성해야 합니다. 사용자가 파일을 선택한 후 S3 버킷에 파일을 업로드합니다.

먼저 S3 서비스와 통신할 수 있도록 AWS SDK를 가져오고 AWS 구성을 설정해야 합니다.

'aws-sdk'에서 AWS 가져오기;

// AWS 구성 설정
AWS.config.update({
accessKeyId: 'your-access-key',
secretAccessKey: 'your-secret-access-key'
});

다음으로 파일을 업로드하는 함수를 작성해야 합니다.

const uploadFile = async (file) => {
// S3 인스턴스 생성
const s3 = new AWS.S3();

// 업로드 매개변수 정의
const params = {

Bucket: 'your-bucket-name',
Key: file.name,
Body: file

};

try {

// 执行上传操作
await s3.upload(params).promise();
console.log('文件上传成功！');

} catch(error) {

console.error('文件上传失败：', error);

}
}

React 구성 요소에서는 파일 선택 양식을 만들고 사용자가 파일을 선택한 후 uploadFile 함수를 호출할 수 있습니다.

class UploadForm은 React.Component를 확장합니다. {
handlerFileChange = (event) => 파일 업로드 기능을 구현합니다.

4단계: 파일 다운로드 기능 구현

파일 다운로드 기능을 구현하려면 사용자가 링크를 클릭한 후 파일을 로컬로 다운로드할 수 있어야 합니다.

먼저 파일 URL을 가져오는 함수를 작성해야 합니다.

const getFileUrl = (fileName) => {

// S3 인스턴스 생성

const s3 = new AWS.S3();

// URL 매개변수 가져오기 정의
const params = {

const file = event.target.files[0];
uploadFile(file);

};

/ / URL 생성
const url = s3.getSignedUrl('getObject', params);
return url;

}

React 컴포넌트에서는 다운로드 링크를 생성하고 사용자가 링크를 클릭한 후 getFileUrl 함수를 호출할 수 있습니다.

class DownloadLink는 React.Component를 확장합니다. {

handlerDownload = () => {

return (
  <div>
    <input type="file" onChange={this.handleFileChange} />
  </div>
);

}

render() {

Bucket: 'your-bucket-name',
Key: fileName

}

}

마지막으로 React 애플리케이션에서 DownloadLink 구성 요소를 사용하여 다음을 달성할 수 있습니다. 파일 다운로드 기능.

5단계: 파일 삭제 기능 구현

파일 삭제 기능을 구현하려면 파일을 삭제하는 함수를 작성해야 합니다.

const deleteFile = async (fileName) => {

// S3 인스턴스 생성
const s3 = new AWS.S3();

// 삭제 매개변수 정의

const params = {

const fileName = 'your-file-name';
const url = getFileUrl(fileName);
window.open(url, '_blank');

};

try {

return (
  <div>
    <button onClick={this.handleDownload}>下载文件</button>
  </div>
);

} catch(error) {

Bucket: 'your-bucket-name',
Key: fileName

}
}

React 구성 요소에서는 삭제 버튼을 만들고 사용자가 버튼을 클릭한 후 deleteFile 함수를 호출할 수 있습니다.

class DeleteButton은 React.Component를 확장합니다. {

handlerDelete = () => {

// 执行删除操作
await s3.deleteObject(params).promise();
console.log('文件删除成功！');

}

render() {

console.error('文件删除失败：', error);

}

}

마지막으로 React 애플리케이션의 DeleteButton 구성 요소를 사용하여 파일을 얻을 수 있습니다. 삭제 기능.

요약:

React와 AWS S3를 결합하면 프런트엔드 정적 리소스의 저장 및 관리 기능을 쉽게 구현할 수 있습니다. 파일 업로드, 파일 다운로드, 파일 삭제를 통해 웹 애플리케이션의 정적 리소스를 효과적으로 관리할 수 있습니다.

이 문서에 제공된 샘플 코드는 데모용으로만 제공됩니다. 실제로는 특정 요구 사항에 맞게 조정하고 확장해야 할 수도 있습니다.

이 기사가 React와 AWS S3를 더 잘 활용하여 프런트 엔드 정적 리소스의 저장 및 관리를 실현하는 데 도움이 되기를 바랍니다. 즐거운 이용되시기 바랍니다!

위 내용은 React와 AWS S3를 사용하여 프런트엔드 정적 리소스 저장 및 관리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!