[AWS] AWS S3 정적 웹 사이트 배포 #1

유아현·2023년 3월 27일
2

Deploy

목록 보기
1/4
post-thumbnail

📌 AWS 회원가입 / 로그인

📌 S3 접근을 위한 사용자(IAM) 추가하기

  • 로그인 후 상단에 IAM 입력 > 액세스 관리: 사용자 클릭 > 사용자 추가 클릭


🔥 사용자 세부 정보 지정

  • 다음과 같이 지정하여 자동 생성된 암호를 얻자!

🔥 권한 설정

  • 직접 정책 연결 선택

  • AmazonS3FullAccess 선택 후, 다음 > 사용자 생성

🔥 확인

  • 사용자 생성 클릭 후, 다음과 같이 사용자가 생성됐음을 확인할 수 있다.

📌 Access Key 생성하기

  • 생성한 사용자 클릭 > 보안 자격 증명 > 중간쯤에 액세스 키 부분에서 액세스 키 만들기 클릭

  • 생성 후, csv 파일 다운로드를 받으면 Access Key IDSecret Access Key를 발급받을 수 있다.

📌 버킷 생성하기

🔥S3 버킷 만들기

  • 버킷 만들기 클릭

  • 버킷 이름 입력, 버킷 이름은 각 리전에서 고유해야 한다.

  • 생성 클릭

  • 생성된 버킷 클릭

  • 속성 메뉴로 이동

  • 속성 메뉴에서 정적 웹 사이트 호스팅 메뉴 > 편집 클릭

  • 정적 웹 사이트 호스팅 활성화 클릭

  • 인덱스 문서 작성 > 변경사항 저장 클릭

    인덱스 문서는 웹 사이트 주소에 처음 접속했을 때 보이는 기본 페이지를 지정하는 것이다. 인덱스 문서에 index.html을 작성한다. 오류 문서는 선택 사항이라 공란으로 비워두어도 좋지만, 혹시 모를 오류 발생 시, 메인 페이지로 반환을 위해 index.html을 기입했다.

  • 속성 맨 아래의 정적 웹 사이트 호스팅에 생긴 버킷 웹 사이트 엔드 포인트 주소 클릭

  • 에러 메시지 확인

    해당 에러 메시지가 나오는 페이지가 보이는 이유는 아직 생성한 버킷에 빌드한 정적 웹 페이지의 파일을 업로드하지 않았으며, 퍼블릭 액세스 설정 변경 & 정책 생성을 하지 않았기 때문이다.

퇴치하자.


  • 객체 메뉴 클릭

  • 업로드 버튼 클릭


🤔 업로드 전에 빌드했나요?

  • 안 했다면 package.json 파일을 확인해 build 부분을 확인해 빌드 먼저 하자. 참고로 나는 yarn + vite이라 yarn vite build 명령어를 통해 빌드하였다.

  • 빌드가 완료되면 다음과 같이 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를 이용해 자동 배포하는 부분은 다음 포스팅에 이어서 하겠다!

0개의 댓글