전체 글

1. Node.js 버전 관련 문제 발생이전 글에서 NCP 서버에 Next.js를 배포할 때 apt로 Node.js를 설치했다고 했는데, 여기에서 언급했던 이슈에 대해 작성해보려고 한다.배포 사이트에 접속했더니 502 Bad Gateway가 뜨는 문제가 생겼다.처음에는 Nginx 문제인 줄 알았는데 SSH 접속 후 pm2 list로 확인해보니 prod 프로세스의 status가 errored였다.pm2 logs로 최근 로그 확인 후 원인을 알 수 있었다.You are using Node.js 18.19.1. For Next.js, Node.js version ">=20.9.0" is required.React 보안 이슈로 Next.js 버전을 올리면서 요구하는 Node.js 최소 버전도 올라간 것 같았다...

1. LCP 요소 파악하기Lighthouse로 성능을 측정했더니 LCP(Largest Contentful Paint)가 2.9s ~ 3.1s로 높게 나왔다. LCP 기준이 2.5s 이하인데 훨씬 넘기고 있었다.Lighthouse의 INSIGHTS 부분에서 LCP Breakdown을 눌러보면 현재 LCP를 차지하는 요소가 무엇인지 확인할 수 있다. 확인해보니 배너 이미지가 LCP 요소로 잡혀 있었다. 2. 원인 찾기배너 이미지가 원래 CSS background-image로 처리되어 있었는데, Next.js의 태그로 변경하고 아래 설정을 추가했다.LCP request discovery의 경고는 사라졌지만 LCP는 그대로였다. 아무리 이미지 설정을 바꿔도 개선되지 않아서 배너를 아예 제거해봤는데, 그래도 L..

1. 들어가며1편에서는 NCP 서버를 생성하고 Next.js 프로젝트를 배포하는 기본적인 과정에 대해 썼다. NCP 서버에 Next.js 배포하기 (1) - 서버 생성 및 실행1. 들어가며Vercel 같은 플랫폼이 아닌 일반 서버에 Next.js를 배포하는 것은 처음이라 공식 문서와 AI의 도움을 많이 받았다. 배포하면서 내가 네트워크에 대한 지식이 많이 부족하다는 것을 새삼sohxxny.tistory.com이제 배포는 되었다고 할 수 있지만 아직 다음과 같은 문제가 있다. 🧐IP 주소와 포트 번호로만 접속할 수 있다. (http://서버IP:3000)dev 환경에 누구나 접속할 수 있다.코드를 수정할 때마다 SSH로 접속해서 수동으로 빌드 후 배포해야 한다.HTTP만 지원하고 HTTPS가 없다.이번 ..

1. 들어가며Vercel 같은 플랫폼이 아닌 일반 서버에 Next.js를 배포하는 것은 처음이라 공식 문서와 AI의 도움을 많이 받았다. 배포하면서 내가 네트워크에 대한 지식이 많이 부족하다는 것을 새삼 깨달았다… 시행착오를 겪으며 배운 내용들을 기록 차원에서 정리해보려 한다! 1.1 NCP를 선택한 이유프로젝트를 진행하면서 네이버 클라우드 플랫폼(NCP)의 무료 크레딧을 받게 되었다.사실 Next.js 배포라면 Vercel이 가장 간편한 선택지다. 하지만 우리 프로젝트는 GitHub Organization 레포지토리를 사용하고 있었고, Vercel에서 Organization 레포를 무료로 배포하려면 개인 계정으로 fork해야 하는 번거로움이 있었다.마침 받은 무료 크레딧도 있고, 실제 서버에 직접 배포..