🍀 배포 Platform

Google Cloud Platform

💁 GCP 선택한 이유

• Fe와 Be 모두 Google Maps API를 사용하였습니다.
• Google Maps API를 활성화하면 40만원 상당의 크레딧이 제공되었습니다.
• SaaS 서비스도 많이 있지만, 직접 Deploy를 해보고, 웹서버를 운영해보고 싶었습니다.

Build

1. Multi Stage Build

저는 Build 단계를 두가지 Stage로 나누었습니다.

Stage 1: 빌드 및 정적 파일 추출

React 애플리케이션은 빌드 시 HTML, JavaScript, CSS 등 정적 파일을 생성합니다.

하지만, 일반적인 빌드 결과물에는 빌드 도구나 개발 의존성(예: node_modules, 소스 코드 전체)이 함께 포함될 수 있습니다.

Stage 1에서는 이러한 불필요한 잔여물들을 제거하고, 오직 정적 파일만을 포함하는 최종 산출물을 생성하는 과정입니다.

Stage 2: 배포를 위한 Image 생성

Stage 1에서 생성한 정적 파일만을 가져와서, 경량 이미지(5MB)인 alpine으로 복사하였습니다.

가벼운 Image로 이미지 크기를 줄이고, 정적 파일만을 가져와 서비스를 해주는 웹서버 image를 만들 수 있습니다.

2. Github Cache 활용

- name: Docker 이미지 빌드 및 푸시
        uses: docker/build-push-action@v3
        with:
          context: .
          file: uniro_frontend/Dockerfile
          push: true
          tags: gcr.io/${{ env.GCP_PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
          cache-from: type=gha
          cache-to: type=gha,mode=max