SSR인 Next.js, Docker로 베포하기

운영체제 과목에서 웹사이트를 제작하고 Docker를 사용해 Nginx로 배포하는 수행평가가 있었습니다. 저는 가장 익숙한 개발 스택인 Next.js를 선택하여 사이트를 개발하였습니다.

도커 이미지를 빌드와 도커 컨테이너를 실행하기 위해 Dockerfile을 작성한 뒤, 다음과 같은 명령어를 사용했습니다.

docker build -t suuk .
docker run -p 3000:3000 suuk

위 명령어를 실행하는 도중에는 오류가 발생하지 않았지만 localhost:3000에 접속했을 때, 제가 만든 사이트가 아닌 Nginx의 기본 환영 페이지가 나타나는 문제가 발생했습니다.

Next는 SSR 입니다.

3시간 동안 구글링을 하고, Dockerfile의 내용을 수정해보았지만 환영 페이지가 나타나는 문제를 해결하지 못했습니다. 그러던 중, Next.js는 SSR 방식을 사용한다는 점이 떠올랐습니다.

이 방식이 문제가 되었던 이유는, Nginx와 Docker를 활용하여 배포하려면 정적 파일인 index.html이 필요하지만, SSR 방식에서는 이와 같은 정적 파일이 존재하지 않았습니다. React와 같은 SPA 프레임워크는 정적 빌드가 가능하지만, Next.js는 기본적으로 SSR을 기반으로 작동하기에 빌드가 불가능 했습니다.

제가 만든 사이트를 배포하려면 Next.js의 SSG 기능을 사용하여 정적 파일로 변환해야만 배포가 가능했습니다.

문제 해결 1

Next.js를 정적으로 빌드하기 위해 Dockerfile을 수정해야 했습니다. 검색을 하다 Next.js 공식 페이지를 발견했고, GitHub의 Vercel Organization으로 이동하게 되었습니다. Organization 내의 Nextjs 레포지토리에서에서 Next.js용 Docker 예제를 발견했습니다.
그리고 제 Dockerfile의 내용을 위 URL의 내용으로 바꾸었습니다.

문제 해결 2 (Next.js 설정 변경)

next.config.js 파일에 아래 내용을 작성하여 Next.js를 standalone 모드로 빌드하도록 설정했습니다.

module.exports = {
  output: 'standalone',
};

여기서 중요한 부분은 output: 'standalone' 설정입니다. standalone 설정은 Next.js가 애플리케이션 실행에 필요한 모든 파일을 하나의 디렉토리로 모아, 배포 시 간단하게 관리할 수 있도록 도와주는 설정입니다.

이렇게 내용을 수정하고 다시 도커 빌드를 시작하면 / (루트) 경로에 out이라는 새로운 폴더가 생기게 됩니다. out이라는 폴더가 생기면 여러분은 nextjs로 개발한 웹 서비스를 성공적으로 베포한 것이 됩니다.

긴 글 읽어주셔서 감사합니다:) 내용의 오류나 오타가 있는 경우 댓글로 알려주세요!