GAE - > GCR, CDN 마이그레이션 정리

GAE에서 GCR, CDN으로 이전해 비용 75% 절감 및 FE 생산성과 속도를 개선한 사례입니다.

마이그레이션

목표

  • Google AppEngine(이하 GAE) 사용으로 인해 한달에 구글 클라우드 비용을 줄이는 것
  • GAE의 제한적인 기능으로 인한 성능 및 생산성 저하를 탈피하는 것

마이그레이션하게 된 배경

기존에 사용하던 GAE는 구글에서 자동으로 컨트롤해주는 영역이 많아서 개발자가 커스터마이징을 못하는 구조였습니다. 파일 읽기 권한 조차 없어서 개발할 때, 캐시 기능을 사용할 수 없었습니다. 그리고 GAE는 서버를 사용하고 있으면 계속 비용이 발생하는 구조였고, 자동 컨트롤하는 것에 대한 비용이 비쌌습니다.

GCR (Google Cloud Run)

GCR은 GAE의 편리함을 개발자들에게 제공하면서 권한 설정을 할 수 있게 해주고, 트래픽이 발생할 때만 비용이 청구되는 서비스입니다. 기존 GAE에서 문제라고 생각된 것들을 보완할 수 있는 플랫폼이라서 이것으로 마이그레이션하기로 했습니다.

Goocle Cloud CDN

CDN은 컨텐츠를 미리 저장하고 있다가 서버에 요청이 왔을 때, 원본 서버에 요청을 보내지 않고, 캐시되어 있던 데이터를 전달하면서 사용자에게 빠르게 전달되게 하는 중간 서버입니다.

  • 도입하게 된 이유

    현재 FE에서 사용하고 있는 NextJS 프레임워크가 이미지를 요청받을 때마다 최적화합니다. 그래서 새로 생긴 GCR 인스턴스에서는 이미지가 만들어진 게 없어서 요청이 들어오면 다른 인스턴스에 만들었던 것도 최적화하게 됩니다. 이러면 인스턴스끼리 비효율적으로 중복으로 최적화하게 됩니다.

  • 캐시 적중률

    CDN에 들어온 요청 중에서 캐시로 응답한 확률

    9월 2일 ~ 9월 5일: 57%

  • 캐시 적용 정리

    • NextJS에서 빌드시에 파일 내용을 가지고 해시 이름을 정해줍니다. 그래서 파일 내용이 바뀌지 않으면 이전에 사용하던 데이터를 사용하고, 파일 내용이 바뀌면 바뀐 파일명으로 서버 요청을 보내기 때문에 캐시를 사용하지 않습니다.
    • 이미지와 JS, CSS 파일은 파일 내용이 바뀌지 않으면 1년 동안 사용자의 브라우저와 CDN에 캐시됩니다.
    • HTML 파일은 캐시되지 않는 설정으로 되어 있어서 요청마다 GCR에서 처리합니다. HTML 파일에 이미지 주소, JS, CSS 등등 에셋의 요청 주소가 있어서 바뀐 데이터가 있으면 바로 적용됩니다.

인프라 구조

  • 구조
    • Cloud Run: FE서버인 NextJS가 올라가 있습니다.
    • Cloud CDN: 요청이 들어온 것들 중에서 Cache-Control이 설정되어 있는 데이터들이 캐시됩니다.
    • 로드 밸런서: Google Cloud 서버의 입구 역할을 해줍니다.
  • 요청 과정
    • CDN에 데이터가 없을 때
      • 사용자가 서버에 요청을 보내면 DNS와 로드 밸런서를 지나게 됩니다.
      • 로드 밸런서에서 CDN으로 요청을 보내고, 값이 없으면 Cloud Run에서 값을 생성하고, CDN으로 보냅니다.
      • CDN에서 데이터를 캐시하고, 사용자에게 데이터를 전송합니다.
    • CDN에 데이터가 있을 때
      • 사용자가 서버에 요청을 보내면 DNS와 로드 밸런서를 지나게 됩니다.
      • 로드 밸런서에서 CDN으로 요청을 보내고, 값을 찾아서 사용자에게 데이터를 전송합니다.

이점

  • 가격
    • 75%의 비용 절감 효과를 얻을 수 있었습니다
  • FE 생산성 향상
    • 기존 방법: 디자인에 이미지가 있으면 Webp로 수동으로 변환하고, Google Cloud Storage에 따로 업로드하고, 이미지 주소를 코드로 작성하면서 이미지를 삽입했습니다.
    • 바뀐 방법: 디자인 이미지를 2배로 뽑아서 코드에 바로 삽입하고, NextJS에서 제공하는 이미지 최적화로 자동 Webp 변환을 사용합니다.
  • 데이터 패치 시간 단축으로 인한 사용자 경험 향상

    • GAE → GCR는 요청 지연시간 변화가 많이 차이가 안나고, GAE를 삭제하면서 데이터가 삭제됬습니다..

    • CDN 도입으로 인해서 요청 지연시간이 50% 이상 속도가 빨라졌습니다!

      | | P99 | p95 | p50 | | --- | --- | --- | --- | | CDN 도입 전 | 1295ms | 243ms | 19ms | | CDN 도입 후 | 423ms | 203ms | 9ms |