# 영어학원 사이트 GKE로 나눠 배포하기

Card Tutorial Architect v3.0 · 10-card blueprint
출처: Google Codelabs https://github.com/googlecodelabs/monolith-to-microservices · 공개 monolith-to-microservices 챌린지 패턴(학습자 완료 노트 검증 2026-09-18)
규칙: 헤드라인 ≤12자, 서브 ≤24자, 불릿 ≤3개 ×20자. 랩에 없는 UI·메뉴 없음. 카드 숫자는 아라비아 숫자만.

## C1 hook
- 헤드라인 (10): 영어학원 GKE 배포
- 서브 (13): 아직 한 통으로 올립니다
- 배지: C1 · 훅
- 브릿지: 한 통을 셋으로 나눕니다
- 이미지: assets/c01.jpg → c01-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 한 상자와 세 상자가 나란히 있는 학원 사이트

## C2 myth
- 헤드라인 (8): 한 통이 편하죠?
- 서브 (14): 나눌수록 배포가 쉽습니다
- 키커: 02 · 통념
- 불릿:
  - (12) ❌ 홈·강의·신청 한 통
  - (14) ⭕ 각각 올리고 갈아끼움
- 브릿지: GKE가 그 상자입니다
- 이미지: assets/c02.jpg → c02-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 큰 상자 하나와 작은 상자 셋의 대조

## C3 promise
- 헤드라인 (11): GKE에 나눠 올립니다
- 서브 (16): 수강·강의·홈을 각각 배포
- 키커: 03 · 반전
- 불릿:
  - (11) 클러스터 노드 3개
  - (14) Cloud Build로 이미지
  - (12) LoadBalancer로 공개
- 브릿지: 준비물부터 봅시다
- 이미지: assets/c03.jpg → c03-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 세 서비스 상자가 GKE 위에 놓인 그림

## C4 prep
- 헤드라인 (11): Cloud Shell이면 됨
- 서브 (16): GCP 프로젝트 하나면 충분
- 키커: 04 · 준비물
- 체크:
  - (12) Google Cloud 계정
  - (14) 결제 가능 프로젝트
  - (15) ${GOOGLE_CLOUD_PROJECT}
- 브릿지: 준비됐으면 전체 그림부터
- 이미지: assets/c04.jpg → c04-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 브라우저 속 Cloud Shell 터미널

## C5 flow
- 헤드라인 (8): 7칸만 갑니다
- 서브 (16): 클론부터 프론트 분리까지
- 키커: 05 · 흐름
- 흐름: 1.클론 → 2.클러스터 → 3.통합 → 4.수강신청 → 5.강의목록 → 6.프론트 → 7.정리
- 브릿지: 먼저 저장소부터
- 이미지: assets/c05.jpg → c05-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 1부터 7까지 이어진 단계 칸

## C6 do1
- 헤드라인 (9): 클론과 클러스터
- 서브 (18): academy-prod를 만듭니다
- 키커: 06 · 실행1
- 불릿:
  - (14) setup.sh로 의존성 설치
  - (12) API container 사용
  - (16) 존 europe-west1-b · 노드 3
- 확인: gcloud compute instances list
- 브릿지: 다음은 통합 사이트
- 이미지: assets/c06.jpg → c06-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: git clone과 클러스터 생성 명령이 보이는 터미널

## C7 do2
- 헤드라인 (9): 통합 사이트 배포
- 서브 (18): academy-monolith:1.0.0
- 키커: 07 · 실행2
- 불릿:
  - (14) Cloud Build로 이미지
  - (12) deployment 만들고
  - (15) 포트 80→8080 노출
- 함정: EXTERNAL-IP가 pending이면 잠시 대기
- 브릿지: 이제 API를 뺍니다
- 이미지: assets/c07.jpg → c07-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: LoadBalancer EXTERNAL-IP가 채워진 kubectl 출력

## C8 do3
- 헤드라인 (10): 수강·강의·프론트
- 서브 (20): 8081·8082·8080을 80으로
- 키커: 08 · 실행3
- 불릿:
  - (16) enrollments → 수강신청 API
  - (14) courses → 강의목록 API
  - (15) .env에 REACT_APP_* URL
- 함정: IP 바꾼 뒤 모놀리스 이미지 재빌드
- 확인: kubectl get services
- 브릿지: 막히는 지점만 점검
- 이미지: assets/c08.jpg → c08-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 세 서비스 IP와 .env URL이 나란히

## C9 pitfalls
- 헤드라인 (8): 여기서 막힙니다
- 키커: 09 · 검수
- 함정표:
  - pending IP → 1~2분 후 재조회
  - 존 미설정 → compute/zone 지정
  - 옛 URL → .env 재빌드
- 브릿지: 다 됐으면 이 목록만
- 이미지: assets/c09.jpg → c09-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: pending·존·URL 세 줄 함정 표

## C10 cta
- 헤드라인 (10): 프론트 IP로 확인
- 서브 (14): 통합 배포는 지웁니다
- 키커: 10 · 행동
- 체크:
  - (14) frontend EXTERNAL-IP 접속
  - (12) 수강·강의 JSON 확인
  - (13) monolith deployment 삭제
- CTA: 따라하기 글 열기 → guide.html
- 이미지: assets/c10.jpg → c10-raw.png → 크림 플레이스홀더 (생성하지 않음)
- 알트: 학원 홈이 열린 브라우저와 삭제된 모놀리스

## 25초 보이스오버 (5줄)
1. 영어학원 사이트도 아직 한 통으로 올리는 경우가 많습니다.
2. Cloud Shell에서 저장소를 받고 academy-prod를 만듭니다.
3. 통합 사이트를 올린 뒤 수강신청과 강의목록 API를 뺍니다.
4. .env의 REACT_APP URL을 새 IP로 바꾸고 다시 빌드합니다.
5. 프론트를 분리한 뒤 통합 배포를 지우면 나눔이 끝입니다.

크레딧: Google Codelabs monolith-to-microservices · 공개 챌린지 패턴 검증 2026-09-18 · Card Tutorial Architect v3.0