사건발생

• 서비스 운영중 사용자가 많아졌을 때 메모리가 오버되면서 503에러를 뿌리면서 죽는 문제가 발생
• 그외의 상용서비스 구간에서 지속적으로 메모리가 증가하다가 죽는경우가 발생함.

메모리 서버 지속적 증가

원인분석

원인은 여러가지로 의심됨.

Node자체 문제

• node, nuxt, package에 있는 모듈중 수누 발생 가능성.

SSR에서의 문제

한 사이트의 도움을 많이 받음.
https://ajh322.tistory.com/243

• 특정 화면의 SSR에서 최소 6개의 서버요청을 동기-직렬 로 배치하여 과도하게 로드가 걸림
• 동적 화면랜더링이 많은 화면의 문제
• 특정 화면에서 메모리를 반환시키지 못하게 하는 코드가 존재할수 있다.

원인

• 메모리를 과다하게 사용함.
  • 서버사이드에서 너무 많은 FOR문이나 동기-직렬 6개 조회가 존재함.
• 메모리를 사용후 반환하지 않음.
  • 메모리를 반환하지 않는 코드가 존재함.

// 특정 인터벌
sample() {
  this.interval = setInterval(() => {
   // codes...
  }, 1000);
}

// 이벤트 리스너 등록
this.$broadcast.$on(key, params);

해결

• 메모리를 과다하게 사용함.
  • 통으로 조회하는 API는 분리.
  • 꼭 필요한 화면 구성요소(ex. 메타정보)를 제외한 화면 구성요소는 Client-side로 위임하여 개발.
  • SSR에서 동기-직렬로 구성된 내용은 Promise.all문법을 적극 활요함.
  • SSR에서 동적 화면 랜더링하는 부분도 메모리를 많이 소비하니 필요 동적 랜더링을 제외하고 <client-only>로 작업함.
• 메모리를 사용후 반환하지 않음.
  • 메모리를 반환하지 않는 코드를 수정함.
  • 클라이언트에서만 실행해서 서버사이드에 메모리를 점유 하지 않도록함.

// 특정 인터벌
sample() {
  if (process.client) {
    this.interval = setInterval(() => {
     // codes...
    }, 1000);
  }
}

// 이벤트 리스너 등록
if (process.client) {
  this.$broadcast.$on(key, params);
}

메모리 로컬 반환

메모리 서버 반환

• 위의 이미지와 같이 사용 시간에 메모리를 사용했다가 정상적으로 반환함.

이후의 개발 방향

• 신규 개발되는 페이지의 경우 부하 테스트를 진행한다.
• 스타일 가이드를 재정의 하여 SSR에서 누수가 발생하지 않도록 한다.
• 모든 부분을 SSR에서 해결하려 하기보단 Client-side에서도 실행 하도록한다.