Github Action, S3, CloudFront로 CI/CD 구축하기(23.06.12 수정)

# 서론

이전 프로젝트에서 github action과 vercel로 CI/CD를 구축하여 협업을 진행했다. 하지만 vercel에서 대부분의 세팅을 자동으로 해주기 때문에 Web 아키텍처를 머릿 속에 구체화하기 힘들었고, 내가 임의로 세팅할 수 있는 것들이 제한적이었다. 특히 preview-deploy에 대해 e2e테스팅을 하도록 세팅하는 것이 너무 불편했다. 편하게 쓰기 위해서는 유료버전을 써야 할 것 같다...그래서 사람들이 많이 사용하는 방법인 S3와 CloudFront를 사용해 구축해볼까 한다.

# 순서

1. IAM 권한 설정
2. S3 버킷 생성
3. 빌드된 프로젝트 S3버킷에 업로드
4. CloudFront 생성 및 S3와 연동
5. Github action 작성

# IAM 권한 설정

IAM은 Identity and Access Management의 약자로 AWS 계정 내 사용자, 그룹 및 역할에 대한 권한을 관리하는 서비스다. 당연히 이것을 사용하기 전에 AWS계정을 생성해야 한다.
이 과정을 거치는 이유는 자격 증명 정보(access-key-id와 secret-access-key)를 발급받아 S3버킷에 접근하는 자격을 얻기 위함이다. 이 자격을 얻어야 github action에서 배포가 가능하다.

1. 먼저 로그인 하고 검색창에 IAM을 검색하자.
   
   
   

2. 왼쪽 네비게이션 바에 사용자 탭 클릭
   
   

3. 사용자 추가
   
   
   

4. AmazonS3FullAccess 체크
   
   
   

5. CloudFrontFullAccess체크
   
   
   

6. Access Key 발급 - Ilovecat-prod는 내 사이드 프로젝트 이름이다. 저 위치에 아까 사용자 이름으로 작성한productions-dev가 표시된다면 제대로 생성된 것이다. 사용자 이름-보안 자격 증명-액세스 키 만들기-CLI
   
   
   

잘 저장해두자. 지금 아니면 확인하지 못한다. 이것을 나는 .env파일과 github secrets에 저장할 것이다. 물론 csv를 다운로드 받아도 된다.
.env파일은 절대 github에 push하면 안된다.

다음 사진은 github secrets에 등록한 모습이다. repository에 들어가서 Settings-Security-Secrets and variables-Actions에 있다.

이제 S3 버킷을 생성할 것이다.

# 'S3' 버킷 생성

S3는 Amazon Web Services(AWS)에서 제공하는 클라우드 스토리지 서비스로 Simple Storage Service의 약자다. 파일, 이미지, 비디오, 문서 같은 데이터들을 저장할 수 있다.
AWS의 클라우드 서비스로 우리가 직접 서버를 운영하지 않고 클라우드에 데이터를 저장하고 안전하게 관리할 수 있다. 비용 또한 사용량에 따라 지불되어 사용량이 많지 않은 웹사이트를 배포한다면 가격 부담도 덜하다.

우선 최초 한 번은 우리가 직접 배포를 해주어야 한다.

1. 검색창에 S3를 입력하자.
   
   
   

2. 버킷을 생성하자. (사진과 같이 그대로 해준다.) 모든 퍼블릭 액세스를 차단하자.
   모든 액세스를 차단하는 이유는 s3를 통한 접속을 막고 cloudFront를 통해서 사용자가 접속하도록 하기 위함이다.
   
   
   
   
   
   

버킷 버전 관리는 git에서 우리가 코드 버전관리하는 것과 비슷한 기능이다. git에서 관리하여 data를 업로드 하는 것인데 굳이 활성화 할 필요는 없는 것 같다.

3. 버킷 이름 클릭하고 들어가서 빌드한 build폴더 안에 파일들을 업로드 해주자.
   
   
   
   
4. 속성 탭 가장 하단에 정적 웹 사이트 호스팅을 들어가서 다음과 같이 설정해주자.
   인덱스 문서, 오류 문서가 모두 index.html인 이유는 리액트는 SPA프레임워크이기 때문이다.
   

이제 cloudFront 연동을 해줄 거다.

# CloudFront 생성 및 연동

CloudFront는 AWS에서 제공하는 Content Delivery network(CDN) 서비스이다. 만약 나는 한국에 있고 내가 받아오려는 컨텐츠가 미국 서버에 저장되어 있다면 해당 컨텐츠를 로드하기까지 아주 긴 시간이 걸릴 것이다. 이는 사용자 경험을 방해한다. CDN은 서버를 세계 곳곳에 서버를 분산시켜 데이터를 캐싱하고 사용자가 요청한 곳에서 가장 가까운 서버가 데이터를 전송해주는 서비스다.

1. CloudFront를 생성해보자.
   

다음 옵션들을 설정해준다.

OAI를 생성하는 이유는 S3에서 모든 퍼블릭 액세스를 차단한 상태고, CloudFront가 S3에 접근하는데 OAI를 권한 객체로 사용하기 때문이다. S3는 자신에게 요청을 보낸 도메인이 OAI를 가지고 있는지 검사하여 파일에 대한 접근 여부를 결정한다

2. 대체 도메인과 SSL인증서는 Route53을 통해 세팅을 해주었다면 넣어주자.

3. 에러 페이지에 대한 응답 설정.
   위와 같이 리다이렉트 세팅을 해주는 이유는 CloudFront 배포도메인을 브라우저에 그냥 입력할 경우 403Forbbiden 에러를 뱉어낸다. "[배포 도메인]/index.html"로 요청을 해야 우리가 배포한 사이트에 접근 할 수 있다. 하지만 일반 사용자들이 "[배포 도메인]/index.html"와 같이 입력하는 것은 번거롭고 이 사실을 알수도 없기 때문에 리다이렉트를 설정해주는 것이다.
   
   
   

4. 그리고 S3 버킷 정책을 확인해보면 다음과 같이 바뀐 것을 볼 수 있다.
   

5. CloudFront를 확인해보면 마찬가지로 배포가 되었다. 좌측에 ID가 Distribution ID다. 이 또한 github Action에서 사용하기 위해 github Secrets에 등록해주자.
   

# Github Actions 작성

1. Configure AWS Credentials: AWS인증 정보 설정

• aws-actions/configure-aws-credentials@v1은 deprecated로, @v2로 바꿔준다.

2. Deploy to S3: S3에 정적 파일 배포
3. Invalidate CloudFront Cache: CloudFront 캐시 무효화

• 기존에 캐시된 객체 무효화하고 오리진 서버(S3)에서 새로운 복사본을 가져와 캐시한다. 즉 내가 push하면 새로운 버전 바로 적용.
• DEV_AWS_DISTRIBUTION_ID는 cloudFront의 Distribution id이다.