[AWS S3] 한 살도 따라하는 리액트(React) S3 배포하기

사용할 AWS 서비스는 다음과 같습니다. 

 

1️⃣ IAM(Identitiy and Access Management)

AWS IAM

: AWS 계정 및 권한 관리 서비스

: AWS 서비스와 리소스에 대한 엑세스 관리

: 사용자, 그룹, 역할, 정책으로 구성

 

2️⃣ S3(Amazon Simple Storage Service)

AWS S3

:거의 무제한 저장용량을 제공하는 객체(Object) 스토리지 서비스

:객체(파일)이 여러 버전을 가질 수 있음

 

STEP1.  IAM 사용자 생성

1-1. aws 검색창에 IAM을 검색해 IAM 서비스 콘솔로 이동합니다.

 

1-2. IAM 콘솔의 왼쪽 '사용자' 탭에서 오른쪽 상단의  사용자 추가 버튼을 클릭합니다.

1-3. 사용자 이름을 원하는 이름으로 입력하고, 

AWS 액세스 유형 선택의 'AWS 자격 증명 유형 선택'을 액세스 키 - 프로그래밍 방식 엑세스로 선택합니다.

그리고 다음:권한 버튼을 클릭해서 다음으로 이동합니다.

1-4. 권한 설정에서 '기존 정책 직접 연결'을 선택한 후, 

정책 필터 검색창에 S3FullAccess를 검색해 AmazonS3FullAccess 정책을 선택합니다.

(이후 CloudFront도 사용하게 될 수도 있으니 CloudFrontFullAccess 정책도 선택해놓으면 나중에 편합니다.)

 

1-5. 다음 선택 사항부터는 패스해주고 계속 다음 버튼을 누릅니다.

 

1-6. 입력한 내용을 검토하고, 사용자 만들기 로 IAM 계정을 생성합니다.

 

1-7. IAM 사용자 추가가 완료되면, 액세스 키 ID와 비밀 액세스 키를 확인할 수 있는데, .csv 다운로드 버튼을 눌러 저장해줍니다.

 

 

만약 비밀 액세스 키를 저장하지 못하고 닫기를 눌러버렸다면..! 다음 포스팅을 참고해주세요. 간단하게 해결할 수 있습니다.

저장하신 분들은 다음 단계로 Go!

https://10000cow.tistory.com/entry/AWS-IAM-IAM-%EB%B9%84%EB%B0%80-%EC%95%A1%EC%84%B8%EC%8A%A4-%ED%82%A4-%ED%99%95%EC%9D%B8%EC%9D%84-%EB%AA%BB%ED%96%88%EB%8B%A4%EB%A9%B4

[AWS IAM] IAM 비밀 액세스 키 확인을 못했다면?

---

STEP2.  S3 버킷 생성

2-1. aws 검색창에 S3를 검색해 S3 콘솔로 이동합니다.

 

2-2. S3 콘솔에서 버킷 만들기 버튼을 클릭합니다.

 

2-3. 버킷 이름에 원하는 버킷 이름을 넣고, AWS 리전은 서울 ap-northeast-2로 설정해줍니다.

 

2-4. 객체 소유권을 ACL 활성화됨으로 선택하고, 객체 소유권은 버킷 소유자 선호 로 그대로 설정합니다.

2-5. 모든 퍼블릭 액세스 차단을 해제해주고,

⚠️'현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다'에 체크해줍니다. ✅

2-6. 나머지 사항은 아래 사진과 같이 그대로 냅두고, 버킷 만들기 버튼으로 버킷을 만들어줍니다.

 

다음과 같이 S3 콘솔에 버킷이 만들어졌음을 알 수 있습니다.

 

2-7. S3 콘솔에서 버킷 이름을 눌러 '속성' 탭에 들어갑니다.

 

2-8. 가장 아래로 스크롤을 내리면 '정적 웹 사이트 호스팅'이 있습니다. '편집'을 눌러줍니다.

2-9. 정적 웹 사이트 호스팅을 '활성화'로 설정하고, 인덱스 문서에 index.html, 오류 문서에 index.html을 입력합니다.

2-10. 마지막으로 '권한' 탭에서 버킷 정책의 편집을 누릅니다.

2-11. 버킷 정책 편집에서 '정책 생성기'를 클릭합니다.

2-12. 정책 성생기(AWS Policy Generator)에서

Select Type of Policy: S3 Bucket Policy

Effect: Allow 

Principal: * 

Actions: GetObject 선택 (버킷 접근 권한)

Amazon Resource Name(ARN): '2.11 버킷 정책 편집 페이지'의 버킷 ARN을 복사한 후, 뒷부분에 /*을 붙여서 입력.

(예: arn:aws:s3:::s3-10000cow/*)

마지막으로 Add Statement를 눌러서 정책 생성 완료.

 

2-13.

가장 아래의 Generate Policy 버튼 클릭해서 나오는 내용을 복사한 뒤,

다시 정책 편집기의 정책에 붙여 넣기 해준 후, 변경 사항 저장클릭!

 

---

STEP3.  S3 버킷에 객체 업로드

S3 버킷에 객체(리액트 파일)을 업로드 하는 방법은 크게 두가지가 있다.

1. S3 콘솔 > S3 버킷 이름 클릭 > '객체' 탭 > 업로드 버튼으로 직접 파일 업로드

 

2. 아래 AWS 공식 문서를 참고해 AWS CLI를 설치한 뒤, 터미널에 명령어를 입력해 업로드

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

위 공식 문서를 참고해 CLI가 설치 되면, 이전에 IAM 사용자를 만들 때 저장했던 csv 파일을 열어 다음을 입력해준다.

aws configure --profile [IAM 사용자 이름]

그러면 아래처럼 순서대로

AWS Access Key ID: csv 파일에서 Access key Id를 찾아 입력

AWS Secret Access Key: csv 파일에서 Secret access key를 찾아 입력

Default region name: ap-northeast-2 

Default output format: json 

이렇게 입력해주면 사용자 설정이 완료된다.

 

이제 정말 마지막 단계!

배포하고자 하는 리액트 파일 디렉토리로 터미널에서 cd를 이용해 이동해준다 이 부분 빼먹으면 계속 오류나고 진행이 안될 것이다.

배포하고자 하는 디렉토리로 왔다면, 아래와 같이 입력해준다. ( [와 ]는 빼고 입력하면 된다.)

aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]

---

배포 끝! 이제 확인해보자

이제, 해당 S3 콘솔 > 버킷 이름 > 속성 > 정적 웹 사이트 호스팅의 '버킷 웹 사이트 엔드 포인트'로 접속하면 배포된 것을 확인 가능하다.