S3 버킷 생성하기

노트 작성 앱을 호스팅하려면 정적으로 제공될 에셋을 S3에 업로드해야 합니다. S3에는 다양한 파일 유형을 구분하기 위해 버킷(또는 폴더) 개념이 있습니다.

버킷은 정적 웹사이트로 에셋을 호스팅하도록 구성할 수 있으며, 자동으로 공개적으로 접근 가능한 URL이 할당됩니다. 이제 시작해 보겠습니다.

버킷 생성하기

먼저 AWS 콘솔에 로그인한 후 서비스 목록에서 S3를 선택합니다.

버킷 생성을 선택하고 애플리케이션 이름을 지정한 후 US East (N. Virginia) 리전을 선택합니다. 애플리케이션이 CDN을 통해 제공되기 때문에 리전은 중요하지 않습니다.

설정 옵션 단계에서 다음을 클릭합니다.

권한 단계에서 새로운 공개 버킷 정책 차단과 버킷에 공개 정책이 있는 경우 공개 및 교차 계정 액세스 차단을 선택 해제합니다. 버킷을 공개로 설정하는 것은 일반적인 보안 실수이지만, 이 경우 버킷에서 애플리케이션을 제공할 것이므로 공개로 설정해야 합니다.

검토 페이지에서 버킷 생성을 클릭하여 버킷을 생성합니다.

이제 목록에서 새로 생성된 버킷을 클릭하고 권한을 클릭하여 권한 패널로 이동합니다.

권한 추가하기

기본적으로 버킷은 공개적으로 접근할 수 없으므로 S3 버킷 권한을 변경해야 합니다. 권한 패널에서 버킷 정책을 선택하세요.

다음 버킷 정책을 편집기에 추가하세요. 여기서 notes-app-client는 우리의 S3 버킷 이름입니다. 반드시 여러분의 버킷 이름을 사용하세요.

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

그리고 저장을 클릭하세요.

정적 웹 호스팅 활성화

마지막으로 버킷을 정적 웹사이트로 전환해야 합니다. 상단 패널에서 Properties 탭을 선택하세요.

Static website hosting을 선택하세요.

이제 Use this bucket to host a website를 선택하고 index.html을 Index Document와 Error Document로 추가하세요. React가 404를 처리하도록 할 것이므로, 에러도 index.html로 리다이렉트할 수 있습니다. 작업을 마치면 Save를 클릭하세요.

이 패널은 앱에 접근할 수 있는 위치도 보여줍니다. AWS는 정적 웹사이트에 대한 URL을 할당합니다. 이 경우 할당된 URL은 notes-app-client.s3-website-us-east-1.amazonaws.com입니다.

이제 버킷 설정이 완료되었으니, 자산을 업로드해 보겠습니다.