이번 Luna Code에서 진행한 학습으로는
- Next.js 프레임 워크를 사용해서 TurboPack을 적용한 프로젝트를 생성
- Dynamic Route를 사용하여 페이지 5개를 만든 후
- 도커 컨테이너화 진행 및 k8s 자동 배포 파이프라인 구축
위 3가지를 진행였다.
이 과정에서 3가지 에러를 직면했는데, 해결하기까지의 과정을 설명하겠다.
정적 Dynamic Route으로 인한 빌드 실패
Dynamic Route 설정 과정은 아래와 같다.
- 첫 Dynamic Route설정을 getStaticPath와 getStaticProps함수를 사용해서 페이지를 5개를 만들었다. 그 후 Nest.js 서버를 생성 후, 간단한 엔드 포인트를 작성하고 getStaticProps에 Get요청을 보냈다.
위 과정에서 로컬 환경에서 동작은 괜찮았으나, Docker 컨테이너화 후 자동 배포 파이프라인을 구축 시, Next.js서버 build과정에서 에러가 났는데, 그 이유로 나는 정적 Route설정(SSR 설정으로 이해하고 있다.)을 하였고, 정적 함수안에 Get 요청을 하여 build 시에 Nest.js서버가 실행되지 않으니 데이터가 넘어오지 않으니 에러가 발생한 것이다.
프로젝트 build시에 데이터가 만약 서버에서 관리되고 있다면, 데이터를 미리 받기 위해 서버에 데이터를 요청한다는 것을 고려하지 못해 발생한 문제로 현재는 실시간 데이터 요청으로 로직 수정 후 자동 배포를 진행하였다.
위 과정을 진행하며 React와 Next.js의 Route 설정이 다른 것을 배웠고, 개인적으로 디렉토리의 주소로 페이지 Route Path를 설정하는 방식이 좀 더 편한 것 같았다.
또한, 정적 페이지를 구성할 때, 웹 프로젝트 디렉토리에 있는 리소스들만 사용하는 페이지를 만들어야한다는 것을 깨달았는데, 과연 요즘에 정적 페이지들을 많이 쓸까하는 생각이 들었다. 메인 페이지로만 가도 서버에 요청하는 경우가 많으니...
docker-compose의 volume 설정으로 인한 최신 이미지 실행 불가
version: '3.8'
services:
nextjs:
image: nextjs-dev
volumes:
- ./web:/app
- /app/node_modules
ports:
- "3000:3000"
nestjs:
image: nestjs-dev
volumes:
- ./server:/app
- /app/node_modules
ports:
- "4000:4000"위 설정 파일은 클라우드 서버에서 사용하는 docker-compose.yaml파일인데, 도커 허브에 push된 이미지를 기준으로 docker-compose up을 하였으나, 클라우드 서버에 저장된 코드들이 실행되었다.
찾아보니 volume 설정때문이였는데, 내가 이해하기로는 volume 설정은 지정한 위치에 저장되어있는 프로젝트를 기준으로 실행시켜주는 설정이였다.
따라서 나는 도커 허브에 있는 프로젝트 이미지를 기준으로 실행한 것이 아니라,
클라우드 서버 내 도커 컨테이너 내부에 저장되어 있는 프로젝트 코드를 실행하여 이미지가 변화되더라도 적용이 되지 않고 실행된던 것이다.
Next.js 웹팩 실행과 TurboPack 실행과의 속도 차이 미비
해당 사항은 에러는 아니며, TurboPack사용 시, 웹팩보다 700배 이상의 속도 차이로 프로젝트가 실행된다고 했으나 미비하여 아직까지의 성능 개선을 못본 상황이다.
아마도 아무것도 없는 프로젝트이다 보니 각종 CSS, HTML, IMAGE 등등의 번들링할 파일이 없어 그런 것으로 생각된다.
이상으로 금주 Luna Code를 진행하며 겪었던 에러 및 해결 과정이였다.
