[프론트 CI/CD 스터디 1주차] Github Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화(React CSR)

이론

1. CI/CD란 무엇인가? → [링크]
2. GitHub Flow 전략에 대한 이해 → [링크]
3. GitHub Action에 대한 이해 → [링크]

실습

1. CloudFront, S3 원클릭 배포하기 → [링크]
2. GitHub Action 지속적 전달 구현하기 → [링크]

---

최근 프론트엔드 취업을 위해 공고를 살펴보다 보면 CI/CD와 AWS라는 키워드가 눈에 띈다.

공부해 보면 좋겠다는 생각은 했지만 솔직히 자바스크립트, 리액트, 타입스크립트 등 더 우선순위에 있는 공부할 거리들이 널려 있기에 엄두도 못 냈었다.

그러던 차에 마침 인프런에서 강의형 스터디를 진행한다고 해서 얼른 신청해 보았다.

 

사전 과제대로 가비아 도메인도 구매하고(.shop 도메인은 1년에 부가세 포함 550원... 개인 플젝 배포할 도메인도 그냥 싼 거 살 걸 괜히 .com 도메인을 샀다는 생각이 든다😂) AWS에 가입도 했다. Vercel의 경우 기존 플젝 배포할 때 아이디를 만들어 두었기에 패스.

 

그렇게 오늘 처음으로 CI/CD 자동배포에 대한 이론 강의와 실습 강의를 듣게 되었다.

그러면서 느낀 건 역시 초기 설정은 참 어렵다는 것.

갖가지 이유로 오류가 나는데 그러는 동안 진도는 저 멀리 나가고 있어서 쫓아가는데 정신을 바짝 차려야 했다.

강의 끝날 때쯤 gh 설치 오류 때문에 뒤의 내용은 아예 따라가질 못했는데 다행히 강의 진행해주시는 개발자(운영진)분이 제공해 주시는 자료에 디테일한 설명과 과정이 친절히 적혀 있어서 블로그 글을 보고 끝까지 배포를 완료할 수 있었다.

그렇게 오늘 만나게 된 오류와 해결법을 몇 가지 정리해 보자면 아래와 같다.

 

1. cmd, powershell에서 명령어 실행 시 오류 발생하는 경우 

→  git bash 사용함

 

2. CloudFront, S3 배포시 오류

Error: creating CloudFront Distribution: InvalidViewerCertificate: The specified SSL certificate doesn't exist, isn't 
in us-east-1 region, isn't valid, or doesn't include a valid certificate chain.

→ 아무리 배포 시도해봐도 안 되길래 시간 차를 두고 다시 시도해 봤더니 성공

SSL 인증서가 등록되는 데까지 시간이 걸리기 때문에 생긴 오류라고 한다.

 

3. gh 설치 오류

분명 `choco install gh` 명령어로 설치 완료했는데 자꾸만 gh 키워드 사용할 수 없다고 뜨는 오류(bash: gh: command not found)

→ 엄청 헤맸는데 허무하게도 bash 창 닫았다 여니까 해결되었다.😂

(참고: https://tinyurl.com/2cng2mbz)

 

4. Upload to s3 오류

`deploy.yaml` 커밋 후 푸시한 뒤 배포되지 않는 오류가 발생.

→ 환경변수 등록 시 오타를 냈었다... 오타 수정해서 환경변수 등록 후 재배포하니 배포 완료

// 환경변수 등록

gh secret set AWS_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS ACCESS KEY>
gh secret set AWS_SECRET_ACCESS_KEY -R <유저네임>/<저장소명> -b <AWS SECRET ACCESS KEY>
gh secret set AWS_S3_BUCKET -R <유저네임>/<저장소명> -b <가비아에서 구매한 도메인 이름>
gh secret set AWS_CF_DIST_ID -R <유저네임>/<저장소명> -b <CloudFront 배포 ID>

 

 

이번 시간에 배포한 결과물

https://yesol.shop/

실습 과제

추가 과제

 

소감

역시나 프로그래밍은 설정하는 게 제일 어렵다;

특히나 AWS는 너무나 다양한 메뉴와 속성들이 존재하기 때문에 더 다루기 어려웠다.

다행히 운영진분께서 찬찬히 잘 이끌어주시고 문서도 잘 되어 있어서 따라가기 많이 어렵지는 않았다. 오류 발생하는 건 어쩔 수 없는 문제... 구글링과 시간만이 답이다.

스터디가 이제 막 시작되었는데 다음 주에는 또 어떤 이론과 실습을 진행할 수 있을지 기대가 된다.

이력서에 관련해서 한 줄 더 적어갈 수 있도록  열심히 공부해 봐야겠다.

 

 

 

깃헙 레파지토리

GitHub - Yoonyesol/2024-04-cicd-week-1-template: CI/CD 스터디 1주차 레파지토리

 

 

---

참고자료

 

CI/CD