단순한 새로고침이 우리 앱을 망가뜨렸을 때
버그를 발견했습니다. 상위 경로(Top routes)는 잘 작동했습니다. 하위 경로(Deep routes)에서는 전체 페이지가 다시 로드되었습니다. 사이드바가 매번 초기화되었습니다. 앱이 불안정하게 느껴졌습니다.
로컬에서는 잘 작동했습니다. 프로덕션 환경에서는 실패했습니다.
Azure Static Web Apps에서 Next.js static export를 사용했습니다. 이 설정에는 서버 런타임이 없습니다. 정적 파일을 제공할 뿐입니다.
문제는 소프트 네비게이션(soft navigation)이었습니다. Next.js는 부드러운 전환을 위해 경로 페이로드 데이터(route payload data)가 필요합니다. 첫 로드 시에는 HTML이 필요합니다.
우리의 Azure rewrite 규칙이 너무 광범위했습니다. Next.js가 페이로드 데이터를 요청했을 때 Azure가 HTML을 보냈습니다. 라우터가 실패했습니다. 앱이 다시 로드되었습니다.
우리는 자동화를 통해 이를 해결했습니다. 빌드 결과물로부터 rewrite 규칙을 생성하는 도구를 만들었습니다. 이제 이 도구는 다음과 같은 작업을 수행합니다:
- 동적 경로 파일을 스캔합니다.
- HTML과 페이로드를 위한 특정 규칙을 생성합니다.
- 우선순위에 따라 규칙을 정렬합니다.
- 최종 설정 파일을 작성합니다.
이를 통해 수동 작업으로 인한 오류를 제거했습니다.
Azure에서 static export를 사용한다면:
- 설정 파일을 자동화하세요.
- 소프트 네비게이션을 테스트하세요.
- 페이로드 요청이 HTML을 반환하는지 확인하세요.
- rewrite 규칙을 핵심 인프라로 취급하세요.
까다로운 프론트엔드 버그는 종종 빌드 결과물과 호스팅 규칙 사이에서 발생합니다.