항해 45일차
오늘은 지금까지 진행했던 프로젝트를 배포하는 시간을 가졌다.
우리가 사용한 배포 방법은 s3를 사용하였다. 그래서 오늘은 s3배포에 대해서 써볼려고 한다.
S3 배포
🚩- S3, 정적배포가 무엇인지 학습합니다.
- S3를 통한 리액트 프로젝트를 배포하는 실습을 진행합니다.
Amazon Simple Storage Service(Amazon S3)는 확장성, 데이터 가용성, 보안 및 성능을 제공하는 스토리지 서비스입니다. 쉽게 말하자면, 스토리지 즉 구글 드라이브 처럼 파일 저장 서비스입니다. S3는 FTP 서버처럼 단순한 파일 저장 영역으로 사용할 수도 있으며, 다양한 AWS 서비스의 사용 로그 저장, 정적 웹 사이트 호스팅에도 사용이 가능합니다.
저희는 Amazon S3을 사용하여 리액트로 만든 웹 페이지를 호스팅 해보겠습니다.
1. S3 버킷 생성하기
step 1 - 버킷 만들기
AWS 콘솔에 로그인하고 서비스 탭에서 S3를 선택합니다. 이미 S3 버킷을 생성하지 않은 경우라면 아래와 같은 보이실 겁니다. 버킷 만들기 버튼을 클릭해주세요.
step 2 - 버킷 이름 / 리전 설정하기
버킷 만들기 버튼을 클릭하면 아래와 같이 생성하고자 하는 버킷의 구성을 입력하는 페이지로 이동하시게 될 텐데요, 버킷 이름과 리전을 선택해주세요.
- 버킷 이름은 고유값으로 설정해야 합니다. 버킷 이름 규칙을 확인하고 싶다면, 여기서 확인하세요..
- AWS 리전은 아시아 태평양(서울) ap-northeast-2 Amazon S3에서 사용자가 만드는 버킷을 저장할 지리적 AWS 리전을 선택할 수 있습니다. 지연 시간 최적화, 비용 최소화, 규정 요구 사항 준수 등 다양한 필요에 따라 리전을 선택할 수 있습니다. 저희는 가장 가까운 리전인 서울 ap-northeast-2를 사용하겠습니다.
step 3 - 객체 소유권 / 퍼블릭 액세스 설정하기
다른 AWS 계정에서도 저희가 만드는 버킷의 소유권을 갖거나 접속을 제어할 수 있게 할지를 설정하는 부분입니다. 저희는 다른 계정에 지금 만들고 있는 버킷을 양도하지 않을 것이기 때문에 default 설정인 ACL 비활성화를 체크하고 넘어가시면 되겠습니다.
저희는 정적 웹페이지를 호스팅하고 모든 사람이 해당 리소스에 접근하게 할 것이기 때문에 아래와 같이 모든 퍼블릭 엑세스 차단 설정은 해제해 주겠습니다.
버킷을 통해 static 파일에 대한 호스팅을 진행하는 경우 만약 퍼블릭 액세스 제한을 하게 되면 사용자가 웹 페이지에 접근할 수 없기 때문에 퍼블릭 액세스에 대한 차단을 풀어주어야 합니다.
아래 주의사항의 현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있습니다. 부분만 체크하고 아래 버킷 만들기 버튼을 클릭해주세요.
2. 버킷 속성 / 권한 설정하기
추가적인 속성과 권한 설정을 위해서 위에서 생성한 버킷을 클릭하여 이동해주세요.
step 1 - 정적 웹 사이트 호스팅 활성화
속성탭을 선택하고 스크롤을 가장 아래까지 내리면 정적 웹 사이트 호스팅 편집 버튼이 보이실꺼에요. 편집 버튼을 누르시고 활성화 부분을 체크해주세요.
호스팅을 활성화한 뒤에 인덱스 문서와 오류 문서를 index.html로 설정해주고 변경사항 저장해주세요.
step 2 - 버킷 정책 생성하기
버킷 정책이란 버킷에 접근하는 유저에게 어떠한 권한을 부여할지 설정하는 부분입니다.
버킷의 권한 탭을 클릭하여 이동하고, 버킷 정책 부분에 편집 버튼을 클릭해주세요.
직접 정책은 JSON 형태로 작성하기 때문에 직접 작성하는 것도 가능하지만, 저희는 정책 생성기로 더 쉽게 버킷 정책을 생성해보겠습니다.
- AWS Policy Generator : https://awspolicygen.s3.amazonaws.com/policygen.html
- S3 정책 생성을 위해 select type of policy는
S3 Bucket Policy로 설정해주세요. - Effect를
Allow로 선택해주세요. - Principal을
*로 설정하여 모든 유저가 리소스를 읽을 수 있도록 해주세요. - Actions는
GetObject를 선택하여 객체 읽기 권한만을 설정해주세요. - ARN을 입력해주세요.
❗️ ARN은 이전 페이지에서 정책 생성기 버튼 아래 위치하고 있습니다. 복사 붙여넣기 해주시고 가장 뒷 부분에 /을 추가해주세요. 반드시 ARN 가장 뒷 부분에 / 를 추가해주셔야 합니다.
❗️ 만약 ARN이 arn:aws:s3:::mys3forsparta 이라면 ➡️ arn:aws:s3:::mys3forsparta/*
모든 입력을 마치셨다면 아래 generate policy 버튼을 클릭하시면 아래와 같이 JSON 문서가 생성됩니다.
그래도 복사하셔서 정책 부분에 붙여 넣어 줍니다.
스크롤을 내리셔서 변경 사항 저장 버튼을 누르시면 모든 권한 설정은 끝이 났습니다!
3. IAM 사용자 생성하기
Step 1 - IAM 사용자 만들기
검색 탭에서 IAM을 입력하고 클릭하여 이동합니다.
왼쪽 탭에서 사용자를 선택합니다. 만약 이미 생성된 IAM 유저가 없다면 오른쪽 상단에 위치한 사용자 추가 버튼을 클릭해주세요.
사용자 이름을 입력해 주시고 AWS 자격 증명 유형을 엑세스 - 키로 설정해주세요.
다음을 눌러 권한 설정 페이지로 이동해주세요. 상단에 3개의 탭이 보이실텐데
기존 정책 직접 연결을 눌러주시고 검색창에 S3를 입력한이후AmazonS3FullAccess를 선택해주세요.
아래와 같이 마지막 페이지까지 계속 다음을 눌러 이동해주세요.
❗️❗️❗️ 엑세스 키 ID와 비밀 엑세스 키는 나중에 사용해야하므로 csv 다운로드 또는 반드시 안전한 곳에 저장해주세요.
4. S3에 프로젝트 배포하기
step 1 - AWS CLI 설치하기
배포를 위한 AWS CLI 툴이 필요하기 때문에 📌여기서 운영 체제에 맞는 AWS CLI를 다운로드하고 설치해주세요.
운양 체체마다 다운로드 링크가 있습니다. 해당 링크를 클릭해서 설치 파일을 받아주시고 실행시켜 주세요.
설치 이후에 아래와 같이 aws -—v 을 터미널에 입력하면 설치된 aws cli 버전을 확인할 수 있습니다.
Step 2 - CLI에 버킷 정보 입력하기
aws cli 설치를 확인하셨다면 터미널에 다음과 같은 명령어를 입력해주세요.
aws configureKey ID : IAM 사용자 추가할 때 저장한 Access Key ID 값
Access Key : IAM 사용자 추가할 때 저장한 Secrete access key 값
region name : ap-northeast-2output
format : json
aws s3 ls정상적으로 버킷이 연동되었는지 확인하고 싶으시면 터미널에 위 명령어를 입력해주세요. 아래같이 등록된 S3버킷의 정보가 나와야 합니다.
step 3 - 배포 스크립트 추가하기
- vscode에서 프로젝트를 열어주세요.
- package.json 파일을 열고, script 부분에 배포 스크립트를 추가해주세요.
"deploy": "yarn run build && aws s3 sync build/ s3://버킷 이름"
- 프로젝트 경로 터미널에서 배포 스크립트 명령어 실행하기
yarn run deploy끝~~
