[AWS] S3에서 React.js를 초폭속 간이형 웹 호스팅

React를 공부하는 동안 흥미롭고 재미있는 웹 페이지를 스크래치로 만들 수 있었기 때문에 멤버에게 자랑 공개했다.

지금까지 멤버에게 자랑 공개할 때에는 Heroku, GitHub io 등을 사용하고 있었지만, S3에서 폭속으로 할 수 있는 것이 판명되었으므로 비망록으로 남긴다.

소개

도메인과의 연결이나 SSL 대응 등은 실시하고 있지 않습니다.
그래서 공개 할 때는 충분히 조심하십시오.

ReactPj 준비

공식 문서 참조.

$ npx create-react-app my-app
$ cd my-app/
$ yarn build

S3에서 게시할 배포와 같은 버킷 만들기

S3의 콘솔에서 "버킷 만들기"를 누르십시오.

버킷 이름은 임의의 값을 입력합니다.
※ Route53의 독자 도메인을 할당하고 싶은 경우는, 도메인명과 같은 값을 입력하는 것.
도메인 이름은 계정 관계없이 기본이므로. . .

리전은 생각이 없으면 「아시아 퍼시픽(도쿄)」을 선택.

입력하면 "다음"을 누르십시오.
옵션의 설정은 특별히 실시하지 않기 때문에, 한층 더 「다음」을 누르.

모든 공개 액세스 차단 확인란의 선택을 취소합니다.

다음을 누르고 문제가 없으면 버킷 만들기를 누릅니다.

버킷의 작성은 완료.

S3 설정 변경

방금 만든 버킷의 속성을 선택합니다.

Static website hosting을 선택하고 "이 버킷을 사용하여 웹 사이트 호스팅"을 누릅니다.
색인 문서에 index.html을 입력하고 저장을 누릅니다.

그런 다음 "액세스 권한"을 선택하고 버킷 정책을 누릅니다.
버킷 정책에는 다음 문자열이 입력됩니다.
[BucketName]에는 이번에 만든 버킷 이름을 입력합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[BucketName]/*"
        }
    ]
}