CI/CD는 Continuous Integration(지속적 통합) / Continuous Delivery(지속적 전달) 의 줄임말입니다 애플리케이션 개발단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법으로 실제 배포중인 서비스에 통합하기 위해서는 아래와같은 여러과정이 필요합니다.
이 모든 과정을 통상적으로 CI/CD라고 부릅니다.
더 자세히 💡
CI는 테스트, 빌드, Dockerizing, 저장소에 전달 까지 프로덕션 환경으로 서비스를 배포할 수 있도록 준비하는 프로세스를 말하며
CD는 저장소로 전달된 프로덕션 서비스를 실제 사용자들에게 배포하는 프로세스를 의미한다.
**P.S 반드시 프로젝트의 소유자여야 진행이가능합니다. 소유자이외의 편집자, 뷰어등 다른 포지션은 CI/CD설정을 허락하지않습니다.
terminal을 열고, firebase-tools를 글로벌하게 설치합니다
npm i -g firebase tools
이후 firebase login
을 입력한뒤 로그인을 위해서 사이트를 여는 동작을 허락해준후 로그인을 마칩니다
(반드시 소유자 계정이어야 합니다)
mkdir your-folder-name
으로 파이어베이스 세팅을 할 폴더를 만들어주세요
Github 에서 Repository를 만들어줍니다.
내가만든 폴더로 들어가서 내가만든 Repository와 연결을 해줍니다
git init
git commit -m "first commit"
git branch -M master
git remote add origin <your git repo>
git push -u origin master
gitHub
으로 push
가 끝났으면 firebase init
을 입력하고 hosting
을 선택해서 진행합니다.Repository
를 어떤걸 사용할것인지 물어보는 부분이 나오게되는데 아까 저희는 git설정을 했기때문에 Enter를 눌러서 다음으로 진행해줍니다
For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
그다음 나오는 부분을 진행해주세요
? 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!
https://github.com.settings/**
부분을 복사해서 들어간다음 Firebase CLI 를 Revoke
해주세요
그런다음 firebase.json
으로 들어가서 리액트 프로젝트의 build
폴더를 보게 만들어줍니다.
저는 public/client
에 프로젝트를 만들었기때문에 저렇게 설정했고, build
폴더가 생길 경로를 입력해주시면됩니다.
.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쪽도 열심히 공부해보겠습니다 감사합니다 😎