GitHub Actions 캐시 사용

[withSang]

Summary

캐시가 없어 매번 처음 실행할 때와 같은 시간이 소요되는 GitHub Action 워크플로에 캐시를 도입합니다.
cache Action을 사용하면 이전 run의 아티팩트를 저장해 다음 run에서 불러올 수 있어 테스트 및 빌드 시간이 크게 단축됩니다(https://github.com/sparcs-kaist/zabo-front-reactjs 기준 약 2배).
sparcs-kaist/taxi-back#414 를 따라 진행하려고 합니다.

또한 이미지를 multi-stage로 빌드합니다.
정적 파일을 빌드하는 이미지와 정적 파일을 서빙하는 이미지를 분리함으로써, 최종적으로 배포되는 이미지의 크기를 줄일 수 있습니다.

Tasks

• CI 단계에서 pnpm 패키지 캐시 추가 - https://pnpm.io/continuous-integration#github-actions
• Dockerfile 수정
  • pnpm install 대신 pnpm fetch를 사용하도록 수정 - https://pnpm.io/cli/fetch
  • multi-stage 빌드 도입 - (예시) https://github.com/shakyShane/cra-docker/blob/master/Dockerfile
• dev/prod Docker 이미지 빌드 단계에서 이미지 레이어 캐시 추가 - 카카오 엔터테인먼트 기술 블로그 참조 ( https://fe-developers.kakaoent.com/2022/220414-docker-cache/ )

[SnowSuno]

이런 이슈가 있었군요 #700 에서 pnpm fetch 관련 개선사항은 적용하였습니다