프로젝트 진행 당시, 내가 배포 및 자동화를 담당했는데 잠깐 쉬는 시간을 활용해 어떻게 배포 했는지 정리해보려고 한다!
보통 EC2로 static 파일을 업로드하는 방식을 통해 배포를 하는데 Vue.js나 React 같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 되기에 서버가 필요없다.
이런 경우, S3 스토리지에 올리면 서버 없이 간단히 프론트 앱을 런칭할 수 있기 때문에 프로젝트 배포 방법으로 S3를 선택 했었다.
01. 사용자 생성하기
IAM > [사용자] > [사용자 추가] 클릭
원하는 이름 (영숫자 또는 +=,.@-만 포함)_ 입력 후 [다음] 클릭
-
[권한 옵션] 에서 "직접 정책 연결" 선택한다
-
[권한 정책] 에서 아래의 2개를 검색해 추가한다
AmazonS3FullAccess
CloudFrontFullAccess
-
[다음] 을 클릭해 진행한다
권한 요약에 잘 선택 되어 있는지 확인 후, [사용자 생성] 을 클릭
-
잘 만들어진 것을 확인 했다면, [사용자] 클릭
-
이후 [보안 자격 증명] 탭을 클릭한다
여기서 [엑세스 키] 만들기 클릭
[로컬 코드] 선택 후 다음 단계로 넘어 가는데,
⭐⭐⭐ 여기서 매우 중요한 부분 ⭐⭐⭐
-
액세스 키 ⭐⭐⭐ CSV 파일 ⭐⭐⭐ 을 꼭 다운 받아야한다
-
이 페이지를 벗어나는 순간 두번 다시 엑세스 키를 확인할 수 없기 때문!!
02. 버킷 생성하기
AWS 검색창에 S3 검색 후, [버킷 만들기] 클릭
-
버킷 이름 및 AWS 리전을 설정하고
-
객체 소유권을 [ACL 활성화됨] 으로 설정한다
-
버킷의 퍼블릭 엑세스 차단을 다 해제한 후, 약관 동의에 체크한다
-
나머지는 그대로 둔 뒤 버킷 생성을 한다
-
버킷을 생성했다면, 생성된 [버킷] 클릭 > [속성] 탭 클릭한다
-
[정적 웹 사이트 호스팅] 에서 [편집] 클릭한다
위와 같이 설정 해준 뒤 [변경 사항 저장] 클릭
이후 [권한] 탭에 들어간다
-
[버킷 정책] 에서 [편집] 클릭 후 아래의 코드를 붙여넣기 한다
-
Resource 에서 해당 버킷 이름을 넣어야한다
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject"
],
"Resource": "arn:aws:s3:::버킷이름/*"
}
]
}여기까지 왔다면 배포 준비는 끝났다!
03. 배포하기
이후 내가 만든 프로젝트 폴더에서 yarn build 를 해주면 아래 처럼 자동적으로 build 파일이 생긴다
생성된 build 폴더 "안"의 모든 파일을 내가 만든 버킷에 업로드하면 배포 끝!
엉금엉금