[Devfest Songdo 2023] 4. GCP를 활용해 Next.js 인프라 구축하기

 

 

 

 

 

구글 클라우드 플랫폼 활용이 궁금해서 들어봤다.

 

 

 

 

 

샌프란시스코에서 오신 구글 개발자님

프론트엔드 개발자인데, 서버와 관련되어 고민이 많아짐

 

 

 

 

 

 

Next.js

• react 앱을 만드는 것에서 시작!
• 서버가 필요 없으니, 파일을 올리는 개념 (리액트 앱을 호스트하는 방식)
• 리액트 개발에 대한 공통적인 문제점
• 파일 시스템 자체가 라우터가 된다 NEXT
• Search engine 검색 결과에 노출되어야 하는데, 완벽하게 출력된 페이지를 유저에게 보여줘야 함
• 넥스트는 하나의 프레임워크로 만드는 메타 프레임워크, 리액트를 잘 사용하기 위한 프레임워크
• 웹개발 자체가 고도화됨, 여러 문제를 위한 테크닉이 개발됨 (서버 렌더링, 클라이언트 렌더링)

 

• 제대로 못만들면 로딩 스크린 많이 보임
  -> 서버 렌더링을 통해 해결 가능 (이부분은 서버에서, 저부분은 클라이언트에서 돌리고) 
• 모든 스펙트럼을 커버할 수 있는 next
• React 개발 시작 시 가장 권장하는것이 next.js

 

• Next로 만든 리액트 앱 / 서버 폴더가 있다
• 기본적으로 서버가 필요한 경우가 많다
• 더이상 기존의 파일 시스템이 아님, 결국은 서버가 필요
• 프론트엔드 개발자인데, 서버와 관련되어 고민이 많아짐
  서버 호스팅은 어디에서 region, cpu 메모리는? 서버를 몇 개를 둘까, scale up은 어떻게 해야할까?
• 서버가 생기면서 고정 비용이 들게 됨
• Next.js는 오픈소스이지만, 회사에서 만듦 Vercel
  굉장히 잘나가는 스타트업

 

 

 

 

 

 

 

 

 

 

 

구글 클라우드 플랫폼에서 next.js 서비스를 만드려면?

• Vercel 같은 인프라를 GCP에서 구축할 수 있을까?
• Cloud Run
  가장 좋아하는 서비스
• 서버리스 - 내가 고민하지 않아도 된다는 의미
• 자동으로 서버 늘리고, 트래픽 없으면 서버를 꺼줌 
• 나에게 도커 컨테이너를 줘 (배포 기술 중 하나)
• 내가 원하는 OS와 모듈과 등등 서버를 구동할 것이다
  간단한 도커 파일을 써서 올린다
• 내가 올리고 싶은 컨테이너를 올림
• URL을 하나 공짜로 줌 (run.app)

 

 

 

 

 

 

 

 

 

 

컴네에서 배웠던 CDN :)

 

 

 

 

 

Next.js 에서 캐싱을 활용하는 방법

• 내가 쓴 리액트 코드를 서버에서 구동하고,
  이로 만든 html 파일을 캐시에 저장한다
• 노출이 많이 되는 페이지 -> 10분에 한번 페이지를 새로 만들고 싶다
• 요청이 들어올 때 마다 만들고 싶진 않은데, 10분마다 만들고 싶어
  캐시에 저장해서 보여주는 Next.js의 기능
• 로컬 파일 시스템을 활용해서 구현함

 

• Cloud run에서는 캐싱이 잘 X
• 요청이 많이 들어오면 필요한 개수만큼 확장시킴
• 돌려주는 새로운 컨테이너들이 서로 파일시스템을 공유하지 않음
• 서로 통신이 없다보니, 캐싱에 저장하는 것이 무효
• 다른 컨테이너들이 접근할 수 없는 캐싱
• 이 부분 설명이 너어어무 인상깊었다  ! :) 
• 왜 다음 기술로 넘어가야 하는지, 논리적으로 필요성이 잘 와닿았다 🔥

 

• Firestore
  파일 시스템 하나를 여러 시스템이 공유할 수 있다
  하지만 돈을 많이 내야 한다.

 

• 이에 대한 대안이 firebase realtime database
• 그냥 던지면 알아서 한다 (but 논리적인 사고 어려움)
• 캐싱에는 굉장히 적합한 서비스

 

• CDN Contents delivery Network
• 한국 유저의 미국 서비스 (글로벌 서비스)
• 글로벌 유저에 대한 속도 저하 문제 
• 파일에 빠르게 접근할 수 있도록, 여러 나라에 서버를 둠
  CDN을 통해 카피를 두는 것

 

 

 

 

 

Next.js를 GCP 환경에서 해보고 싶다면, 구경해보기!

 

 

 

 

 

Firebase hosting 

• 유저가 오면 우선 파이어베이스 호스팅이 중간에 요청을 받음
•  url로 .web.app 을 기본적으로 준다.
• CDN을 쓰게 되면 캐쉬 컨트롤이라는 헤더를 써서, 추가적인 캐싱 가능
• 한 번 만들고 여러 유저가 봐도 되는 파일은
  Firebase host에서 요청을 다 처리하도록 할 수 있다
• 확장성도 퍼포먼스도 좋고, 가격은 더 저렴하다

 

 

 

 

 

백엔드 개발자

• 프론트엔드 프레임워크가 고도화 됨
• 백엔드와 프론트가 가까워져야 하는 필요성
• 대규모 서비스 같은 경우
  프론트엔드가 클라우드 인프라를 이해해야, 좋은 리액트 앱을 만들 수 있다
• 백엔드도 단순히 서버를 구동하는 개발자가 아니라,
  프론트가 요구하는 사항을 이해해야 한다
• 지난 학기에 들었던 풀스택 네트워킹 수업이 떠오르는 부분 , , , 

 

• 백과 프론트가 점점 가까워지고 있고, 공부할 게 훨씬 많아진 상황이다.
• 진짜 유저들이 얻어가는 가치를 다루는 것이 재미있었다. 
• 유저 관련 퍼포먼스 지표도 회사 입장에서 매우 중요하다. 
• 궁극의 유저 서비스를 위해 프론트 공부하자!