[React] firebase + github action CI/CD 파이프라인 구축

새로운 프로젝트를 시작하면서 디자인 팀의 합류가 예상보다 늦어져, 체계적인 일정 관리가 필요하게 되었다.

 

이에 따라, 프론트엔드 개발의 진행 상황을 디자인 팀이 직관적으로 파악할 수 있도록 해야 했고, 이를 자동 배포 시스템을 활용해 해결하고자 했다.

 

또한, 3명으로 구성된 프론트엔드 팀이 보다 효율적으로 협업할 수 있도록, 코드 오류를 최소화하고 배포 과정을 간소화하기 위해 CI/CD 파이프라인을 구축하기로 결정했다.

내가 생각한 파이프라인 구상도는 다음과 같다.

PR -> GitHub Action -> 빌드 및 테스트 성공 -> firebase 배포

1. 파이어베이스 프로젝트 생성

 

가장 먼저, 가장 간단하다고 생각하는 배포 플랫폼인 구글 파이어베이스의 프로젝트를 하나 생성하였다.

우리의 목적은 배포이기 때문에, 배포를 지원하는 Hosting 설정을 클릭해주었다.

 

 

음 여기는 딱히 적을 말이 없다.

그냥 친절한 설명 그대로 진행해주면 된다.

내 기존 프로젝트에 파이어베이스와 깃허브를 연동하고, 빌드 파일 등 배포설정을 해주는 절차라고 생각하면 된다.

 

프로젝트 옵션을 설정할 때 헷갈리는 부분이 있거나 막히는 부분이 있으면 아래의 유튜브나 다른 블로그를 참고하면 좋을 것 같다.

https://www.youtube.com/watch?v=5XshM6yPV3g&t=189s&ab_channel=FullstackSimplified

 

놀랍게도 하라는 대로 입력하면 10분 안에 모든 프로세스를 완료할 수 있다.

 

 

테스트

배포설정을 완료하고 develop 브랜치에서 제대로 action이 작동하는지 테스트 해보았다.

 

아주 잘 작동한다.

 

새로운 브랜치에서 PR을 했을 때도 정상적으로 테스트가 실행된다.

 

음 굿

이건 파이어 베이스에서 제공해주는 임시 배포 페이지(PR 단계)인데, 코드 리뷰 단계에서 유용하게 쓸 수 있다.

음 역시 대기업 답게 배포하는 과정이 매우 간편하고 쉽다.

다음에는 브랜치 규칙 설정 및 프로젝트 초기세팅에 대해 공부할 예정이다.