Firebase+Github Actions로 CI/CD구축하기 with React.js

Firebase+Github Actions로 CI/CD구축

리액트 프로젝트에 파이어베이스와 깃허브액션스를 이용하여 CI/CD 구축을 해보겠습니다.

 

설명하기 앞서..

저는 Vite를 이용하여 React.js+TypeScript 조합으로 사용중이며 프로젝트를 이미 만든 상태에서 시작합니다.

 

CI/CD가 뭘까?

 

CI/CD에서

CI는 지속적 통합(Continuous Integration)

CD는 지속적 제공/배포(Continuous Delivery/Deployment)를 의미합니다.

소프트웨어 개발 라이프사이클을 간소화하고 가속화하는 것을 목표로 합니다.

이렇게 연결된 두 사례를 일반적으로 "CI/CD 파이프라인"이라고 부릅니다.

 

CI는 애플리케이션의 버그 수정 혹은 새로운 코드 변경이 주기적으로 빌드 및 테스트되면서 공유되는 레포지토리에 통합(Merge)되는 것을 의미합니다.

따라서 여러명의 개발자가 동시에 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다.

 

CD는 지속적인 서비스제공 및 지속적인 배포를 의미합니다.

CI에서 빌드되고 테스트된 후에, 배포단계에서 release 할 준비 단계를 거치고 문제가 없는지 수정할만한 것들이 없는지 개발자가 검증하는 팀이 검증을 합니다.

그 이후에 사용자들에게 서비스를 제공해도 되겠다고 판단되었을때 배포를 수동적으로 진행하는것이 지속적인 제공입니다.

또, 배포할 준비가 되자마자 자동화를 통하여 배포를 진행하는 것이 지속적인 배포입니다.

 

1.  프로젝트 세팅하기

자신이 선호하는 방법으로 리액트프로젝트를 만들면 되겠습니다.

저는 Vite를 이용하여 React.js+TypeScript프로젝트를 만들어 보았습니다.

 

2. 깃허브에 연결해주기

git init
git add .
git commit -m "Feat: 프로젝트 생성"
git remote add origin {깃허브주소}.git
git branch -M main
git push -u origin main

저는 다음과 같이 진행하였습니다. 

명령어 입력 후에 깃허브에 들어가서 레포지토리가 잘 생성되었는지 확인합니다.

 

3. 파이어베이스 프로젝트 추가

프로젝트 추가 버튼을 눌러 프로젝트를 만들어 줍니다.

이후에 프로젝트 이름을 지정하고 계속을 클릭합니다.

 

애널리틱스 설정을 해줍니다.

대충 설명을 드리자면 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 서비스입니다.

필수가 아닌 권장이므로 편하신대로 설정해주시면 되겠습니다.

저는 나중에 테스팅과 트래픽 추적을 해보고싶어서 설정하였습니다.

 

애널리틱스 구성에서 계정은 다음과 같이 설정하였습니다.

설정을 다하셨으면 프로젝트 만들기를 클릭합니다.

 

완료가 되었다면 계속을 눌러줍니다.

 

4. 앱에 Firebase를 추가하여 시작하기

다음 화면에서 웹을 클릭합니다.

 

닉네임을 등록해주고 앱등록 버튼을 선택합니다.

이후에 Firebase SDK 추가가 보입니다.

 

npm install firebase

 

다음 명령어를 만들고 있는 프로젝트 터미널에 입력해줍니다.

하단에 제품 SDK는 지금은 설정하지 않겠습니다. (나중에 꼭해주세요)

 

콘솔로 이동버튼을 누르고 빠져나옵니다.

 

5. 원하는 기능 가져와서 세팅하기

빠르게 파이어베이스에서 사용할것들을 세팅해주었습니다.

마지막으로 호스팅만 같이 해보겠습니다.

(여러분들이 사용할 부분만 가져와서 세팅해보시는 것을 추천드립니다)

 

다시 진행하고있던 프로젝트를 열어 다음 명령어를 입력해줍니다.

 

npm install -g firebase-tools

 

입력하셨으면 다음을 클릭합니다.

 

먼저 프로젝트 터미널에서 다음 명령어를 입력해서 진행해보겠습니다.

 

firebase login

 

이 명령어로 로그인을 해주신 후에

 

firebase init

 

이 명령어로 옵션을 세팅을 할겁니다.

 

6. 핵심 세팅

$firebase init을 하시면 다음과 같은 화면이 보일겁니다.

저는 아까 설정해 두었던 옵션들을 사용하려고 선택을 해주었습니다.

(호스팅만 하시는 경우 파란색줄로 되어있는 옵션을 선택해주시면 됩니다)

 

프로젝트 세팅입니다.

기존의 프로젝트를 사용할것인지 혹은 새로운 파이어베이스 프로젝트를 만들 것인지 선택하는 부분입니다.

저희는 기존의 프로젝트가 있으므로 사진과 같이 선택해줍니다.

 

아까 만들어두었던 프로젝트를 선택해줍니다.

 

Firestore Setup, Storage Setup은 생략하겠습니다.

 

호스팅 설정입니다. 이부분이 가장 중요합니다.

---

What do you want to use as your public directory? 공용 디렉토리로 무엇을 사용하시겠습니까?

public 디렉토리 명을 build로 바꿔줍니다. (npm run build를 실행시킨 후 build/index.html을 바라보게 하기 위해서 입니다.)

 

Configure as a single-page-app? 단일 페이지 앱으로 구성하시겠습니까?

SPA로 개발할거기 때문에 yes를 선택합니다.

 

Set up automatic builds and deploys with Github? Github을 사용하여 자동 빌드 및 배포를 설정합니까?

당연히 yes를 선택합니다.

 

 For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)

GitHub 워크플로우를 설정하고자 하는 GitHub 저장소는 무엇입니까? (형식: user/repository)

제 이름과 레포지토리명을 입력해줍니다. KittelLee/DongNol

 

Set up the workflow to run a build script before every deploy?

배포하기 전에 빌드 스크립트를 실행하도록 워크플로우를 설정하시겠습니까?

당연히 yes를 선택합니다.

 

What script should be run before every deploy?

모든 배포 전에 실행해야 하는 스크립트는 무엇입니까?

저는 npm을 사용하기 때문에 (npm ci && npm run build)를 입력해 주었습니다.

yarn을 쓰신다면 (yarn && yarn build)를 입력해주시면 됩니다.

 

Set up automatic deployment to your site's live channel when a PR is merged?

PR이 병합될 때 사이트의 라이브 채널에 자동 배포를 설정하시겠습니까?

yes를 선택합니다.

 

What is the name of the GitHub branch associated with your site's live channel?

라이브 채널과 연결된 GitHub Branch의 이름은 무엇입니까?

저는 main으로 설정했습니다. (develop으로 하시는분들도 많이보입니다)

---

 

다시 파이어베이스 호스팅설정으로 돌아갑니다.

닉네임을 입력해주시고 

firebase deploy

 

위 명령어를 실행합니다.

배포가 완료 되었습니다.

프로젝트 터미널에서 다음과 같은 명령어를 입력해줍니다.

git add .
git commit -m "Feat: Firebase Setting"
git push origin main

 

7. 잘 되는지 확인하기

파이어베이스에서 호스팅에 들어간다음 배포가 잘되어있는지 확인합니다.

깃허브에 접속해서 CI/CD가 잘작동하는지 확인합니다.

 

깃허브에 해당 레포지토리에 접속한다음 Actions를 누르면 확인하실 수 있습니다.