CI/CD

CI/CD는 Continuous Integration(지속적 통합) / Continuous Delivery(지속적 전달) 의 줄임말입니다 애플리케이션 개발단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법으로 실제 배포중인 서비스에 통합하기 위해서는 아래와같은 여러과정이 필요합니다.

• 코드 테스트
• 빌드
• 컨테이닝
• 저장소 전달
• 배포

이 모든 과정을 통상적으로 CI/CD라고 부릅니다.

더 자세히 💡
CI는 테스트, 빌드, Dockerizing, 저장소에 전달 까지 프로덕션 환경으로 서비스를 배포할 수 있도록 준비하는 프로세스를 말하며
CD는 저장소로 전달된 프로덕션 서비스를 실제 사용자들에게 배포하는 프로세스를 의미한다.

실행해보기

1. 먼저 firebase console(https://console.firebase.google.com/u/1/)로 들어가서 firebase 약관을 수락하고 firebase 프로젝트를 만듭니다

**P.S 반드시 프로젝트의 소유자여야 진행이가능합니다. 소유자이외의 편집자, 뷰어등 다른 포지션은 CI/CD설정을 허락하지않습니다.

2. terminal을 열고, firebase-tools를 글로벌하게 설치합니다
   npm i -g firebase tools

3. 이후 firebase login 을 입력한뒤 로그인을 위해서 사이트를 여는 동작을 허락해준후 로그인을 마칩니다
   (반드시 소유자 계정이어야 합니다)

4. mkdir your-folder-name 으로 파이어베이스 세팅을 할 폴더를 만들어주세요

5. Github 에서 Repository를 만들어줍니다.

6. 내가만든 폴더로 들어가서 내가만든 Repository와 연결을 해줍니다

git init
git commit -m "first commit"
git branch -M master
git remote add origin <your git repo>
git push -u origin master

7. gitHub으로 push가 끝났으면 firebase init 을 입력하고 hosting 을 선택해서 진행합니다.

8. Repository 를 어떤걸 사용할것인지 물어보는 부분이 나오게되는데 아까 저희는 git설정을 했기때문에 Enter를 눌러서 다음으로 진행해줍니다
   For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)

9. 그다음 나오는 부분을 진행해주세요

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? cd public/yourReactProject && npm i && npm build

✔ Created workflow file /your/project/root/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master

✔ Created workflow file /your/project/root/.github/workflows/firebase-hosting-merge.yml
i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/**********
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

10. https://github.com.settings/**부분을 복사해서 들어간다음 Firebase CLI 를 Revoke해주세요

11. 그런다음 firebase.json 으로 들어가서 리액트 프로젝트의 build 폴더를 보게 만들어줍니다.

저는 public/client 에 프로젝트를 만들었기때문에 저렇게 설정했고, build 폴더가 생길 경로를 입력해주시면됩니다.

12. 리액트 프로젝트를 모두 생성하셨다면 .github/workflows 에 들어가셔서

• firebase-hosting-pull-request.yml
• firebase-hosting-pull-merge.yml
  두 파일에서 steps 안에 - run을 본인의 React-Project에 맞게 설정해줍니다.

github에 올라갈때 node_modules와 build폴더는 올라가지 않으므로,
github에서 자동으로 npm i && npm run build를 수행하게 합니다

그런다음 현재 commit이 필요한 친구들을 모두 Push 해줍니다.

Push 하게되면 Actions에서 진행상황이 보이게됩니다! 그리고 자동으로 배포가 뙇! 💪

느낀점

가볍게 CI/CD를 경험해볼수있었고 굉장히 좋은것 같다는생각이 듭니다! 이번 일을 동기삼아서 DevOps쪽도 열심히 공부해보겠습니다 감사합니다 😎