S3에 정적 HTML 파일 및 SPA 스크립트를 배치하고 게시

S3는 파일을 보완할 뿐만 아니라, 다음의 순서를 밟는 것으로 HTTP 서버로서도 이용할 수 있습니다.
EC2와 같은 서버를 설치하지 않아도 HTML 페이지를 쉽게 게시할 수 있습니다.
또한 React나 Vue 등으로 만든 스크립트를 배치할 수도 있습니다. 비용은 파일 사이즈나 액세스수를 베이스로 계산되어 싸고 간단하게 정보 공개를 할 수 있으므로 추천입니다.

S3 버킷 만들기

버킷을 만들지 않은 경우 Create bucket 버튼을 눌러 S3 버킷을 만듭니다.


최초의 Bucket name은 같은 이름의 버킷명을 (동일한 리전에서) 다른 사람이 사용하고 있으면(자) 에러가 나옵니다.
중복되지 않는 버킷 이름을 넣고 Next를 눌러 다음으로 이동합니다. ②～④는 일단 그대로 설정해도 괜찮습니다.

Public access 차단 해제

그런 다음 공개 액세스 차단을 해제합니다.
이전 단계에서 만든 버킷의 확인란을 선택한 상태에서 편집 공용 설정 버튼을 누릅니다.


Block all public access 확인란을 선택 취소하고 Next를 누릅니다.


그러면 다음과 같이 공개 액세스를 허용할 수 있는지 확인하는 화면이 나옵니다. 창 아래의 입력란에 "confirm"을 입력하고 Confirm 버튼을 누릅니다.


이 절차를 밟아서 데이터가 공개되었습니다! 라고 생각해 버렸습니다만, 이 단계에서는 Public access block를 제외한 것만으로 공개 설정을 넣은 것은 아니기 때문에, 공개는 되어 있지 않습니다.
그런 다음 Bucket 정책을 수정하여 공개 설정을 수행합니다.

Bucket 정책 설정

그런 다음 대상 버킷 이름을 클릭하고 버킷 내용 목록 화면으로 이동한 다음 위에 표시되는 Permission > BucketPolicy로 탭을 클릭합니다.
탭 아래에 BucketPolicyEditor가 표시되므로 아래에 표시된 Bucket policy를 설정합니다.
example-bucket이 되는 부분에 대해서는, 작성한 버킷명으로 변경해 주세요.



"bucketpolicy"

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

정적 웹 사이트 호스팅 설정

마지막으로, Properties 탭 > Static website hosting을 클릭하고 index document 필드에 초기 페이지로 표시할 파일명을 설정합니다. 파일 이름을 지정하지 않고 루트 디렉토리를 참조하는 URL을 표시하려고 하면 여기에 설정한 파일이 자동으로 로드됩니다.
또한 오류 문서를 설정하면 존재하지 않는 페이지 등을 표시하려고 할 때 여기에 지정된 페이지가 표시됩니다.


이것으로 설정 완료입니다!
제목 바로 아래에 표시되는 Endpoint URL을 클릭하면 S3의 루트 디렉토리에 등록된 index.html을 볼 수 있습니다.

참고 페이지
htps : // / cs. 아 ws. 아마존. 이 m / 아마 존 S3 / ㄴ st /에서 v / ぇ b하고 어쩔 수 ぺr 미시 온 s qd. HTML