[Next.js + AWS] Load Balancer 의 Build Id에 따른 경로로 잘못된 트래픽 라우팅

첫번째 문제 발생

운영중인 메인 웹사이트에

아무런 설정 변경을 주지 않았는데 리프레쉬때 마다
대략 1/3의 확률로 페이지 내 몇몇 컨텐츠들이 갑자기 나타나지 않았다.

이 문제로 안좋은 앱 리뷰들이 달림 ..

문제 점검 순서

1. [개발자 도구 > 네트워크 탭] 확인 결과
   몇몇 파일은 200OK.
   _buildManifest.js 와 _ssgManifest.js 등 몇몇 js파일이 무작위로 404NotFound로 나타났다.

2. 그래서 파일 경로를 확인했다.
   
   에러 당시 스크린샷이 없어서 현재 스크린샷으로 설명 하겠음

위의 밑줄친 부분이 status가 200이 나오는 파일과 404가 나오는 파일의 텍스트가 달랐음

예

/_next/static/pjkasjdkasjk/_buildManifest.js -> 200OK
/_next/static/asgadgsjk/_ssgManifest.js -> 404NotFound

이처럼 다르게 나타났다.

이렇게 다르게 나타나는 해시값은 Build Id로, next.js앱을 빌드할때 랜덤 해시값을 생성하게 되고 모든 js번들의 경로로 사용이 된다.

3. 왜 경로가 나뉠까?

뭔가가 비정상적인 빌드가 일어난다고 생각을 했다.
그리고 AWS를 확인했는데 Instance가 3대였다.

1/3확률.. 그리고 Instance 3대

뭔가 이상했다.

인스턴스가 서로 다른 빌드ID를 갖고 해당 경로가 없는 인스턴스로 요청을 보낸 것 같았다.

문제 결론

오토 스케일되어 3가지 인스턴스가 생성되었고

각 인스턴스는 자체적인 빌드 실행 후 서로다른 빌드Id를 가졌다.

이때 로드밸런서가 각 트래픽을 잘못된 인스턴스로 라우트 시켜주어 404가 나오게 되었다.

해결 방안

재 배포시, 기존 인스턴스는 내려가고 새로운 인스턴스로 재생성 되기 때문에

빌드Id를 고정된 값으로 만들어주면 3개의 인스턴스가 모두 같은 빌드Id를 가질 것이기 때문에

//next.config.js

module.exports = () => {
  return {
    generateBuildId: async() => 'constant-build-id'
    ...
  }
}

빌드시 고정 값으로 생성되도록 코드를 넣어 주었다.
이땐 git commit hash값을 build id로 넣으려고 했는데 실패했다.

결론

/_next/static/constant-build-id/_buildManifest.js -> 200OK

인스턴스 3개 모두 'constant-build-id'라는 고정값을 갖게되어서 404에러가 나타나지 않았다.

느낀점

• session기반 인증방법에서 scale-out 될때 저장되지 않은 서버에 요청해서 인증을 실패한다는 상황이 생각났다
• 내가 사용하는 메인 프레임워크 문서는 버전별로 꼼꼼히 읽자

** 하지만 캐시로 인한 다른 문제가 생기게 되었고, 다음 포스팅에서 그 내용을 작성하겠다.