AWS S3에 내가 만든 REACT 프로젝트를 배포하는 방법을 작성하려고 한다.
인프라 관련 경험이 있다보니 배포에는 자신이 있었지만, 생각보다 과정이 어려워서 나도 복습용으로 글을 정리해보려고 한다. 구글링을 참조하여 먼저 배포를 진행한 뒤 이렇게 매뉴얼 형식으로 글을 작성해보았다. 중간에 에러도 많이 났었고, 다양한 방법으로 시도했으나 지금 정리한 내용이 가장 깔끔하다고 생각한다🤧
React
1.배포할 프로젝트 준비하기
1-1. 내가 올리고자 하는 프로젝트 디렉토리를 준비하고, npm start(혹은 run dev)를 진행하였을 때 정상적으로 실행되는지 먼저 테스트.
1-2. [npm run build] 명령어를 통하여, build 파일 및 디렉토리 생성하기.(시간이 조금 걸릴수도 있음)
AWS
1.AWS-IAM 준비하기
AWS-IAM?
- Identity and Access Management로 AWS 리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스
- 리소스를 사용하도록 인증 및 권한 부여된 대상을 제어
1-1. aws계정에 로그인 후 검색창에 IAM검색 후 나오는 [IAM 항목 클릭].
1-2. 항목 선택 시 다음과 같은 화면이 나오는데 좌측 [사용자] 메뉴 클릭.
1-3. 이후 나오는 화면에서 [사용자 추가] 버튼 클릭.
1-4. [사용자 추가] 버튼을 클릭하면 아래와 같이 입력하고 [다음:권한] 버튼 클릭.
1-5. 그 다음 나오는 화면에서는 [기존 정책 직접연결] tab 선택 후 아래와 같이 [AmazonS3FullAccess, CloudFrontFullAccess] 체크박스 활성화 후 [다음:태그] 버튼 클릭.
1-6. 이후 단계는 쭉쭉 넘어가는데 다음과 같은 화면이 나오면 [.csv 다운로드] 버튼을 눌러 잘 보관하고 있기.
1-7. 사용자에 정상적으로 생성이 되었는지 다시 한번 확인하면 IAM 사용자 생성 완료.
2.AWS-S3 준비하기
AWS-S3?
- Simple Storage Service(S3)는 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스
- 데이터를 버킷 내의 객체(해당 파일을 설명하는 모든 메타데이터)로 저장하는 객체 스토리지 서비스
2-1. 검색창에 S3를 검색하고 [S3] 항목 클릭하면 다음과 같은 화면이 나오는데 [버킷 만들기] 버튼 클릭.
2-2. 이후 버킷 생성에 필요한 정보를 입력하는데 아래 이미지를 참조하여 작성.
2-3. 모든 과정을 마치고 [버킷만들기] 버튼을 누르면 다음과 같이 내가 만든 s3버킷이 생성된다.
2-4. 생성된 버킷의 이름을 눌러 세부 진입하면 [속성], [권한] tab을 아래와 같이 작업을 진행해준다.
2-4-1. [버킷] - [속성]tab 설정.
2-4-2. [버킷] - [권한]tab 설정.(복잡한 단계가 많아 추가 설명 진행)
2-4-3. [권한]tab 설정 중 버킷 정책 항목에서 [편집] 버튼을 누르면 다음과 같은 항목이 나오는데 빨간색 네모 박스의 [버킷 ARN]을 복사하고, [정책 생성기] 버튼을 클릭.
2-4-4. [정책 생성기] 버튼을 클릭하고 나면 다음과 같은 창이 나오는데 아래 이미지를 참조하여 동일하게 입력하고 [Add Statement] 버튼 클릭. 참고로, [ARN] 입력 부분에는 [arn:aws:s3:::생성한버킷명/*] 꼭 이렇게 입력을 해준다.
2-4-5. 이전 단계를 모두 마치면 밑에 step3항목이 나오는데 저기서는 그냥 [Generate Policy] 버튼을 누르고 등장하는 tab의 [json] 내용을 싹 다 복사해주면 된다.
2-4-6. 위 단계를 모두 마쳤다면 다시 버킷 정책으로 돌아와 복사한 내용을 아래와 같이 붙혀넣기 해주고, [변경 사항 저장] 버튼 클릭하면 S3에 관한 설정은 모두 마쳤다.
3.AWS-CLI 통해 코드 배포
AWS-CLI?
- .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스
- CDN(Content Delivery Network or Content Distribution Network) : 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장해서 제공하는 시스템
- Edge Location이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공
- 중간 캐시 서버에서 콘텐츠 전달 - 캐싱을 통해 사용자에게 더 빠른 전송 속도를 제공 (서버 부하 감소)
- 손쉽게 http 요청을 https로 리다이렉션 가능
3-1. 아래 URL에서 OS맞는 CLI를 설치해준다.
https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html
3-2. 설치가 완료되면 [터미널]을 실행하고, [cd]명령어를 통하여 배포하고자 하는 프로젝트 경로로 이동한다.(아까 만들어둔 build 디렉토리 상단 경로)
3-3. 이후 터미널에 다음과 같이 명령어를 입력한다.
aws configure --profile [IAM 사용자 이름]
3-4. 위와 같은 명령어를 치면 다음과 같은 항목이 나오는데, IAM 사용자를 만들고 다운 받은 CSV내용을 순서대로 입력해준다.(1-6에서 저장한 CSV 파일을 말함)
Key ID : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Access key ID
Access Key : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Secret access key
region name : ap-northeast-2
output format : json
3-5. 모든 설정이 끝났다면 다음과 같이 명령어를 입력하여 배포 진행
aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]
3-6. upload 단계가 끝나면 배포가 완료.
4.최종 확인
4-1. AWS-S3로 돌아와서 배포된 파일들을 확인하고, [속성] tab 클릭.
4-2. 밑으로 쭉 내려서 [정적 웹 사이트 호스팅] 메뉴 하단의 url을 클릭.
4-3. 정상적으로 내가 만든 프로젝트가 표출되는 내용을 확인할 수 있다!
블로그 글을 이렇게 열심히 써본건 너무 오랜만? 아니 처음인데 생각보다 시간이 후딱 지나갔다...
사실 지인에게 도움을 주고 싶은 마음에 시작했는데 이걸 보고 성공적으로 배포가 되었다면 나도 기쁠 거 같다! 물론 나도 복습하는 과정에서 시작했지만 완성된 글을 보니 조금 뿌듯하기도 하고,,,(코쓱) 암튼 AWS-S3 배포글은 여기서 끝😀
