[React] CRA로 만든 프로젝트 aws S3로 배포하기

진행중인 프로젝트를 aws S3를 사용해 배포해보려고 한다.

IAM 사용자 만들기

일단 S3에 배포하기 위해서는 IAM 권한이 있어야하기 때문에 IAM 대시보드에서 사용자를 추가한다.

 

사용자 이름을 지정하고 사용자 탭에 지정한 이름으로 탭을 눌러보면 아래와 같은 탭을 확인할 수 있다.

이제 보안 자격 증명 탭에서 액세스 키 파트로 들어가 액세스 키를 발급받으면 된다. 

액세스 키는 나중에 사용될 것이기 때문에 키를 복사해서 본인의 메모장에 저장하거나 .csv 파일로 받아놓는 것이 좋다.

 

S3 버킷 만들기

이제 S3 탭으로 들어와 버킷 만들기 버튼을 누르면 버킷을 만들 수 있는데, 본인이 원하는 버킷 이름을 지정해주고 AWS 리전은 서울로 지정해주면 된다.

객체 소유권은 ACL 활성화됨 으로 선택하고 객체 소유권은 버킷 소유자 선호로 설정하였다. 

다음으로는 버킷의 차단으로 설정되어 있는 퍼블릭 액세스 권한을 설정을 해제하고 버킷을 만들면 된다.

위에서 언급한 내용 제외하고는 기본 설정을 그대로 설정하였다.

 

배포하기

이제 만들어진 버킷에 들어가 속성 탭으로 들어가서 웹사이트 호스팅 설정을 변경하면 된다.

속성 탭의 하단에 있는 정적 웹 사이트 호스팅 편집 탭에서 인덱스 문서에 index.html을 작성해준다.

다음으로 권한 탭에서 버킷 정책을 편집 버튼을 누르고, 정책 생성기 버튼을 눌러주면 된다.

 

그럼 위와 같은 사이트로 연결되는데 위 사진처럼 설정한 후 Add Statement를 눌러서 정책을 생성하면 된다. 그럼 JSON 파일을 확인할 수 있는데 이를 복사해서 aws에서 정책 편집 입력란에 붙여넣기 하면 된다!

 

그럼 이제 파일을 업로드하거나 터미널을 통해 파일을 업로드 하는 것이 가능한데, 나는 터미널로 배포를 진행했다. 

 

먼저 AWS CLI를 설치해야 하는데 AWS 공식 문서를 참고해서 설치하면 된다.

AWS CLI를 설치하고 나면 정말 끝나간다.

 

터미널을 키고 아래의 명령어를 작성해주면 된다.

aws configure --profile 'IAM 사용자 이름'

 

그럼 이제 아래와 같은 내용이 차례대로 출력되는데, 이 때 이전에 받았던 .csv 파일을 활용하면 된다.

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)

여기까지 진행했다면 이제 프로젝트 폴더의 터미널에서 아래와 같이 입력해주면 된다.

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

 

그리고 이제 다시 aws S3에 들어와서 정적 웹 사이트 호스팅의 url로 접속하면 배포가 잘 된 것을 확인할 수 있다!!!

간단하게 배포 끝!

 

---

마지막으로 재배포를 할 경우가 있다면 package.json에 아래와 같은 명령어를 작성해놓고 npm run deploy를 입력하면 쉽게 재배포가 가능하다!

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

 

정말 끝!!!