개인공부/배포

aws S3로 React 프로젝트 배포, 기본 설정

minseokiim 2023. 7. 20. 15:06

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html

 

Amazon S3란 무엇인가요? - Amazon Simple Storage Service

Amazon S3란 무엇인가요? Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하

docs.aws.amazon.com

 

 

* aws S3?

AWS(Amazon Web Service)에서 제공하는 인터넷 스토리지 서비스, Simple Storage Service(=> S3)

장점으로는 저렴한 비용, 보안성, 빠른 속도, 내구성 등이 있음.

 

* 사용법

1. ec2에서 서버를 돌리는 중이라면 클라이언트의 api부분을 고정 ip로 변경,
git에 커밋 하기 전에 .gitignore에 경로 추가해서 ip는 올라가지 않게하기 (안그러면 git reset 해서 그 파일 기록 지워야 하는데 시간도 날리고 커밋기록도 두배 됨)
 
2. React 프로젝트 빌드-> npm run build
 
3. S3 버킷 만들기 -> 기본 설정
 

퍼블릭 액세스 차단 설정, 체크 해제

 

acl 부분 빼고는 다 기본 설정으로 냅둠


 
 
4. 업로드 ->Add files-> build 폴더의 모든 파일과 폴더 업로드
(파일 선택 하고 올린 후, 폴더도 해줘야함)
 
5. 버킷 속성 -> '정적 웹 사이트 호스팅'을 찾아 활성화, '인덱스 문서' 필드, '에러 문서' 필드에 index.html (404뜰때)
 
6. 버킷 권한 -> '버킷 정책' -> 정책 생성기 사용하기

 

정책 생성기에서 Select Type of Policy : S3 Bucket Policy , Principal : * (입력하기) , Actions : GetObject 선택.
 

 
Resource: 나의 ARN(=복사한 버킷 ARN)/* ( 뒤에 꼭 /* 추가 해줘야 함), "Effect": "Allow"
 
7. CORS작성

 
8. ec2 인스턴스 시작 후 putty로 로그인 해주고, 엔드 포인트 URL접속 하면 끝!
 
+ 수정했다면 다시 빌드하고, 지우고 다시 올려주기