IAM
입력 > 액세스 관리: 사용자 클릭 > 사용자 추가 클릭직접 정책 연결 선택
AmazonS3FullAccess
선택 후, 다음 > 사용자 생성
Access Key ID
와 Secret Access Key
를 발급받을 수 있다.버킷 만들기 클릭
버킷 이름 입력, 버킷 이름은 각 리전에서 고유해야 한다.
생성 클릭
생성된 버킷 클릭
속성 메뉴로 이동
속성 메뉴에서 정적 웹 사이트 호스팅
메뉴 > 편집
클릭
정적 웹 사이트 호스팅 활성화
클릭
인덱스 문서 작성 > 변경사항 저장 클릭
인덱스 문서는 웹 사이트 주소에 처음 접속했을 때 보이는 기본 페이지를 지정하는 것이다. 인덱스 문서에
index.html
을 작성한다.오류 문서
는 선택 사항이라 공란으로 비워두어도 좋지만, 혹시 모를 오류 발생 시, 메인 페이지로 반환을 위해 index.html을 기입했다.
속성 맨 아래의 정적 웹 사이트 호스팅
에 생긴 버킷 웹 사이트 엔드 포인트
주소 클릭
에러 메시지 확인
해당 에러 메시지가 나오는 페이지가 보이는 이유는 아직 생성한 버킷에 빌드한 정적 웹 페이지의 파일을 업로드하지 않았으며, 퍼블릭 액세스 설정 변경 & 정책 생성을 하지 않았기 때문이다.
객체
메뉴 클릭
업로드
버튼 클릭
package.json
파일을 확인해 build
부분을 확인해 빌드 먼저 하자. 참고로 나는 yarn + vite이라 yarn vite build
명령어를 통해 빌드하였다. Bulid 디렉토리에 있는 정적 파일들 업로드
build 폴더 안에 포함된 내용 업로드
build
파일 자체를 업로드하는 게 아닌 build 파일 내에 있는 내용들을 업로드해야 한다
추가로 이렇게 모두 드래그해서 올려도 괜찮지만 업로드에 문제가 간혹 있다고 하니 파일 추가를 눌러 파일을 추가하고, 폴더 추가를 눌러 따로 업로드 하자.
파일 추가
폴더 추가
업로드
클릭
업로드가 다 되면 다음과 같이 업로드 성공 메시지를 확인할 수 있다
버킷
메뉴로 돌아가 생성한 버킷
으로 들어가자권한
메뉴 클릭
퍼블릭 액세스 차단 해제 메뉴 편집
클릭
체크박스를 해제하고, 변경 사항 저장
버킷 정책 편집 클릭
먼저 버킷 ARN
클릭해 복사를 해 두고 버킷 생성기
클릭하자
왜 복사하는지는 하다보면 안다.
'Select Type of Policy' 옵션에서는 'S3 Bucket Policy'를 선택하고,
'Principal' 옵션은 권한을 적용할 사용자를 정한다. 우리는 모두에게 공개할 것이므로
*(별표)
로 입력한다.
'Actions' 옵션에서는 'GetObject'를 선택합한다. GetObject 옵션을 선택하게 되면, 버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터를 읽을 수 있게 된다. 버킷을 웹 사이트 용도로 구성할 때 선택하면 좋다.
그리고 아까 복사해 둔
버킷 ARN
을 Amazon Resource Name (ARN)부분에 붙여 놓고 뒤에/*
을 추가한다.
Generate Policy
클릭
나오는 내용 싹 긁어서 붙여 넣기 > 변경 사항 저장
다시 속성 메뉴로 이동
정적 웹 사이트 호스팅 버킷 웹 사이트 엔드 포인트
주소 클릭해서 배포가 성공적으로 됐는지 확인하자!
잘 나온다. 굿.
github Actions를 이용해 자동 배포하는 부분은 다음 포스팅에 이어서 하겠다!