바야흐로 때는 11월 초중순...
velog 글을 훑어보다가 pokeAPI를 발견하여 포켓몬 도감을 만들어보고자 이래저래 만들었다.
처음에는 Github Pages로 배포했는데 Router가 잘 안된다.
무슨 말이냐면 서브 페이지를 주소로 입력해서 직접 접근하면 404가 떠버린다.
그래서 Firebase로 배포하기로 했다.
우선 결과물을 먼저 보자면 대강 이렇게 생겼다.
완성된 것은 아니지만 배포까지 이어진 과정을 나중에도 써먹기 위해 정리해둔다.
환경
- React
- Vite
- yarn
Vite를 쓴 이유는 CRA는 사장되어가고 있으며 빌드하는 시간을 단축시키기 위함이다.
Firebase로 배포하기
거두절미하고 firebase로 배포해보자.
firebase 프로젝트는 여기서 만들면 된다.
firebase login우선 firebase 로그인을 해주자.
firebase init hosting그리고 배포를 위한 설정을 해주자
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 프로젝트 이름
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
무지성으로 진행하다보니 이미지에는 public으로 나왔지만 빌드 디렉토리를 선택하는 것이므로 dist로 해주어야 한다.
물론 나중에 수정할 수 있으니 그냥 해도 된다.
마지막은 깃허브를 통해서 자동으로 배포할 것이냐고 묻는다. Yes 해주자.
? 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? yarn install && yarn build설정해주면 workflow를 만들어준다.
이번에도 동일한 이유로 이미지에서는 npm으로 나왔다.
npm쓰면 그냥 넘어가도 되지만 여기서는 yarn을 쓰기 때문에 바꿔준다.
? Set up automatic deployment to your site's live channel when a PR is merged? No
? What is the name of the GitHub branch associated with your site's live channel? mainPR에서 Merge 할 때마다 배포할 거냐고 묻는데 개인 프로젝트라면 없어도 되지 않나 싶다.
main에 있는 브랜치로 배포할 것이기 때문에 main으로 설정해주었다.
그러면 firebase.json과 .firebaserc이 만들어진다.
.firebaserc은 내버려두고 firebase.json을 보자.
잘 설정했다면 이렇게 되어있을 것이다.
그리고 .github/workflows/firebase-hosting-merge.yml을 보자
yarn이라서 Node 설정을 해줘야한다. 18.x 버전으로 해주자.
근데 보니까 FIREBASE_SERVICE_ACCOUNT__프로젝트명이 있는데 이건 뭘까.
레포지토리 설정을 보면 Github와 연동하면서 자동으로 설정해주고 갔으므로 신경쓰지 않아도 된다.
배포 확인
그러면 이제 main 브랜치에 push 할 때마다 자동으로 배포가 된다.
잘 되는 모습을 볼 수 있다.
