안녕하세요.
react 파일을 간단하게 aws에 호스팅 하는 방법을 설명해드립니다.
*저도 공부하는 입장이라, 틀린부분이 있으면 댓글 남겨주세요!
우선 react에서
$ npm run build
진행 시 build 폴더가 만들어지면서 제작한 파일이 빌드에 맞게 나오게 되는데요.
이 파일을 호스팅하게 됩니다!
그럼 aws로 가보실까요??(현재 aws 가입 시 1년동안 무료로 사용이 가능하더라구요)
aws에서 서비스를 클릭하시고, s3로 들어갑니다!
버킷을 생성합니다. (처음에 버킷 이름을 정하셔서 넘어가시면되요)
지속적으로 다음 하십니다!
이렇게 버킷을 생성하시고 난뒤에 속성(Properties) 탭으로 넘어갑니다.
- 여기서 정적 웹 사이트 호스팅 으로 들어갑니다.
빈 칸에 index.html을 입력하시고 저장합니다.
다음은 권한 설정입니다
현재 정책이 비워져있는데요.
(들어가기 전에, 버킷 정책 편집기 제목 옆에 ARN: arn:aws:s3:::버킷 명이 있는데 ARN: 제외하고 복사해주세요)
권한 > 버킷 정책 > 정책 생성기에 들어갑니다.
정책 생성기 화면입니다.
Select Type of Policy : S3 Bucket Policy
Principal: * 입력
AWS Service : Amazon S3
Actions : getObject 선택
ARN: arn:aws:s3:::버킷명/* (앞에서 복사한 부분을 붙여넣기 + /*)
Add Statement 클릭
Generate Policy를 클릭하시면 팝업이 뜹니다.
그럼 복하하기 (Ctrl +C)
복사한 코드를 버킷 정책 편집기에 붙여넣습니다.
그럼 버킷 정책이 퍼블릭으로 된 것을 볼 수 있을거에요.
* 이제 업로드하러 가보실까요!?!
처음에 react build 파일을 업로드하시면 끝!!
업로드 하시고 난뒤에
URL은
https://[버킷명].s3-[aws-region].amazonaws.com/index.html
으로 접속하시면 됩니다.
여기서 aws-region은 서울 리전 표기 방식 (ap-northeast-2)입니다.
그럼! 홈페이지가 뜹니다!!
여기서 문제가
보통 url 마지막에 index.html을 입력하지 않습니다.
만약 index.html을 입력하지 않으면, 거절이 되는데.. 이방법은 default root를 설정해야된다고 합니다.
다음에는 cloudFront를 이용하여 문제점을 해결해 보겠습니다.!
그럼 이만!