Nextjs standalone 빌드 와 nginx 연결 후 font 파일을 찾지 못하는 현상 기록

https://hini7.tistory.com/243#toc-%EB%AC%B8%EC%A0%9C%20%EB%B6%84%EC%84%9D

Next의 css에서 쓴 font asset을 빌드 시 제대로 받아오지 못하는 이슈

 

 

위의 예시처럼 해결을 해볼까 했지만, 저에게는 맞지 않았습니다. 계속 build 과정에서 에러가 발생했고, 해당 font 파일들을 찾을 수 없다는 에러가 계속 반복되었습니다.

---

docker-compose up으로 nextjs를 build 한 이후에 폰트 파일들의 경로를 찾지 못하는 현상 발생했습니다.

그래서 먼저 직접 npm run build를 통해서 .next 디렉토리에 어떻게 파일구조가 만들어지는지 확인해 봤습니다.

---

확인을 해보니 static 폴더에 css파일이 생기며, 절대경로가 그대로 담긴 것을 볼 수 있습니다. 그렇다고 상대경로를 사용하면 npm run dev에서는 제대로 작동하지만, standalone 옵션을 true로 했기에 에러가 계속 발생하는 것을 볼 수 있었습니다. 

 

따라서, Dockerfile에서 font 파일들을 경로에 맞게 넣어주어야 하나?라는 생각이 들었습니다. 

---

회피하는 방식으로 해결

이 문제를 해결한다고 해서 좋은 방식이 아니라는 느낌을 받았습니다. vercel에서 standalone 기능을 12 버전에서 실험 기능을 넣었던 것이라서 안정화가 됐다고 하더라도 아직은 자료도 적고, 수정되는 부분들이 생길 것 같아서 구글 폰트를 link 태그로 가져오는 방법을 택했습니다. 

 

해보니까 아주 편리하면서, 폰트 다운로드 속도도 제가 설정한 폰트와 큰 차이가 없어서 과감히 폰트파일을 제거했습니다!

폰트 용량 줄인다고 삽질했던 경험이 아쉬웠지만! 나중에 특별한 폰트들을 사용한다면 필요할 것이라 위안이 되었습니다.