- Cloud Run 을 활용하여 Static File 서빙하기 - 1
- 구글 클라우드 런을 사용하여 정적 파일을 제공하는 방법에 대한 블로그 게시글입니다. 리다이렉트 및 퍼포먼스 개선에 중점을 두고 있습니다.
AI가 번역한 다른 언어 보기
durumis AI가 요약한 글
- Google Cloud Storage(GCS)와 Cloud Run을 연동하여 이미지 및 웹 리소스를 효율적으로 관리하고, 웹 브라우저 환경에 맞춰 최적화된 파일을 제공하는 CDN 시스템을 구축했습니다.
- 업로드된 이미지는 webp, avif 등 다양한 형식으로 변환 및 저장하고, 텍스트 파일은 gzip, br 등으로 압축하여 사용자에게 최적화된 콘텐츠를 제공합니다.
- 전 세계 8개 리전에 Cloud Storage와 Cloud Run을 배치하여 사용자 위치에 따라 가장 가까운 리전에서 리소스를 전달하여 레이턴시를 최소화하고, 사용자 경험을 향상시켰습니다
이전글에서 두루미스가 활용하고 있는 Cloud Run 을 이용한 정적 파일 서빙에 관한 부분을 설명했습니다.
그런데, robots.txt 나 favicon.ico 와 같은 파일들과 다르게 블로그에 올라오는 이미지 파일혹은 웹페이지 자체의 리소스들은 단순히 정적 파일로 처리할 수가 없습니다.
따라서, 이러한 파일들은 Google Cloud Storage ( 이하 GCS )와 연동되는 Cloud Run 을 활용해야 합니다.
기본적인 개념은 간단합니다. 실시간으로 올라오는 이미지파일이나 사이트가 업데이트 될때 새로 올라오는 리소스들은 GCS에 업로드를 하고, 외부에서 요청이 들어오면 Cloud Run 은 GCS에 파일이 있는가 확인한뒤 있을 경우 파일을 전송해주는 개념입니다.
다만, 실제로 동작하는 방식은 이보다는 훨씬 복잡합니다.
이미지를 GCS에 업로드 할때 기본적으로 두루미스에서는 3가지 형태로 이미지파일을 변환합니다.
업로드시 jpeg 혹은 png 일 경우 해당 이미지파일은 기본적으로 webp 와 avif 로 변환하여 동시에 저장을 합니다.
모든 이미지 파일은 확장자가 없는 형태로 URL로 요청하게 되며, 요청을 하게 되면 Cloud Run 은 요청하는 웹브라우저의 헤더를 확인해서 avif , webp 의 순서로 웹브라우저가 받을 수 있는 이미지 파일을 확인한뒤, 두가지 파일을 받을 수 없을 경우 jpeg 혹은 png 로 전달하게 됩니다. 또한, 단순하게 포맷변경뿐 아니라, 웹페이지에서 필요로 하는 사이즈에 맞춰 리사이징도 미리 해서 보관/전달하게 됩니다.
다이어그램
텍스트 파일의 경우에도 마찬가지입니다.
웹사이트에서 필요로 하는 많은 리소스는 이미지들도 있지만, js 와 css 같은 텍스트 파일입니다.
js 와 css 파일도 이미지와 비슷하게 업로드시 gzip 과 br 로 압축하여 보관한뒤 요청시 웹브라우저가 지원하는 파일을 그대로 전송하게 됩니다.
CDN의 역할은 단순히 콘텐츠를 캐싱하는 것에 그치지 않습니다. Google Cloud Platform(GCP)의 경우, Google Cloud Load Balancer(GCLB)에 Cloud CDN 기능을 직접 연결할 수 있어 더욱 강력한 기능을 제공합니다.
Cloud CDN은 Backend Service로부터 데이터를 받아 저장한 후, 클라이언트에게 전달합니다. 이 과정에서 Cloud CDN은 클라이언트의 요청 헤더에 따라 최적화된 파일을 전송할 수 있습니다. 이를 통해 같은 URL에 대해서도 다양한 형식의 콘텐츠를 제공할 수 있습니다.
예를 들어, '/image/tempImage'라는 동일한 URL에 대해서도
- 이미지 파일의 경우
- 브라우저의 'Accept' 헤더에 따라 다른 형식의 이미지를 전송합니다.
- 크롬 브라우저는 일반적으로 'image/avif,image/webp,image/apng' 순으로 선호도를 표시합니다.
- CDN은 이 순서에 따라 가능한 형식의 이미지를 제공하며, 지원되지 않는 경우 jpeg나 png 형식으로 대체합니다.
- 비슷하게 텍스트 파일의 경우에도
- 압축 방식에 대한 선호도도 고려됩니다.
- 크롬 브라우저는 'gzip, deflate, br, zstd' 등의 압축 방식을 지원합니다.
- 예를 들어, 두루미스 서비스의 경우 현재 gzip과 br을 지원하고 있어, br 압축 파일을 우선적으로 전송하게 됩니다.
이러한 CDN의 고급 기능을 통해 사용자의 환경에 최적화된 콘텐츠를 제공할 수 있으며, 이는 웹사이트의 성능과 사용자 경험을 크게 향상시킬 수 있습니다.
Cloud CDN이라 하더라도 기본적으로는 CDN 에서도 Cloud Run 으로 파일 요청이 필요하기 때문에 두루미스의 경우 전세계 8개 리전에 미리 Cloud Storage 와 Cloud Run 을 배치하여 미리 리소스를 배치해두고 해당 리소스를 전송하는 방식을 사용하고 있습니다. 따라서, 약간의 비용증가와 작업량은 있지만, 사용자 입장에서는 훨씬 향상된 레이턴시를 경험할 수 있습니다.
Cloud CDN을 사용하더라도 기본적으로는 원본 서버(이 경우 Cloud Run)에서 파일을 가져와야 합니다. 두루미스는 이러한 구조를 최적화하여 글로벌 사용자에게 더 나은 서비스를 제공하고 있습니다.
두루미스의 글로벌 최적화 전략:
- 전 세계 8개 리전에 Cloud Storage와 Cloud Run을 미리 배치
- 각 리전에 필요한 리소스를 사전에 배포
- 사용자 요청 시 가장 가까운 리전에서 리소스 전송
이 방식은 약간의 비용 증가와 추가 작업이 필요하지만, 사용자에게 다음과 같은 이점을 제공합니다:
- 크게 향상된 레이턴시
- 더 빠른 콘텐츠 로딩 시간
- 전반적인 사용자 경험 개선
이 구조를 시각화하면 다음과 같습니다:
이 구조를 통해 두루미스는 글로벌 사용자에게 일관되게 빠른 서비스를 제공할 수 있습니다. 사용자의 위치에 관계없이 가장 가까운 리전에서 콘텐츠를 제공받기 때문에, 전 세계 어디서나 낮은 레이턴시로 서비스를 이용할 수 있습니다.
이러한 접근 방식은 초기 설정과 유지 관리에 더 많은 노력이 필요하지만, 최종 사용자 경험을 크게 향상시키는 장점이 있습니다. 특히 글로벌 서비스를 제공하는 기업에게는 이러한 구조가 경쟁력 있는 서비스를 제공하는 데 큰 도움이 될 수 있습니다.
오늘 CDN 이야기에서는 기본적인 개념들만 살펴 보았습니다.
사실, 세부적으로 설정하는 부분을 다룰수도 있었으나, 클라우드 벤더 ( GCP , Azure , AWS ) 마다 다르기도 하고, 좀 더.. 재미가 없기에 개념 설명을 이야기 했습니다.
다음에 기회가 된다면 좀 더 세부적인 부분들도 다뤄보도록 하겠습니다.
다음번 이야기는 그렇다면 여러개( 저희는 무려 8개! ) 리전의 Cloud Storage 는 어떻게 동기화를 할까.. 에 대해서 다뤄보도록 하겠습니다.
감사합니다.