Next.js는 SPA 방식으로 배포하면 안된다?

• SSR을 지원하는 부분이 있어서 nginX root를 잡는게 안된다.

React 방식의 배포

• nginX의 root 경로에 React의 index.html을 바라보게 설정
• 정적 페이지의 경로를 바라보게만 함으로써 모든 과정이 끝난다.

Next.js 방식에서의 배포

• SPA 방식으로 배포 시도 → 실패.

  • Next.js의 경우, Server Side Rendering을 지원하는 부분이 있기 때문에, 배포 시 동작이 되는 것은 실상 Node.js로 구현된 Server이다.

  <aside> 💡 결론적으로 node Server에서 작동하도록 해야한다.

  </aside>

  • 기존 React와의 차이점을 통해 위의 Node.js 서버 구동의 추측을 얻은 글을 아래에 링크를 적어두었다.

  React 서버사이드 렌더링 가이드 (번역)

• 프로젝트에서 사용하는 툴

  • node.js 18.17.1
  • pnpm 8.7.1

• 이를 배포하기 위해서 front 단에서 build하고 나면 standalone 폴더를 EC2에 같이 준다.

  • standalone의 경우Output Option 설정을 통해 나오는 Build 파일 중 하나이다. 일반 배포파일과 달리 단일로써 동작이 가능한 Node.js 서버라고 볼 수 있다.
    • Output Option의 설정과 정보에 대해 아래의 링크 참조가 가능하다.

  next.config.js Options: output

• standalone 위치에서 pnpm install 을 통해 의존성 패키지 설치를 진행하며, 이후 server.js를 node.js로 실행하게 한다.

처리 방식 (틀린 방식임. 2023.09.21 기준 수정한 내용은 아래에 두겠음

• Jenkins에서 성공적으로 빌드한 파일에 standalone 폴더가 포함된 채 온다.

• standalone 위치에 Dockerfile을 복사, 아래에 있는 파일을 Dockerfile에서 모두 COPY하도록 한다

• Dockerfile의 모습

  

  • alpine은 가벼운 이미지로 빌드할 수 있도록 도와준다.

• 빌드한 이미지를 3000포트로 포워딩 하는 도커 컨테이너를 실행하게 해서 바라보게 하면 끝.

  • Jenkins에서 빌드 후 조치에 설정하여 Front 배포 자동화 끝.

next.js 배포에 성공했으나 css, js를 모두 읽지 못하는 경우가 발생, 이에 대한 해결