nextjs10 Nextjs 빌드 후 이미지 경로를 못 찾는 문제 해결 현재 Dockerfile을 통해서 nextjs를 standalone 설정으로 이미지를 가볍게 만들어놓은 상황입니다. 그런데 유일하게 이미지가 적용되어 있는 챗봇의 프로필의 경로를 못 잡고 있는 상황이었습니다. standalone 옵션을 주게 되면 public, static 폴더를 같이 빌드하지 않기 때문에 인위적으로 dockerfile에서 COPY 명령으로 붙여주다 보니 경로설정의 문제가 생겼습니다. 챗봇의 프로필 이미지가 보이지 않아서 왜 안되는지 원인을 찾아보기 시작했습니다. 일단 네트워크탭에서 보니 경로가 /_next/image로 되고, 그 뒤로 src에 설저해준 경로가 붙는 것을 보고 어떻게 하면 저 경로를 바꿔줄 수 있을지 고민했습니다. 원래의 설정은 이런식으로 했었습니다. 이 설정은 npm r.. 2023. 5. 16. 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을 빌드 시 제대로 받아오지 못하는 이슈 요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 hini7.tistory.com 위의 예시처럼 해결을 해볼까 했지만, 저에게는 맞지 않았습니다. 계속 build 과정에서 에러가 발생했고, 해당 font 파일들을 찾을 수 없다는 에러가 계속 반복되었습니다. docker-compose up으로 nextjs.. 2023. 5. 15. Nextjs, Fastapi의 Docker Image 최적화 진행하기 [ Nextjs 이미지 최적화 ] 변경한 부분 설명 multi stage를 활용하여, 불필요한 파일 제외 npm ci를 통해 설치 + package-lock을 통하여 설치되는 버전 고정 환경변수 WORK_DIR 설정으로 유지보수를 고려 보안을 고려해서, group과 user를 추가하여 COPY 명령 시 --chown 사용 next.config.js 파일에 output: "standalone" 설정 추가하여 최적화 standalone은 수동으로 static folder, public 디렉터리 복사 과정이 필요해서 COPY 추가 [ Fastapi 이미지 최적화 ] 당시 mecab이 속도면에서 이득이 있어서 따로 추가적으로 불필요하게 설치를 하면서, base image의 경우에 python:3.10을 그대로 .. 2023. 5. 15. Nextjs 폰트 최적화 시도하기 현재 무한스크롤을 보여주는 educations와 posts의 JS 파일이 용량이 큰 것으로 표시가 됩니다. 이를 해결하기 위해서 여러 가지 최적화를 알아보고 이 게시글에 정리합니다. Noto Sans Kr, Noto Serif KR 폰트 최적화 하기 빠른 3G로 설정하고 받아왔을 때 유일하게 폰트가 혼자서 22.22초가 걸리는 것을 보고 너무 심하다는 것을 느꼈습니다. 그래서 이를 해결하는 방법을 고민했습니다. (현재 파비콘은 아직 코드만 넣고, png 파일을 넣지 않았습니다.) 이 시점에서 font를 가져오는 방법은 public 폴더에 otf 파일을 직접 넣고, css 파일에 @font-face로 정의를 해뒀습니다. next/font 적용하기 올해 1월에 nextjs v13이 등장하고 @next/fon.. 2023. 5. 8. 이전 1 2 다음
