AWS와 React를 활용한 파일 업로드 시스템: Backend

Requirement

1) Frontend 구축

• 파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
• 파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
• 코드: Github

2) AWS 세팅

• 파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
• 파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
• 파일 업로드 웹 페이지 구축: (4) AWS S3 생성
• 파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
• 파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성

3) Backend 코드 수정

(1) S3 버킷 이름 입력

• file-processing-service.js 파일 내 5번째 line에 본인이 생성한 S3 버킷 이름 입력
• 파일 업로드 웹 페이지 구축: (4) AWS S3 생성

(2) API Gateway 리소스 이름 입력

• index.js 파일 내 3번째 line에 본인이 생성한 API Gateway 리소스 이름 입력
• 파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성

4) 웹 호스팅

• 파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

실행 결과

• 파일 업로드 웹 페이지 구축: (8) 업로드 테스트
• 파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅

참고자료

• 파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발
• 파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성
• 파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성
• 파일 업로드 웹 페이지 구축: (4) AWS S3 생성
• 파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성
• 파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성
• 파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call
• 파일 업로드 웹 페이지 구축: (8) 업로드 테스트
• 파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅
• How to Build a File Upload System on AWS with React and a Serverless API | Lambda, S3, API Gateway