현재 Dockerfile을 통해서 nextjs를 standalone 설정으로 이미지를 가볍게 만들어놓은 상황입니다. 그런데 유일하게 이미지가 적용되어 있는 챗봇의 프로필의 경로를 못 잡고 있는 상황이었습니다. standalone 옵션을 주게 되면 public, static 폴더를 같이 빌드하지 않기 때문에 인위적으로 dockerfile에서 COPY 명령으로 붙여주다 보니 경로설정의 문제가 생겼습니다.
챗봇의 프로필 이미지가 보이지 않아서 왜 안되는지 원인을 찾아보기 시작했습니다. 일단 네트워크탭에서 보니 경로가 /_next/image로 되고, 그 뒤로 src에 설저해준 경로가 붙는 것을 보고 어떻게 하면 저 경로를 바꿔줄 수 있을지 고민했습니다.
원래의 설정은 이런식으로 했었습니다.
이 설정은 npm run dev를 했을 때만 작동했습니다!
이런 식으로 따로 loader를 설정해 주는 방법에 대해서 알게 되었습니다. 이 방법을 통해서 next build 과정에 url이 마음대로 바뀌는 현상을 바꿀 수 있습니다. 그래서 아래와 같이 성공을 했습니다!
하지만 매번 loader를 설정해주는 것은 올바르지 않습니다. 공식문서를 참고해 보니 next.config.js에 images의 loader 설정을 할 수 있었습니다. 저의 경우에는 nginx와 next의 standalone 설정으로 경로가 바뀌는 것이기 때문에 custom loader를 설정해 주어서 Image 컴포넌트에서는 Loader를 설정 안 해줘도 이미지가 불러와지도록 했습니다. 여기서 유의해야 할 점은 상대경로로 설정을 해주어야만 빌드 이후에도 인식을 한다는 점입니다!
custom 설정과 별개로 다른 추가 loader 가 기본적으로 제공되는 것들이 있었지만 아래 공식문서에서 보시면 됩니다! 혹은 아주 일부만 다른 loader가 필요하다면 따로 loader prop을 주면 되는 것으로 이해를 했습니다!
참고
https://nextjs.org/docs/pages/api-reference/components/image#optional-props
Components: <Image> | Next.js
Note: If you are using a version of Next.js prior to 13, you'll want to use the next/legacy/image documentation since the component was renamed. This API reference will help you understand how to use props and configuration options available for the Image
nextjs.org
https://nextjs.org/docs/app/api-reference/next-config-js/images#example-loader-configuration
next.config.js Options: images | Next.js
Using App Router Features available in /app
nextjs.org
'Project History > - Seoul Dev Competition' 카테고리의 다른 글
| Nextjs에서 React-Query를 사용한 무한 스크롤 구현 경험 정리 (0) | 2023.05.27 |
|---|---|
| cypress 사용 경험 및 정리 (0) | 2023.05.18 |
| 서울 열린데이터광장 공공데이터 활용 웹 개발 - 6주차 정리 (0) | 2023.05.15 |
| 서울 열린데이터광장 공공데이터 활용 웹 개발 - 5주차 정리 (0) | 2023.05.15 |
| Nextjs, Fastapi의 Docker Image 최적화 진행하기 (0) | 2023.05.15 |
| 서울 열린데이터광장 공공데이터 활용 웹 개발 - 4주차 정리 (0) | 2023.05.14 |
댓글