Turborepo로 만든 프로젝트 CI/CD를 구현해봤습니당
1. GitHub Pages
처음에는 깃헙 페이지로 구현했고, Next 앱은 정적 배포 하기 위해 output 설정을 추가해줬다.
하지만, Next 앱에서는 정적배포에 한계가 있어, Vercel로 전환하기로 했당
2. Vercel
1) GUI
처음에는 Vercel에서 GUI로 배포를 생성했지만,
GUI로 배포를 할 경우에는 메인 브랜치에 푸시해야만 변경된 버전으로 배포 확인이 가능하다는 단점이 있었다.
터미널에서 가능한 환경을 이용해야 했음!
그래서 Vercel CLI로 다시 ~!
2) CLI 🌟
Vercel CLI를 사용하여 터보레포 안의 프로젝트들을 연결하고, 배포를 진행했다.
정상 동작하는 것까지 확인 후에 `.github/workflow/.yml` 파일을 수정하여, 변경된 경로만 배포되도록 로직을 추가해줌
여기서 필요한 키들(버셀 토큰, 팀아이디, 프로젝트 아이디 등등)은 GitHub의 Secrets에 추가하는 거 잊지 말기~!
리액트 앱은 SPA니까 .vercel에 리다이렉트도 추가해줘야한당
넥스트 앱은 괜춘!
매 커밋마다 프리뷰 링크가 뜨게 always로 깃허브 액션에 해당 링크가 뜨게 추가해주었당
Vercel dashboard에 제대로 생성된 것도 확인 했고,
성공 시에는 정상 배포 되는 것도 확인 했고,
넥스트 파일만 변경하면, 넥스트만 배포되고 리액트는 이렇게 무시되는 것도 확인 완료 ㅎㅎ
원하는 기능이었던
1) 커밋 시, 이전 커밋과 비교해서 수정된 앱만 배포되게
2) 동적 배포 되게
3) 커밋마다 프리뷰 링크가 달리게
모두 성공!
CICD는 처음해보는데, 다음부터는 더 잘 할 수 있을지도 ...?
간단하게 올렸지만 에러 잡는데 하루 이상 걸렸다.......................ㅎㅎ.........
참고)
https://vercel.com/guides/how-can-i-use-github-actions-with-vercel
https://vercel.com/docs/monorepos#add-a-monorepo-through-vercel-cli
How to Use GitHub Actions to Deploy to Vercel
Learn how to use GitHub Actions as your CI/CD provider to deploy to Vercel, including support for GitHub Enterprise Server.
vercel.com
'개인공부 > 배포' 카테고리의 다른 글
| GitHub Actions에 Playwright 테스트 추가 및 자동화 설정 (0) | 2024.12.23 |
|---|---|
| netlify 사전 배포 오류, ESLint 경고 무시 설정 (0) | 2023.11.13 |
| React 프로젝트 배포 새로고침 404 오류 (firebase hosting, netlify 해결법) (0) | 2023.09.25 |
| firebase 버전 10 사용법, TSX hosting 오류 해결 (0) | 2023.09.23 |
| netlify를 이용한 배포 방법, 404 오류 해결 (0) | 2023.08.22 |